In short:
ak-page-builderbuilds or extends a page builder inside your project, from the components you already have, so people edit pages in an editor and agents edit them through API, CLI and MCP. When it is done, it creates a project-specific operator skill and hands off toak-test. It does not build a builder just to tweak one page, and it does not treat an accepted publish request as a live page.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when your project already has components like Hero, ProductGrid and FAQ and you want to assemble them into pages that both people and agents can edit, or when a builder already runs and you need a new block, a new widget size, or a page edit through the agent interface. You do not need it to tweak the font or spacing of one page, or just to wrap an API as a CLI or MCP.
flowchart LR
A["ak-plan"] --> B["ak-page-builder"]
B --> C["Builder running in the project"]
B --> D["Project operator skill"]
C --> E["ak-test"]
D --> F["Everyday page content edits"]It revolves around 4 concepts:
| Concept | Question | Example |
|---|---|---|
| Three modes | Build a new builder, extend an existing one, or just edit a page? | setup ./apps/storefront, update to add a ProductGrid block, operate to draft a pricing page |
| Blocks and page documents | Which components go into the builder, and how is a page stored? | A Hero block has a props schema, slots, small, medium and large sizes; a page is a tree of nodes with stable IDs |
| Draft, preview, live | Is the page really live yet? | Saved draft, preview link, waiting for build and live are four different states |
| Operator skill | What does the agent use to edit pages next time? | A skill such as storefront-page-operator that teaches the right API, CLI and MCP calls for the project |
The three modes are arguments of the skill, not subcommands of the ak CLI. If you leave the mode out, the skill infers it from the request and the project.
Sample prompt to build a new builder:
/ak-page-builder setup ./apps/<app name>
Build a page builder from the existing Hero, ProductGrid and FAQ components.
Agents need API, CLI and MCP, running locally and remotely, with preview and publish.
Keep the current auth and database. The editor must work on phones and tablets.
Run in a test environment only, do not publish to production.This skill has no flags. After the command you can write three optional parts in order: the mode (setup, update or operate), the project path, then the request in plain words.
Below is the detailed version: the run flow, 4 situations with prompts, how to write the input, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-page-builder: turn your existing components into a page builder" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-page-builder". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-page-builder
