Studio MCP 安装与设置

步骤 1 — 在 Studio 中开启 MCP 服务器

1. 在 ProtoPie Studio 中，打开 Preferences（偏好设置）→ Labs（实验室）。

2. 开启 MCP Server 开关。服务器将立即启动 — 无需保存或重启应用。

3. 在开关下方，您将看到服务器的状态和单客户端连接详情。使用每个复制按钮来获取精确的命令或配置。

🔢 关于端口 — 默认端口是 9982，但如果它已被占用，系统会自动分配另一个端口。请始终复制 Labs 页面中显示的实际命令/URL。

步骤 2 — 从您的 AI 客户端进行连接

选择与您的设置相匹配的客户端。如果您觉得代码和终端很麻烦，2-1（Claude Desktop 一键连接）是最简单的选择。 选项 2-2 到 2-5 都会连接到相同的地址：http://127.0.0.1:<PORT>/mcp，其中 <PORT> 是 Labs 中显示的实际端口（默认为 9982）。

2-1. Claude Desktop (Chat) — 一键连接（推荐，最简单）

只需单击一个按钮即可连接 — 无需代码或配置文件。

1. 在 Studio 中，开启 Preferences → Labs → MCP Server。

2. 在同一屏幕上，单击 Open in Claude Desktop。

3. Claude Desktop 会自动显示安装 ProtoPie Studio MCP 扩展程序 (.mcpb) 的提示。安装它。（此操作只需执行一次。）

   1. 该扩展程序会自动检测并连接到当前 Studio 端口 — 无需额外设置。

   
   

   

4. 立即在 Claude Desktop 聊天（chat）中使用它。首次使用时，请在 Studio 中批准允许 (Allow) 对话框。

   
   

   

⚠️ Claude Desktop 的聊天模式 (Chat mode)和代码选项卡 (Code tab)保留独立的 MCP 列表。这个一键扩展程序适用于聊天模式；对于代码选项卡，请遵循 2-2 步骤。

• 手动备选方案（当按钮不可用时）

  聊天模式下的 claude_desktop_config.json 仅支持 stdio，因此 HTTP 服务器会通过 mcp-remote 桥接器进行连接（需要 Node.js / npx）。

  1. 通过 Settings（设置）→ Developer（开发者）→ Edit Config（编辑配置）打开 claude_desktop_config.json：

     • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

     • Windows: %APPDATA%\Claude\claude_desktop_config.json

  2. 将其添加到 mcpServers 下方：

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

     {
       "mcpServers": {
         "protopie-studio-mcp": {
           "command": "npx",
           "args": ["mcp-remote", "http://127.0.0.1:9982/mcp", "--transport", "http-only"]
         }
       }
     }

  3. 保存，然后完全退出并重启 Claude Desktop。并在首次使用时批准允许 (Allow)。

2-2. Claude Code（终端命令行，或 Claude Desktop 中的 Code 选项卡）

使用相同的命令，从终端或 Claude Desktop 的 Code 选项卡（内置 Claude Code）进行连接。

🗂️ 在 Code 选项卡中进行创作 — Code 选项卡会要求您首先选择一个工作目录（文件夹）。该文件夹将成为您的工作区，并且 MCP 服务器将注册到该文件夹（局部范围）。如果您切换文件夹，服务器可能不会显示在其中 — 请使用下方介绍的 --scope user 命令使其在所有地方都可用。

1. 进入您的项目文件夹（工作目录），然后运行：

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   claude mcp add --transport

   这仅针对当前项目（局部范围）进行注册。要在所有项目中通用，请添加 --scope user：

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

   claude mcp add --scope user --transport

2. 重新加载 Claude Code，运行 /mcp，然后选择 protopie-studio-mcp。

3. 当 Studio 显示允许/拒绝 (Allow / Deny)对话框时，单击允许 (Allow)。

   
   

   

4. 当 protopie-studio-mcp 在工具列表中显示为已连接 (connected)时，即大功告成。

2-3. Codex

在终端运行该命令，或将 JSON 粘贴到您的配置中：

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

codex mcp add protopie-studio-mcp --url

2-4. Cursor

1. 前往 Settings → MCP → + Add new MCP server（或直接编辑您项目的 .cursor/mcp.json 文件）。

2. 添加以下 JSON：

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

   {
     "mcpServers": {
       "protopie-studio-mcp": {
         "url": "http://127.0.0.1:9982/mcp"
       }
     }
   }

3. 保存 → 连接 → 首次使用时在 Studio 中确认允许 (Allow)。

2-5. VS Code (探针模式/Agent mode)

1. 按下 Cmd/Ctrl + Shift + P → MCP: Add Server → 选择 HTTP。

2. 输入 http://127.0.0.1:9982/mcp 作为 URL，并输入 protopie-studio-mcp 作为服务器 ID (Server ID)，然后选择作用范围。这会在 mcp.json 文件的 servers 节点下保存一个包含 type: "http" 和 url 的条目。

3. 启动服务器，在探针模式 (Agent mode)中找到这些工具，并在首次使用时批准允许 (Allow)。

ℹ️ VS Code 提示 — MCP / 探针模式需要您的账户启用 GitHub Copilot。

ℹ️ 其他 MCP 客户端 — 复制并粘贴 Studio 页面 Labs 列表中 "Other MCP clients" 项下的 JSON：{ "mcpServers": { "protopie-studio-mcp": { "url": "http://127.0.0.1:9982/mcp" } } }

步骤 3 — 批准连接（允许/拒绝）

• 客户端首次尝试连接时，Studio 将显示允许/拒绝 (Allow / Deny) 对话框。单击允许 (Allow)即可连接。

• 在您准许之前，连接请求会被暂时拒绝 — 届时只需从客户端选择重新连接（重试）即可。

步骤 4 — 使用 Studio MCP

Studio MCP 作用于您在 Studio 中打开并聚焦的当前原型 — 无需粘贴任何链接。在打开 .pie 文件的状态下，向 AI 咨询类似以下的问题：

• “分析当前原型中的交互。”

• “为这个按钮添加一个点击（Tap）触发器。”

• “制作一个卡片翻转的点击跳转页面。”

• “截取当前页面的预览图。”

常见问题

• 无法连接。 → 请确保您在 Studio 中批准了允许 (Allow)对话框。在确认允许前，连接请求将暂时被拒。即使客户端显示 Authenticate（身份验证）按钮，在本场景中也并不适用 — 请使用重新连接（重试）代替。

• 工具丢失或连接中断。 → 请检查 Preferences → Labs 下的 MCP Server 是否为开启状态、Studio 是否正在运行且打开了 .pie 文件。如果问题仍未解决，请重启 Studio 和客户端。在 Claude Code 中，使用 claude mcp list 检查注册情况，使用 claude mcp get protopie-studio-mcp 获取详细信息；如有需要，可以先运行 claude mcp remove protopie-studio-mcp 然后重新添加。

• 我没有看到 Open in Claude Desktop 按钮。 → 请确认您的 ProtoPie Studio 为 10.3.0 或更高版本（该按钮自 10.3.0 版本起提供）。如果是旧版本，请升级，或者采用 2-1 中介绍的手动备选方案 (mcp-remote) 或其他客户端。

• 我已在 Claude Desktop 中添加，但未显示相关工具。 → 聊天模式和 Code 选项卡维护着单独的 MCP 列表。请通过 Open in Claude Desktop 扩展包 (.mcpb) 为聊天模式添加，通过 claude mcp add 命令为 Code 选项卡添加。确保您在当前使用的模式中添加了该服务。

• 如何查看 Claude Desktop (Chat) 中安装了哪些扩展程序 (.mcpb)？ → 在 Claude Desktop 中，按 Cmd + , 打开首选项，然后点击 Extensions，即可查看已安装的 .mcpb 扩展列表。

• 端口/地址不匹配。 → 端口并不总是 9982 — 请复制 Labs 页面中显示的实际命令/URL。如果看到“端口不可用”的消息，请退出占用该端口的应用，然后重启 Studio。

• 它在一个项目中工作正常，但在另一个项目中不起作用（Claude Code / Code 选项卡）。 → 本地范围（local scope）仅在您运行命令的文件夹下注册。请使用 -scope user 使其在全局范围内通用。

了解更多关于 Code MCP