Calicat MCP Server 使用方法
简介
Calicat MCP Server 可以将 Calicat 文件中的原型设计和需求卡片提供给第三方支持 MCP 的 AI Agents，无缝集成到用户开发工作流程中。除了通过 MCP 获取设计和需求，用户还可以指引 AI 通过 Calicat MCP 向 Calicat 文件中创建需求卡片文档。
Calicat MCP 通过 Streamable HTTP 方式与 Calicat 服务器通信传输数据，无需安装软件，只需要向 AI Agents 提供 Calicat 图层链接即可。
Calicat MCP 支持以下场景：
- 获取设计数据：将图层设计数据提供给 AI Agents，以便 AI Agents 可以基于此生成前端代码或修改已有代码。
- 获取需求卡片数据：将需求卡片数据提供给 AI Agents，以便 AI Agents 可以基于需求文档开发相关功能逻辑。
- 创建需求卡片：AI Agents 可以向 Calicat 文件中创建需求卡片，适用于形成需求文档、开发文档、测试用例文档等场景。
MCP Server 配置方法见 Calicat MCP Server 配置
可使用的工具及使用方法
Calicat MCP Server 工具的具体执行在 Calicat 编辑器内，所以在使用 Calicat MCP 时，请确保浏览器中打开了相关 Calicat 文件的编辑器页面。
- create_document
使用此工具可向 Calicat 文件中创建需求卡片，必须提供文件链接。
例如向 AI 发送指令：基于项目中 xxx 页面和逻辑，生成开发文档，创建到：https://www.calicat.cn/design/xxxx 文件中
- get_meta_data
此工具将向 AI 返回文件中图层设计的元数据，可以理解为是大致的图层骨架结构，包括图层 ID、名称、类型、位置和大小。引导 AI 使用此工具可用较少的 Token 快速浏览页面设计、检索图层。
必须提供图层链接（右键图层 -> 复制图层链接）或文件链接。
例如向 AI 发送指令：基于这个文件：https://www.calicat.cn/design/xxxx 中的 xxx 页面设计，修改我的前端代码 xxx/xxx.ts
AI 会先调用 get_meta_data 获取文件画布上的所有页面设计骨架信息，然后进一步定位你所提到的 xxx 页面，然后进一步通过 get_design_data 获取页面详细的设计数据。
- get_design_data
使用此工具获取指定图层的详细设计数据，必须提供图层链接（右键图层 -> 获取图层链接）。
例如向 AI 发送指令：基于这个文件：https://www.calicat.cn/design/xxxx?node-id=xxxx 生成 React 代码。
- get_prd_list
使用此工具获取文件中的所有需求卡片列表，必须提供文件链接。
- get_prd_full_content
使用此工具获取需求卡片的完整内容，必须提供文件链接和指定的需求卡片标题或 ID
当你向 AI 发送指令要获取 xxx 需求卡片内容时，AI 一般会先通过 get_prd_list 获取需求卡片列表，然后通过结果中的 ID 再调用 get_prd_full_content 获取需求卡片内容。
例如向 AI 发送指令： 基于这个文件 https://www.calicat.cn/design/xxxx 中的 xxxx 需求卡片，优化我的代码逻辑。
AGENTS.md 建议
建议将一下内容添加至 AGENTS.md 或相关文档中，以便 AI 可以更好地理解 Calicat MCP Server 的使用方法。
[Calicat MCP 使用说明]
- 在收到 calicat.cn 域名的连接时，不要直接尝试访问，而是通过 Calicat MCP 相关工具的说明获取数据。
- get_meta_data 工具获取到的是大致的图层骨架结构，使用此工具可用较少的 Token 快速浏览页面设计、检索图层。get_meta_data 获取到的数据不能直接用作前端代码生成。
- get_design_data 工具用于获取指定图层的详细设计数据，在你开始实际的前端代码生成前，确保你通过 get_design_data 获取到了图层的详细设计数据，并以此为基础进行前端代码生成。