设置包括三个方面：安装 MCP 服务器、安装技能（Skill）以及通过一次性登录（步骤 2）。任选以下两种方法之一即可。
将以下提示词粘贴到任何支持 MCP 的 AI 助手。在 Claude Desktop 中，请使用 </> Code 标签页，不要使用 Chat 聊天，该指令会自动添加 protopie-code-mcp 服务器、安装技能并转到步骤 2。
在您当前运行的环境中设置 "ProtoPie Code MCP"。请阅读安装指南，并遵循适用于您的客户端的 "Method B — Install it yourself"（方法 B —— 自行安装）指南：<http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
在您当前运行的环境中设置 "ProtoPie Code MCP"。请阅读安装指南，并遵循适用于您的客户端的 "Method B — Install it yourself"（方法 B —— 自行安装）指南：<http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
在您当前运行的环境中设置 "ProtoPie Code MCP"。请阅读安装指南，并遵循适用于您的客户端的 "Method B — Install it yourself"（方法 B —— 自行安装）指南：<http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
在您当前运行的环境中设置 "ProtoPie Code MCP"。请阅读安装指南，并遵循适用于您的客户端的 "Method B — Install it yourself"（方法 B —— 自行安装）指南：<http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
在您当前运行的环境中设置 "ProtoPie Code MCP"。请阅读安装指南，并遵循适用于您的客户端的 "Method B — Install it yourself"（方法 B —— 自行安装）指南：<http://www.protopie.io/learn/docs/mcp-code-mcp-setup>
如果您的 AI 助手由于某种限制无法完成所有步骤（比如它不能直接修改您的配置文件），请改用下方的方法 B。
在您所用的客户端中通过运行命令、复制配置来添加服务器，然后再进行登录（步骤 2）。各处的服务器定义参数标准如下：command: npx、args: ["-y", "@protopie.io/code-mcp"] 和注册键值 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 支持) — 在 VS Code 中使用 ⌘⇧P (Windows 下为 Ctrl+Shift+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 中），紧接着执行技能添加命令：
{ "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
默认状况下，Code MCP 会指引并请求 https://cloud.protopie.io 服务端口。如果企业是本地私有部署或使用的是专有企业云，则请定义并新增对应的 PROTOPIE_CLOUD_URL 环境变量到其中，指向并绑定具体的主机私域。请确保最终引用的所有连接或登录行为归属于同一主机实例下。
在配置文件客户端 (如 Cursor / VS Code / Antigravity) 中，通过修改各自的 MCP 配置表单加入此环境变量定义：
{ "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 对应云端内的配置对象，所以在安装初始前需执行一次鉴权验证流程。
请唤起并命令所用的 AI 开发平台执行 auth_login。随后，系统会直接唤起一个专门执行授权协议重定向流程的云身份识别页。
完成后，关联对应的身份秘钥并存执在系统自带的安全保险箱内（如 macOS 的 钥匙串访问工具、Windows 的 凭据管理器 或 Linux 下面的 libsecret 包），且该密钥在运行中会被隔离并限制在对应的私域部署或公域端点范围下。
在任意时间均可通过 auth_status 这一工具向模型提问（比如输入 “check my ProtoPie auth status” ）来重新评估当前的状态。
系统单次会话过程只能承载单个登录账户。如果在此期间再次录入一套全新账户授权，会将先前的登录配置予以解除或覆盖；并且清除登录也会卸除其云连接控制。您的代理设备仅仅可以用来接触此登录账户在所属架构范围有下载或查阅凭据限制的产品。
首先，在 ProtoPie 云端平台点击打开该模块的 Dev View（开发视图） 面板。 导向左端 MCP 选项卡并以此划定您的交互（整幅图层、页面分支和特定自定义组件元素。随后点选 Copy link 锁定。复制好的链接能够将指向的开发版本内容精确保存并映射过去。
在会话面板上直接将该地址粘贴交付到工作台并发送，如输入 “用 React 框架把当前的整个框架交互流程转化出来”。
AI 会基于服务器传来的内容自动调取并直接编译。这一交互过程并不需要且不会在您的真实系统浏览器中再次触发访问该链接的动作。
尽量挑选粒度较小的图层进行处理，并采取逐层过渡演化模式提问——从一个特定的子区块或元素中调用的地址其解析并输出代码的速度和可靠性往往大于直接提取和发送整张整包的原型数据。
由于通过从 Dev View 生成的各个分享节点内部会自带快照戳用于指代当前时刻版本的状态。为调取更高细节配置内容，在日常的迭代维护修改完成交付阶段前。请直接重抄最新的快照生成链接。
请在您的项目中保证拥有更加清晰整洁的自定义命名（比如 cta-button 在解析生成阶段的渲染体验肯定要明显优于系统生成的通用占位名称如 Rectangle 41）。
有时，由 Figma 等设计资产导入的一些文案元素在云端呈现中可能被封装为图像——若生成后发现导出的文字无法辨识和调用，请注意二次检查确认该目标元素图层在其本身的软件中是否实际上属于图像输出格式层。
Code MCP 的操作和处理覆盖机制只支持当前您拥有 下载 (download) 资质或权限的原型作品。
对应的产品拥有人（所有者） 必须为 专业版 (Pro) 或 企业版 (Enterprise) 账户，并且保证在该 Pie 文件下的下载功能已被启用。同时，对于您来说，您需要自身是该原型项目的所有者、项目所属团队的成员、或者受邀在具备 “允许查看并下载” 访问控制许可的作用范围内。
如果对于某一原型并不支持下载授权， Dev View 界面处的 MCP 通信功能栏部分会显式抛出提示禁用该入口（例如报错消息提示：“MCP links require Pro or Enterprise plan and Download Access. Ask the Pie owner.” ）。
Code MCP 原理中仅能与被同步发布的云端交互，且在处理过程中无法支持读取和调用保留在物理机硬盘设备中的本机 .pie 格式原型归档。它只能在特定的云网关鉴权机制下以被赋予的鉴权级别开展活动。
在当下的公开测试（Beta）阶段，Dev View 与 Code MCP 功能处于开放阶段，任何属于登录状态并拥有可下载凭证资格的用户均能正常运行并对其下载或解包。
Code MCP 在使用过程中，有可能会输出并发送包含有匿名的常规使用统计信息（Telemetry）——这其中绝不包含任何涉及您自行构建的代码和产品资产隐私数据，只关注如操作执行频率这类的基本数据。它收集如：哪类扩展运行被唤起、运行成功与否或故障中断次数、接口消耗响应毫秒级别分布、在不侵扰项目前提下提供通过单向高强度哈希转换生成的 Pie ID 识别代号、随机设备识别签名，以及对应云平台中的当前用户身份 ID 信息，且决不触及图层文字串，用户专属名、页面具体 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 可以引导和调整对应数据的投递地区。其目前默认传输目的地为美洲区节点，更改后将被调整送至欧洲区网段。
出现报错：“Authentication required” → 执行一次 auth_login 工具来激活身份鉴定环节，完成并通过后，通过执行 auth_status 查看校验即可。
交互命令或工具未成功浮现 / 找不到对应的 MCP 功能 → 建议在完成所有包的导入任务后彻底重新载入您的 AI 助手状态（若是 Claude Desktop 应用并启用了 Code 功能，应通过系统底层的彻底退出运行机制而后重开）。请二次验证安装环境下的 Node.js 基座版本处于版本 20 或更高的周期版本之上。
spilled: true 伴随显示特定的文件路径 → 表示当前的请求解析产物及对应的层级深度较庞大，已被溢出安全保留到了临时的磁盘文件中，AI 助手已从给定的该物理临时地址指向加载了内容。在超大规模的原型图页处理流中属于合理的日常现象。
此项机制会把我原版的 Pie 文件给覆盖或篡改吗？ → 完全不会，服务对您设计资产的存取动作遵循只读权限（Read-only）。
了解更多关于 开发人员视图（Dev View） 的信息