适用于 MCP 企业版。
设置包括三个步骤：安装 MCP 服务器、安装技能并登录一次（第 2 步）。您可以在两种设置方法之间进行选择。
Code MCP 连接的是你公司的 ProtoPie Cloud，而非公共的 cloud.protopie.io，在公共站点登录会被拒绝。
你需要使用自己的主机地址，例如 https://<company>.protopie.cloud（专属云），或 https://protopie.<company>.com（本地部署）。
如果使用方式 A，AI 助手会在配置时向你询问该地址，直接回复主机地址，或粘贴一条 Pie 链接即可。如果暂时不确定，可以先跳过，之后再设置（详见“故障排查”）。
将此提示词粘贴到任何支持 MCP 的智能体中。在 Claude Desktop 中，请使用 </> Code 标签页，而不是 Chat 标签页。它会添加 protopie-code-mcp 服务器并安装技能；然后转到第 2 步。
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
Set up "ProtoPie Code MCP" in the environment you are running in. Read the install guide and follow the "Method B — Install it yourself" section for your client: <http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
如果您的智能体无法完成某个步骤（例如，它无法编辑配置文件），请使用下面的方法 B。
找到您的智能体，运行其命令（或粘贴其配置），然后登录（第 2 步）。服务器定义在任何地方都是相同的：command: npx,args: ["-y", "@protopie.io/code-mcp@latest"],key: protopie-code-mcp
在何处运行
Claude Code / Codex → 终端
Claude Desktop → </> Code 标签页（而非 Chat 标签页）
Cursor / VS Code / Antigravity → 将 JSON 粘贴到配置文件中，然后在终端中运行 install-skill 命令
Claude Code
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
claude mcp add --scope user protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
Codex
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
codex mcp add protopie-code-mcp -- npx -y @protopie.io/code-mcp && \
npx -y @protopie.io/code-mcp install-skill -a
Cursor — 添加到 ~/.cursor/mcp.json（全局）或 .cursor/mcp.json（项目），然后安装技能：
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
VS Code（需要启用 GitHub Copilot）— ⌘⇧P → MCP: Open User Configuration，添加，然后选择 Start；接着安装技能：
{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }{ "servers": { "protopie-code-mcp": { "type": "stdio", "command": "npx", "args": ["-y", "@protopie.io/code-mcp"] } } }npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
npx -y @protopie.io/code-mcp install-skill -a
Antigravity — 添加到 ~/.gemini/config/mcp_config.json（或针对单个项目的 .agents/mcp_config.json），然后安装技能：
agy mcp add protopie-code-mcp npx -y @protopie.io/code-mcp@latest && \
npx -y @protopie.io/code-mcp@latest install-skill -a antigravity
agy mcp add protopie-code-mcp npx -y @protopie.io/code-mcp@latest && \
npx -y @protopie.io/code-mcp@latest install-skill -a antigravity
agy mcp add protopie-code-mcp npx -y @protopie.io/code-mcp@latest && \
npx -y @protopie.io/code-mcp@latest install-skill -a antigravity
agy mcp add protopie-code-mcp npx -y @protopie.io/code-mcp@latest && \
npx -y @protopie.io/code-mcp@latest install-skill -a antigravity
agy mcp add protopie-code-mcp npx -y @protopie.io/code-mcp@latest && \
npx -y @protopie.io/code-mcp@latest install-skill -a antigravity
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp@latest"{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp@latest"{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp@latest"{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp@latest"{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp@latest"默认情况下，Code MCP 会连接到 https://cloud.protopie.io。对于私有部署或专属企业云，请添加一个指向您实例的 PROTOPIE_CLOUD_URL 环境变量 — 您粘贴的链接和您的登录信息必须属于该相同的主机。
基于配置文件的客户端（Cursor / VS Code / Antigravity）— 添加到服务器配置中：
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_CLOUD_URL": "https://<your-host>" } } } }Claude Code / Codex — 在注册时添加 -e PROTOPIE_CLOUD_URL=https://<your-host>。
适用于以上两种方法。Code MCP 读取 ProtoPie Cloud 数据，因此它仅需要登录一次。
让您的智能体调用 auth_login 工具。系统将打开一个浏览器窗口来完成 ProtoPie Cloud OAuth 流程。
令牌（Token）存储在您的操作系统钥匙串中（macOS Keychain、Windows 凭据管理器或 Linux libsecret），作用域限定为您配置的云端主机。
您可以随时使用 auth_status 工具进行检查（“检查我的 ProtoPie 授权状态”）。
一次只能登录一个账号；新的登录会覆盖旧的，退出登录则会清除它。智能体只能获取到您的账号有权限下载的 Pie。
在 ProtoPie Cloud 中，打开您的 Pie 的开发视图（Dev View），转到 MCP 标签页，选择一个元素（整个 Pie、一个场景、一个组件或一个图层），然后点击复制链接（Copy link）。
将链接粘贴到您的智能体中并输入提示词 — 例如：“在 React（或您的技术栈）中实现此元素及其交互。”
智能体从服务器上精确读取该选定内容，并编写匹配的代码。它绝不会在浏览器中打开该 URL。
选择较小的范围并分批实现 — 场景或元素范围的链接比整个 Pie 的提示词更快速、更可靠。
从开发视图（Dev View）重新复制以针对最新版本（链接指向特定的修改版本）。
为您的图层命名；生成的代码将映射它们（cta-button 优于 Rectangle 41）。
从 Figma 导入的文本有时会以图片形式导入 — 如果生成的文本看起来不对，请检查该图层在实际中是否是一张图片。
仅在满足以下条件时，Code MCP 才能正常工作：
Pie 保存于企业版组织团队空间中。
您是该组织内的“查看者（Viewer）”或“编辑者（Editor）”。
该 Pie 启用了下载权限。
该 Pie 链接没有密码保护。
下载权限可以来自于团队/项目权限，或者“可以查看与下载”的共享。不支持匿名访问。
如果不满足上述任何访问要求，开发视图（Dev View）将不显示 MCP 链接，并会显示以下消息：“MCP 链接不可用。请让 Pie 所有者授予您组织访问权限和 Pie 下载权限。”
Code MCP 可以发送匿名的使用遥测数据 — 仅收集事件计数，绝不收集您的原型内容。它记录例如运行了哪个工具、成功/失败、持续时间、粗略的大小分段、单向哈希加密的 pie id、随机设备 id 以及您的 Cloud 账号 id 等信息。它绝不发送图层文本、名称、pie URL 或 .pie 文件内容。
您可以通过在服务器上将 PROTOPIE_MCP_AMPLITUDE_KEY 设置为空字符串来关闭它：
基于配置文件的客户端（Cursor / VS Code / Antigravity）：
{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }{ "mcpServers": { "protopie-code-mcp": { "command": "npx", "args": ["-y", "@protopie.io/code-mcp"], "env": { "PROTOPIE_MCP_AMPLITUDE_KEY": "" } } } }Claude Code / Codex：在注册时添加 -e PROTOPIE_MCP_AMPLITUDE_KEY=。
可选：PROTOPIE_MCP_AMPLITUDE_SERVER_ZONE=EU 将遥测数据路由到欧盟地区（默认是美国）。
我已使用 Enterprise 方案，但登录被拒绝 → 这通常是因为你登录了公共的 cloud.protopie.io，而非公司专属主机地址。请将你的 ProtoPie Cloud 主机地址（或一条 Pie 链接）提供给 AI 助手，让它更新 PROTOPIE_CLOUD_URL，然后重启助手会话并重新登录。如果已确认使用的是正确主机地址，仍然无法登录，请联系你的 ProtoPie 管理员。
“Authentication required (需要身份验证)” → 运行 auth_login 工具，然后检查 auth_status。
工具没有显示 → 安装后重新启动您的智能体绘画（在 Claude Desktop 的 Code 标签页中，完全退出并重新打开）。请确认 Node 版本为 20+。
出现 spilled: true 及文件路径 → 结果过大已保存至磁盘；您的智能体会从那里读取。这在大型场景中属正常现象。
Code MCP 可以编辑我的 Pie 吗？ → 不能，它是只读的。
了解有关 开发视图（Dev View）的更多信息。