Zed的纸张MCP服务器扩展
此扩展集成 纸张的MCP服务器作为上下文服务器 Zed的 Agent Panel,支持AI驱动的设计到编码工作流程。
先决条件
- 纸质桌面应用 必须正在运行(将MCP暴露在
http://127.0.0.1:29979/mcp) - Node.js 必须安装(用于
mcp-remote桥梁)
安装
- 从Zed的扩展市场安装扩展
- 确保Paper桌面应用程序正在运行
- 将以下内容添加到Zed设置中(
~/.config/zed/settings.json):
"context_servers": {
"paper": {}
}- 重新启动Zed或重新加载窗口
可用工具
连接后,Zed的AI助手可以使用以下工具:
| 工具 | 说明 |
|---|---|
getBasicInfo | 获取当前设计的基本上下文:文件名、页面名、节点数和带尺寸的画板列表。首先调用此命令以了解画布情况。 |
getSelection | 获取当前选定节点的详细信息,包括ID、名称、组件类型、大小以及它们所属的画板 |
getNodeInfo | 按ID获取特定节点的详细信息,包括其大小、可见性、锁定状态、父节点、子节点ID和文本内容(对于文本节点)。 |
getChildren | 获取节点的直接子节点。返回子节点的列表,包括其ID、名称、组件类型以及每个子节点的数量。有助于探索设计层次结构。 |
getScreenshot | 按ID捕获特定节点的PNG屏幕截图。将图像作为base64编码数据返回。 |
getJSX | 获取节点及其子代的JSX代码表示。支持两种样式格式:顺风CSS类(默认)或内联样式。 |
getTreeSummary | 获取节点子树层次结构的简洁文本摘要。返回一个缩进树,显示每个节点的组件类型、名称、ID和维度。在理解结构方面比getJSX便宜得多——在深入特定节点之前,将其用于定向。 |
getComputedStyles | 获取一个或多个节点的计算CSS样式。返回nodeId到CSSProperties对象的映射。支持批量请求。 |
findPlacement | 在画布上找一个空白位置放置新的画板。返回避免重叠现有画板的x/y坐标。在使用writeHTML创建新画板之前调用此命令。 |
getFillImage | 从具有图像填充的节点中提取图像数据。返回具有MIME类型的base64编码数据形式的图像。 |
writeHTML | 将HTML写入设计中。HTML被解析并转换为Paper设计节点。有两种模式可供选择:“插入子节点”将节点添加为目标的子节点,“替换”删除目标并将解析后的HTML插入其位置。 |
createArtboard | 在画布上创建一个新的画板(顶级框架)。自动将其定位在不与现有画板重叠的空白区域。返回画板ID,然后您可以将其与writeHTML插入子项一起使用以添加内容。 |
deleteNodes | 从设计中删除一个或多个节点。同时删除指定节点的所有子代。 |
setTextContent | 设置一个或多个文本节点的文本内容。仅适用于组件类型为“Text”的节点。当您只需要更改文本时,请使用此选项而不是writeHTML替换。支持单次调用中的批量更新。 |
运作原理
此扩展使用 mcp-remote 将Paper的HTTP/SSE MCP服务器连接到Zed的基于stdio的上下文服务器接口。扩展程序会自动运行:
npx -y mcp-remote http://127.0.0.1:29979/mcp本地使用
要在本地使用此扩展:
- 克隆此存储库:
git clone https://github.com/SeedOfMany/zed-mcp-server-paper.git
cd zed-mcp-server-paper- 确保Paper桌面应用程序正在运行
- 在Zed中,打开命令面板(
Cmd+Shift+P)并运行:
zed: install dev extension- 出现提示时选择克隆目录
- 添加到Zed设置(
~/.config/zed/settings.json):
"context_servers": {
"paper": {}
}- 重新加载Zed以应用更改
调试
从终端运行Zed,并记录详细日志:
zed --foreground关于纸
纸是创造美丽艺术和体验的强大设计工具。了解更多信息,请访问 纸.设计.
许可证
MIT许可证-请参阅 许可证 了解详情。
