MallaDocs
HomeQuickstartOpen Malla

Edit with AI and MCP

Change pages with the AI panel and connect Claude or another agent through MCP.

User guide
Intermediate20 min

You will build: A page section built and refined with the AI panel, then edited from Claude through the MCP server

Read first: Tour of the editorBuild a landing page

In this tutorial you build a section by describing it, refine it, let the AI write search and image texts, and then connect Claude so it can edit your site from outside the editor. You need the Editor, Admin or Owner role on the site. Creating an API key needs an owner or admin of the workspace.

Edit with AI and MCPVideo coming soon. The written steps below cover everything.
Edit with AI and MCP· 9 min

Build a section with the AI panel

  1. Open the panel

    Open a page in the editor and press Ask AI at the bottom of the canvas. The panel header shows what the AI will work on: Whole page when nothing is selected.

  2. Describe the section

    With nothing selected, the task menu next to Send is set to Generate. Type what you want, for example:

    Add a pricing section with three plans side by side: Free, Pro and Team. Each plan has a name, a price, three features and a button.

    Press Send, or ⌘↵.

  3. Watch it work

    The panel lists each step as the AI takes it, such as Inserted elements or Created class. Nothing changes on the canvas until the AI is done; then the whole change lands at once. Press Stop to cancel, and nothing is applied.

Checkpoint

A pricing section with three plans appears on the page, on every artboard.

Refine what it made

  1. Select and ask

    Select the pricing section. The header now shows 1 element selected and the task switches to Edit. Ask for a change:

    Stack the plans vertically on phones and make the Pro plan stand out with the accent color.

  2. Use your own styles

    The AI knows your classes, tokens and components. Name them in the prompt to keep the page consistent, for example "use my button-primary class for the buttons".

  3. Undo a whole change

    Not what you wanted? Press ⌘Z. One AI request is one undo step, so the whole change goes back at once. Then try a more precise prompt.

Let the AI write texts

  1. Write alt text

    Select the images on the page. The task switches to Alt text. Type "Describe each image for screen readers" and press Send.

  2. Write search texts

    Click an empty spot of the canvas, pick SEO in the task menu and type "Write a search title and description for this page". The result appears in the SEO section of the page settings. Read it and adjust it before you publish.

The task menu also has Binding, to connect an element to data, and Workflow, to add logic to the page.

Connect Claude with MCP

MCP (Model Context Protocol) lets an AI agent such as Claude read and edit your sites from outside the editor. The agent connects with an API key and works with the same tools as the AI panel.

  1. Create an API key

    In the AI panel, press the key icon (API keys). Type a name such as Claude Code, check Write so the agent can make changes, and press Create.

  2. Copy the key

    The key starts with mk_. Press Copy now: it is not shown again. Keep it somewhere safe, such as your agent's secret settings.

  3. Add the server to your agent

    The MCP address is the MCP host of your Malla installation followed by /mcp, for example https://mcp.example.com/mcp. Send the key as a bearer token. In Claude Code:

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

    In other MCP clients, add an HTTP server with the same address and an Authorization header with the same value.

  4. Try a read

    Ask your agent "List my Malla sites", then "List the pages of the Demo site". It uses the list_sites and list_pages tools.

  5. Make an edit

    Keep the page open in the editor and ask: "Add a FAQ section with three questions under the pricing section on the home page." The section appears on the canvas while you watch, and anyone else with the page open sees it too.

Done

The page has a pricing section made in the AI panel and a FAQ section added by your agent through MCP.

Prompts to try

  • "Turn this row into a three-column grid on desktop and one column on phones."
  • "Add a testimonial section with three quotes, using my card class."
  • "Make the hero headline bigger and add more space above the button."
  • "Write alt text for these images."
  • Through MCP: "Show me the classes and tokens of my site", then "Restyle the footer with those tokens."

What you learned

  • The AI panel works on the selection, or the whole page when nothing is selected, and each request is one undo step.
  • The task menu picks the kind of change: Generate, Edit, Binding, Workflow, Alt text or SEO.
  • An API key connects an agent to the MCP server; it acts as you, and Write decides whether it can make changes.

Read the guides behind this tutorial:

AI and MCPEdit with the AI panel and connect agents like Claude through the MCP server and API keys.Classes and tokensReusable classes, combo classes, design tokens and fonts that keep a whole site consistent.SEO and site settingsPage titles, descriptions, social images, sitemaps, robots and noindex.HTTP APIThe editor API, the endpoints of published sites and the MCP endpoint.