Tóm tắt nhanh:
ak-page-builderdựng hoặc mở rộng một trình ghép trang ngay trong dự án của bạn, từ chính các component đang có, để người sửa trang bằng editor và agent sửa qua API, CLI, MCP. Xong việc nó tạo operator skill riêng cho dự án và chuyển sangak-test. Nó không dựng builder chỉ để chỉnh một trang lẻ, và không coi yêu cầu publish đã nhận là trang đã lên.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi dự án có sẵn component như Hero, ProductGrid, FAQ và bạn muốn ghép chúng thành trang mà cả người lẫn agent sửa được, hoặc khi builder đã chạy và cần thêm block, thêm cỡ widget, hay sửa một trang qua giao diện agent. Không cần khi bạn chỉ chỉnh font hay khoảng cách của một trang, hoặc chỉ muốn bọc một API thành CLI hay MCP.
flowchart LR
A["ak-plan"] --> B["ak-page-builder"]
B --> C["Builder chạy trong dự án"]
B --> D["Operator skill của dự án"]
C --> E["ak-test"]
D --> F["Sửa nội dung trang hằng ngày"]Nó xoay quanh 4 khái niệm:
| Khái niệm | Câu hỏi | Ví dụ |
|---|---|---|
| Ba chế độ | Dựng builder mới, mở rộng builder đã có, hay chỉ sửa một trang? | setup ./apps/storefront, update thêm block ProductGrid, operate tạo bản nháp trang giá |
| Block và tài liệu trang | Component nào vào builder, trang lưu dưới dạng gì? | Block Hero có schema props, slot, cỡ nhỏ, vừa, lớn; trang là cây node có ID cố định |
| Nháp, preview, live | Trang đã thật sự lên chưa? | Lưu nháp, có link preview, chờ build và đã live là bốn trạng thái khác nhau |
| Operator skill | Lần sau agent sửa trang bằng gì? | Một skill như storefront-page-operator dạy cách gọi đúng API, CLI, MCP của dự án |
Ba chế độ là đối số của skill, không phải lệnh con của ak CLI. Không ghi chế độ thì skill tự suy ra từ yêu cầu và dự án.
Prompt mẫu để dựng builder mới:
/ak-page-builder setup ./apps/<tên app>
Dựng trình ghép trang từ các component Hero, ProductGrid, FAQ đang có.
Agent cần API, CLI, MCP chạy local và từ xa, có preview và publish.
Giữ auth và database hiện tại. Editor phải dùng được trên điện thoại và tablet.
Chỉ chạy trong môi trường thử, không publish lên production.Skill này không có cờ. Sau tên lệnh bạn ghi tuỳ chọn ba phần theo thứ tự: chế độ (setup, update hoặc operate), đường dẫn dự án, rồi yêu cầu bằng lời.
Phần dưới đây là bản chi tiết: luồng chạy, 4 tình huống kèm prompt, cách ghi đầu vào, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-page-builder: ghép component có sẵn thành trình dựng trang" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-page-builder". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-page-builder
