Studio MCP 安装与设置

适用于 MCP Core。

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

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

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

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

🔢 关于端口 — 默认端口为 9982，但如果该端口已被占用，则会自动分配另一个端口。请务必复制“实验室”中显示的实际命令/URL。

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

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

2-1. Claude Desktop (聊天) — 一键连接 (推荐，最简单)

一键连接 — 无需代码或配置文件。

1. 在 Studio 中，开启偏好设置 → 实验室 → MCP 服务端。

2. 在同一屏幕上，点击在 Claude Desktop 中打开。

3. Claude Desktop 会自动显示安装 ProtoPie Studio MCP 扩展程序 (.mcpb) 的提示。请进行安装。

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

   
   

   

4. 直接在 Claude Desktop 聊天中使用它。首次使用时，在 Studio 中批准允许对话框。

   
   

   

⚠️ Claude Desktop 的聊天模式和代码标签页保持独立的 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。首次使用时批准允许。

2-2. Claude Code (终端命令行，或 Claude Desktop 中的代码标签页)

使用相同的命令，从终端或从 Claude Desktop 的代码标签页（内置 Claude 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 显示允许/拒绝对话框时，点击允许。

   
   

   

4. 当 protopie-studio-mcp 在工具列表中显示为已连接时，即表示设置完成。

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 中批准允许。

2-5. VS Code (智能体模式)

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

2. 输入 http://127.0.0.1:9982/mcp 作为 URL，输入 protopie-studio-mcp 作为服务端 ID，然后选择作用域。这会在 mcp.json 中保存一个包含 type: "http" 和 url 的 servers 条目。

3. 启动服务端，在智能体模式中找到这些工具，并在首次使用时批准允许。

ℹ️ VS Code 说明 — MCP / 智能体模式需要您的账户启用了 GitHub Copilot。

ℹ️ 其他 MCP 客户端 — 复制并粘贴“实验室”中 *“其他 MCP 客户端”* 项下的 JSON：

步骤 3 — 批准连接 (允许 / 拒绝)

• 客户端首次连接时，Studio 会显示允许/拒绝对话框。点击允许即可连接。

• 在您批准之前，连接会暂时被拒绝 — 只需在客户端重新连接（重试）即可。

步骤 4 — 使用 Studio MCP

Studio MCP 会对在 Studio 中打开并处于焦点状态的原型执行操作 — 无需粘贴链接。打开一个 .pie 文件，向 AI 提出如下问题：

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

• “给这个按钮添加一个‘轻触’触发器。”

• “制作一个轻触卡片可以翻转的屏幕。”

• “截取当前屏幕的预览。”

更新 Studio MCP 后重新连接

更新 ProtoPie Studio 版本后，您可能需要移除并重新连接现有的 MCP 服务端，以便您的 AI 客户端使用最新的连接和扩展程序信息。更新后实际端口可能会发生变化，因此在重新连接之前，请务必在偏好设置 → 实验室中检查当前地址。

Claude Desktop (聊天)

如果 ProtoPie Studio MCP 扩展程序 (.mcpb) 需要更新，请从当前 ProtoPie Studio 应用内置的版本重新安装它。

1. 在 Claude Desktop 中，移除现有的 ProtoPie Studio MCP 扩展程序。

2. 在 ProtoPie Studio 中，转到偏好设置 → 实验室。

3. 点击在 Claude Desktop 中打开并重新安装扩展程序。

4. 如果更新后的工具没有立即出现，请重启 Claude Desktop。

5. 重新连接后首次使用时，在 Studio 中批准允许对话框。

Studio 更新不会自动更新已安装的 Claude Desktop 扩展程序。

Claude Code

移除现有的服务端，然后使用“实验室”中显示的当前 URL 重新添加它。如果您最初是为特定项目注册了该服务端，请从该项目文件夹运行这些命令。

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

claude mcp remove protopie-studio-mcp
claude mcp add --transport

如果您之前使用了 --scope user 或其他作用域，请在移除和重新添加服务端时使用相同的作用域。

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

claude mcp remove --scope user protopie-studio-mcp
claude mcp add --scope user --transport

重新连接后，重启 Claude Code 或重新加载 MCP 连接，然后在 Studio 提示时批准允许对话框。

Codex

移除现有的服务端，然后使用“实验室”中显示的当前 URL 重新添加它。

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

codex mcp remove protopie-studio-mcp
codex mcp add protopie-studio-mcp --url

重新连接后，重启 Codex 或启动一个新会话。

其他 MCP 客户端

移除现有的 protopie-studio-mcp 配置，然后使用适用于您客户端的相同设置方法重新添加它。从偏好设置 → 实验室复制最新的 URL 或 JSON，因为实际端口可能不是 9982。

如果您同时使用 Claude Desktop 聊天和 Claude Code，请分别对它们进行重新连接。Claude Desktop 聊天扩展程序和 Claude Code MCP 注册是独立管理的。

故障排除与常见问题解答

• 无法连接。 → 请确保您在 Studio 中批准了允许对话框；在批准之前，连接会暂时被拒绝。即使客户端显示了身份验证 (Authenticate) 按钮，在此处也不适用 — 请改用重新连接（重试）。

• 工具丢失或连接中断。 → 请检查偏好设置 → 实验室下的 MCP 服务端是否已开启，Studio 是否正在运行，以及 .pie 文件是否已打开。如果是在更新 ProtoPie Studio 或 Studio MCP 之后发生这种情况，请遵循上述更新 Studio MCP 后重新连接的步骤。

• 我没有看到 在 Claude Desktop 中打开 按钮。 → 请确认 ProtoPie Studio 版本为 10.3.0 或更高版本（该按钮自 10.3.0 版本起提供）。如果在较旧版本上，请进行更新，或者使用 2-1 中的手动替代方案 (mcp-remote) 或其他客户端。

• 我在 Claude Desktop 中添加了它，但工具没有显示。 → 聊天模式和代码标签页保持独立的 MCP 列表。通过 在 Claude Desktop 中打开 扩展程序 (.mcpb) 添加聊天模式，通过 claude mcp add 命令添加代码标签页。确保您在正在使用的模式中添加了它。

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

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

• 它在一个项目中工作正常，但在另一个项目中不行（Claude Code / 代码标签页）。 → 本地作用域仅在您运行命令的文件夹中注册。使用 -scope user 使其在所有地方都可用。

了解更多关于 Code MCP。