MallaDocs
HomeQuickstartOpen Malla

AI and MCP

Edit with the AI panel and connect agents like Claude through the MCP server and API keys.

User guide

Malla’s AI edits your site through the same operations you use by hand. Every change is validated, shows up live on the canvas, merges with your collaborators’ work and can be undone.

The AI panel

In a design session, open the AI panel beside the canvas and describe what you want. The panel knows the selected element, your classes, tokens, components and queries, not just the text you type.

  • “Make this a three-column grid on desktop and stack it on mobile.”
  • “Add a pricing section with three tiers using my button class.”
  • “Show ‘Sold out’ when item.stock is 0.”
  • “Write SEO titles for this page” or “add alt text to these images.”

A whole AI change is one undo step: ⌘Z takes it back.

For one expression, use Ask AI in the Expression Studio. It writes, fixes and explains an expression, and it sees field names and types only, never your data.

What the AI can do

The AI works through a fixed set of tools, each validated by the same schemas as the editor:

insert_subtreeAdd a section or element tree, reusing your classes.
set_stylesSet or clear styles per breakpoint and state.
set_propsChange text, links and tags, or bind them to expressions.
create_classCreate a reusable class.
create_queryAdd a page query.
create_workflowAdd a client workflow with a trigger and steps.
set_page_seoWrite the SEO title and description.
set_alt_textDescribe an image.

Connect an agent with MCP

Malla runs a Model Context Protocol server, so agents like Claude can read and edit your sites. An agent can do everything you can do in the web app: besides the editing tools above, it reads the live site and page documents, runs editor commands, and manages pages, the CMS, tables, forms, assets, server workflows, publishing and more. Every tool, action and limit is listed in the MCP server reference.

  1. Create an API key

    In the editor, open API keys from the AI panel and create a key. Only workspace owners and admins can create keys. Copy it now: it starts with mk_ and is shown only once.

  2. Add the server to your agent

    Point your MCP client at the /mcp endpoint with the key as a bearer token. There is no public MCP address yet: use the MCP host of your Malla installation.

    json
    {
  "mcpServers": {
    "malla": {
      "type": "http",
      "url": "https://<your MCP host>/mcp",
      "headers": { "Authorization": "Bearer mk_…" }
    }
  }
}

  3. Ask away

    “List my sites”, “add a FAQ section to the pricing page”… Edits land in the live room, so anyone with the page open sees them.