Build a page with an AI agent

In this tutorial you connect Claude to Malla through the MCP server and let it build a page from start to finish: create the page, add sections, style them with your tokens, upload an image, write the SEO texts and publish to staging. You watch every step land on the canvas and keep the last word with undo.

You need the Editor, Admin or Owner role on the site, and an owner or admin of the workspace to create the API key. Publishing to production needs Admin; this tutorial stops at staging.

Create a key

1. Open API keys

   Open any page of your site in the editor, press Ask AI, then the key icon (API keys).

2. Create a write key

   Type a name such as Claude – landing pages, check Write and press Create. Without Write the agent can read but not change anything.

3. Copy it

   Press Copy. The key starts with mk_ and is not shown again. You paste it into your agent's config in the next step.

Connect your agent

The MCP address is the MCP host of your Malla installation followed by /mcp. The examples use https://mcp.example.com/mcp.

Claude Code

Add the server from a terminal:

claude mcp add --transport http malla https://mcp.example.com/mcp \
  --header "Authorization: Bearer mk_your_key"

Or share it with your team in the project's .mcp.json, with the key read from an environment variable so it never lands in git:

{
  "mcpServers": {
    "malla": {
      "type": "http",
      "url": "https://mcp.example.com/mcp",
      "headers": { "Authorization": "Bearer ${MALLA_API_KEY}" }
    }
  }
}

Run /mcp in Claude Code to check that malla is connected.

Claude Desktop

Claude Desktop starts local servers from claude_desktop_config.json (Settings → Developer → Edit Config). Use the mcp-remote bridge to reach the Malla server with your key (it needs Node.js):

{
  "mcpServers": {
    "malla": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "https://mcp.example.com/mcp", "--header", "Authorization:${MALLA_AUTH}"],
      "env": { "MALLA_AUTH": "Bearer mk_your_key" }
    }
  }
}

Restart Claude Desktop. The Malla tools appear in the tools menu of a new chat.

Let the agent look around

Before it builds anything, the agent needs ids and your design system. Ask:

Show me the pages of my Demo site, and the classes and color tokens it uses.

The agent calls list_pages, then get_site. It now knows the page paths, the class names such as button-primary, and tokens such as --color-accent. Naming them in your prompts keeps the new page consistent with the rest of the site.

Build the page

1. Create the page

   Keep the editor open on the site, then ask:

   Create a page called “Spring launch” at /spring.

   The agent calls the pages tool with action: "create". The page appears in the Pages panel at once, because the tool also updates the editor's page list.

2. Open it

   Open Spring launch in the editor so you can watch the next steps arrive live.

3. Add the sections

   On /spring, add a hero with a headline, a short paragraph and a button using my button-primary class. Below it, add a row of three features with a title and a sentence each.

   The agent sends one insert_subtree call per section. Each one lands on every artboard as a single change.

4. Style it with your tokens

   Give the hero the accent color as background, center its content and add 96px of padding on desktop and 48px on phones. Stack the features on phones.

   The agent uses set_styles with the base and mobile breakpoints and var(--color-accent) for the color. If you ask for a new token, it adds it with site_ops and setColorToken first.

Add an image

1. Upload it

   Upload https://images.example.com/spring-hero.jpg as spring-hero.jpg and put it in the hero, under the button, with a good alt text.

   The agent calls assets with action: "upload" and the URL (it can also send the file as base64). Files up to 20 MB are accepted, and the URL must be public https.

2. Check the alt text

   The agent inserts an image node with the uploaded URL and writes the alt text with set_alt_text. Select the image in the editor and read the alt text in the inspector.

Ship it

1. Write the SEO texts

   Write a search title and description for /spring.

   The agent calls set_page_seo. The texts appear in the SEO section of the page settings. Read them and adjust them if needed.

2. Publish to staging

   Publish the site to staging.

   The agent calls publish with action: "publish" and environment: "staging". Ask for the staging URL and open /spring there.

When something goes wrong

• “This API key is read-only”: the key was created without Write. Create a new key with Write and update your config.
• “Site not found”: the site belongs to another workspace than the key, or you have no role on it.
• “Requires design access to this site”, “Requires content access to this site” or “Content editors may only edit the text of plain text nodes”: your role on the site is too low for this change. Ask an admin for the Editor role.
• An error naming ops[2]: one operation of a batch was invalid, so nothing was applied. The agent reads the message and usually fixes it on the next try.

Prompts to try

• “Rename the color token accent to brand everywhere.” (uses rename_token)
• “Turn the feature card into a component and use it three times.” (uses editor_command with createComponent, then insertInstance)
• “Add a blog collection with a title, a cover image and a body, and three draft posts.” (uses cms)
• “Show me the last ten contact form submissions.” (uses forms)

What you learned

• An agent connects to /mcp with a workspace API key as a bearer token; Write decides whether it can change things.
• The agent creates pages with the pages tool, edits them with the same tools as the AI panel, and reaches everything else (assets, CMS, publish…) through one tool per area with an action.
• Every change lands live in the editor and is undoable by you.

Read the reference behind this tutorial: