@codify-ai/mcp-client

@codify-ai/mcp-client

Codify MCP 客户端 - 连接 MasterGo 和 IDE / CLI 的桥梁

通过 MCP 协议从远程 Codify 服务器获取代码

快速开始 · 功能特性 · 可用工具 · Codify 仪表盘

功能特性

• 🔌 一键安装：使用 npx 无需手动下载
• 📡 MCP 协议：完美集成 Cursor 等支持 MCP 的 IDE
• 🔐 安全认证：支持 access_key 认证
• 🛠️ 全能工具箱：包含代码获取、设计稿生成、双向同步等 10+ 个专业工具
• 📦 资源访问：通过 URI Codify://get_code/{content_id} 访问代码

快速开始

1. 配置 MCP

例如：编辑 ~/.cursor/mcp.json（如果文件不存在则创建）：

{
  "mcpServers": {
    "codify": {
      "command": "npx",
      "args": [
        "-y",
        "@codify-ai/mcp-client",
        "--url=https://mcp.codify-api.com"
      ],
      "env": {
        "CODIFY_ACCESS_KEY": "sk-your-access-key"
      }
    }
  }
}

2. 重启IDE / CLI

重启Cursor、VSCode、Trae 等 IDE 或者 CLI 工具，或重新加载 MCP 服务器配置。

3. 开始使用

在IDE / CLI 中，您可以：

方式 1：将设计稿给其他人（研发）拉取代码到本地

在 Codify 插件中选中一个元素，复制的指令然后给到其他人来获取代码。

无需启动 MasterGo，直接在 IDE 中输入该指令即可获取代码。

codify://getCode/{contentId}

方式 2：使用 AI 工具进行设计稿与代码的双向交互

直接在对话框输入指令，AI 会自动识别并调用工具：

• "获取 MasterGo 中选中的图层代码" (get_selection_code)
• "使用Codify design 工具设计一个深色模式的统计仪表盘" (design)
• "修改设计稿选中的图层，改为红色背景" (agent_update_node)
• "将我选中的图层删除" (agent_remove_node)
• "将我选中的图层，同步到本地代码" (agent_sync_design)
• "对比本地代码与设计稿的差异" (get_design_diff)

方式 3：引用核心规范资源

在对话中通过或直接输入 URI 引用：

• codify://rule
  • 核心规范与设计哲学： 你需要让 LLM 严格遵守转译代码规范才能完美的将它转译为 MasterGo 设计稿。当你需要将你已有的前端项目转换为设计稿的时候，必须让 LLM 读取此文档。同时，Codify为你总结了一套非常实用的UI设计哲学，它能够让LLM在生成页面的时候，保持优秀的设计审美。

可用工具

🔍 获取与比对

get_selection_code

获取 MasterGo 中当前选中图层（或指定图层）的代码。支持根节点完整保存，以及子节点自动合并到本地基准 HTML 文件。

• 参数: projectDir (必填), targetNodeId (可选), syncToBase (可选, 默认 true)
• 示例: "获取当前选中图层的代码"

get_design_diff

获取最新设计稿代码与本地 .codify 目录中旧代码的差异 (Diff)。用于全量或局部同步。

• 参数: projectDir (必填), targetNodeId (可选), filePath (可选)
• 示例: "对比最新设计稿，看看有哪些改动"

get_code_list

列出所有可用的代码列表。

• 参数: 无
• 示例: "查看我可以拉取的代码列表"

get_code

通过 contentId 获取特定代码并保存到本地。

• 参数: contentId (必填), projectDir (必填), outDir (必填), documentId (可选)
• 示例: "从频道 demo-123 获取代码"

get_library_list

获取当前文件已加载/已订阅的团队库列表（名称、ID、组件数、样式数）。

• 参数: 无
• 示例: "列出当前可用的团队库"

get_component_info

拉取指定团队库组件数据并落盘到本地 .codify/library/<teamLibraryId>/<teamLibraryName>.json，用于组件库页面生成。

• 参数: projectDir (必填), teamLibraryId (可选), teamLibraryName (可选), includePropertyDetails (可选, 默认 true)
• 示例: "使用 Ant Design UIKit 团队库，拉取组件信息"

组件库页面生成标准流程：

• 调用 get_library_list 确认团队库；
• 调用 get_component_info 拉取并落盘 JSON；
• 读取 JSON 结构：components 用于 <ui-component>，icons 用于 <ui-icon>；其中 <ui-component> 的 props 仅允许由 components[].props 推导（禁止臆造）。

🎨 生成与设计

design

根据自然语言需求生成符合 Codify 规范的 HTML+CSS 代码。

• 参数: requirement (必填)
• 示例: "帮我设计一个深色模式的登录页面"

agent_create_page

将生成的 HTML 代码发送到 MasterGo 插件并创建新页面。

• 参数: code (可选), filePath (可选), projectDir (必填), saveCodeToLocal (可选)
• 示例: "在 MasterGo 中创建一个新页面，代码在 ./temp.html"

agent_create_component

创建一个 MasterGo 母版组件或组件集（变体）。

• 参数: code (必填)
• 示例: "将这段 HTML 创建为 MasterGo 组件"

🛠️ 操作与更新

agent_update_node

将修改后的 HTML 代码发回 MasterGo 进行局部更新。这是默认修改工具。只要是在现有节点上做修改，就优先使用它。注意：必须包含 data-node-id。

• 参数: code (必填), targetNodeId (可选), documentId (可选)
• 示例: "更新选中的按钮颜色为蓝色"

agent_sync_design

将本地完整的静态 HTML 文件内容全量同步覆盖到 MasterGo 画布。

• 参数: filePath (必填), targetNodeId (必填, 根节点 ID), documentId (可选)
• 示例: "同步本地 index.html 到设计稿根节点"

agent_remove_node

在 MasterGo 中删除指定的或当前选中的图层。

• 参数: targetNodeId (可选), documentId (可选)
• 示例: "删除选中的图层"

👤 系统信息

get_user_info

查看当前登录用户信息、团队信息以及配额使用情况。

• 参数: 无
• 示例: "查看我的配额还剩多少"

许可证

MIT

贡献

欢迎提交 Issue 和 Pull Request！

Made with ❤️ by Codify Team