用 AI 和 MCP 编辑 · 文档

中级20 分钟

你将构建：一个用 AI 面板构建并优化的页面区块，随后通过 MCP 服务器由 Claude 编辑

在本教程中，你将通过描述来构建一个区块，再加以优化，让 AI 撰写搜索文本和图片文本，然后连接 Claude，让它从编辑器外部编辑你的站点。你需要该站点的 Editor、Admin 或 Owner 角色。创建 API 密钥需要工作区的所有者或管理员。

用 AI 和 MCP 编辑视频即将推出。下面的文字步骤已涵盖全部内容。

用 AI 和 MCP 编辑· 9 分钟

用 AI 面板构建区块

打开面板
在编辑器中打开一个页面，点击画布底部的 Ask AI。面板标题会显示 AI 的处理对象：未选中任何元素时为 Whole page。
描述区块
未选中任何元素时，Send 旁的任务菜单设为 Generate。输入你想要的内容，例如：
添加一个价格区块，三个套餐并排显示：Free、Pro 和 Team。每个套餐有名称、价格、三项功能和一个按钮。
点击 Send，或按 ⌘↵。
观察它的工作
面板会列出 AI 执行的每一步，例如 Inserted elements 或 Created class。在 AI 完成之前画布不会变化；完成后整个修改一次性生效。点击 Stop 可取消，不会应用任何修改。

检查点

页面上出现了一个包含三个套餐的价格区块，所有画板上都有。

选中后提问
选中价格区块。标题现在显示 1 element selected，任务切换为 Edit。提出修改要求：
在手机上把套餐改为纵向排列，并用强调色突出 Pro 套餐。
使用你自己的样式
AI 了解你的类、令牌和组件。在提示词中点名它们，让页面保持一致，例如“按钮使用我的 button-primary 类”。
撤销整个修改
不是你想要的？按 ⌘Z。一次 AI 请求就是一个撤销步骤，所以整个修改会一次性恢复。然后试试更精确的提示词。

撰写替代文本
选中页面上的图片。任务会切换为 Alt text。输入“为屏幕阅读器描述每张图片”，然后点击 Send。
撰写搜索文本
点击画布的空白处，在任务菜单中选择 SEO，输入“为这个页面撰写搜索标题和描述”。结果会出现在页面设置的 SEO 分区中。发布前请阅读并调整。

任务菜单中还有 Binding（把元素连接到数据）和 Workflow（为页面添加逻辑）。

MCP（Model Context Protocol）让 Claude 等 AI 智能体能从编辑器外部读取和编辑你的站点。智能体通过 API 密钥连接，并使用与 AI 面板相同的工具。

创建 API 密钥
在 AI 面板中点击钥匙图标（API keys）。输入名称，例如 Claude Code，勾选 Write 以便智能体能进行修改，然后点击 Create。
复制密钥
密钥以 mk_ 开头。现在就点击 Copy：它不会再次显示。把它保存在安全的地方，例如智能体的密钥设置中。
把服务器添加到你的智能体
MCP 地址是你的 Malla 安装的 MCP 主机加上 /mcp，例如 https://mcp.example.com/mcp。把密钥作为 bearer 令牌发送。在 Claude Code 中：
bash
```
claude mcp add --transport http malla https://mcp.example.com/mcp \
  --header "Authorization: Bearer mk_your_key"
```
在其他 MCP 客户端中，添加一个使用相同地址的 HTTP 服务器，以及值相同的 Authorization 请求头。
试试读取
对你的智能体说“列出我的 Malla 站点”，然后说“列出 Demo 站点的页面”。它会使用 list_sites 和 list_pages 工具。
进行一次编辑
保持页面在编辑器中打开，然后提问：“在首页的价格区块下方添加一个包含三个问题的常见问题区块。”区块会在你眼前出现在画布上，其他打开该页面的人也能看到。

完成

页面上有一个在 AI 面板中制作的价格区块，以及一个由你的智能体通过 MCP 添加的常见问题区块。

AI 面板作用于选中的元素，未选中时作用于整个页面，每次请求是一个撤销步骤。
任务菜单决定修改的类型：Generate、Edit、Binding、Workflow、Alt text 或 SEO。
API 密钥把智能体连接到 MCP 服务器；它代表你本人行事，Write 决定它能否进行修改。

阅读本教程背后的指南：