AI 与 MCP · 文档

Malla 的 AI 通过与你手动操作相同的操作来编辑站点。每个改动都会经过校验，实时显示在画布上，与协作者的工作合并，并且可以撤销。

AI 面板

在设计会话中，打开画布旁的 AI 面板，描述你想要的效果。面板了解所选元素、你的类、令牌、组件和查询，而不仅仅是你输入的文字。

“在桌面端做成三列网格，在移动端堆叠排列。”
“用我的按钮类添加一个包含三档价格的价格区块。”
“当 item.stock 为 0 时显示‘Sold out’。”
“为这个页面写 SEO 标题”或“给这些图片添加替代文本”。

一次 AI 改动就是一个撤销步骤： ⌘Z 即可撤回。

AI 能做什么

AI 通过一组固定的工具工作，每个工具都使用与编辑器相同的结构进行校验：

insert_subtree添加一个区块或元素树，复用你的类。

set_styles按断点和状态设置或清除样式。

set_props修改文本、链接和标签，或将它们绑定到表达式。

create_class创建一个可复用的类。

create_query添加一个页面查询。

create_workflow添加一个带触发器和步骤的客户端工作流。

set_page_seo编写 SEO 标题和描述。

set_alt_text描述一张图片。

用 MCP 连接智能体

Malla 运行着一个 Model Context Protocol 服务器，因此 Claude 等智能体可以读取和编辑你的站点。除了上述编辑工具，它还提供 list_sites、list_pages、get_page 和 get_site_styles。

创建 API 密钥
在编辑器中，从 AI 面板打开 API keys 并创建一个密钥。只有工作区所有者和管理员可以创建密钥。请立即复制：它以 mk_ 开头，只显示一次。

把服务器添加到智能体

将你的 MCP 客户端指向 /mcp 端点，并以该密钥作为 bearer token。目前还没有公共的 MCP 地址：请使用你的 Malla 部署的 MCP 主机。

json

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

尽管提问
“列出我的站点”“给价格页添加一个 FAQ 区块”……编辑会直接进入实时房间，所有打开该页面的人都能看到。