Code MCP Installation & Setup

Available with MCP Enterprise.

Setup involves three steps: install the MCP server, install the skill, and sign in once (Step 2). You can choose between two setup methods.

Before you start — your ProtoPie Cloud host

Code MCP connects to your company's ProtoPie Cloud, not the public cloud.protopie.io — sign-in there will be denied. You'll need your host, e.g. https://<company>.protopie.cloud (dedicated cloud) or https://protopie.<company>.com (on-premise).

With Method A, your agent asks for it during setup — reply with the host or paste a Pie link. Not sure yet? Skip it and set it later (see Troubleshooting).

Method A — Allow your AI agent to install it (easiest, no terminal)

Paste this one prompt into any MCP-capable agent. In Claude Desktop, use the </> Code tab, not Chat. It adds the protopie-code-mcp server and installs the skill; then go to Step 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>

If your agent can’t finish a step (e.g. it can’t edit a config file), use Method B below.

Method B — Install Code MCP yourself

Find your agent, run its commands (or paste its config), then sign in (Step 2). Server definition is the same everywhere: command: npx,args: ["-y", "@protopie.io/code-mcp@latest"],key: protopie-code-mcp

• Where to run

  • Claude Code / Codex → terminal

  • Claude Desktop → the </> Code tab (not Chat)

  • Cursor / VS Code / Antigravity → paste the JSON into the config file, then run the install-skill command in a terminal

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 — add to ~/.cursor/mcp.json (global) or .cursor/mcp.json (project), then install the skill:

{ "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 (needs GitHub Copilot enabled) — ⌘⇧P → MCP: Open User Configuration, add, then Start; then install the skill:

{ "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 — add to ~/.gemini/config/mcp_config.json (or .agents/mcp_config.json for one project), then install the skill:

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"

On-premise / dedicated cloud

By default Code MCP connects to https://cloud.protopie.io. For an on-prem or dedicated enterprise cloud, add a PROTOPIE_CLOUD_URL environment variable pointing to your instance — the link you paste and your sign-in must belong to that same host.

• Config-based clients (Cursor / VS Code / Antigravity) — add to the server config:

{ "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 — add -e PROTOPIE_CLOUD_URL=https://<your-host> when registering.

Step 2 — Sign in (once)

Applies to both methods. Code MCP reads ProtoPie Cloud data, so it needs one sign-in only.

• Ask your agent to call the auth_login tool. A browser window opens to complete the ProtoPie Cloud OAuth flow.

• Tokens are stored in your OS keychain (macOS Keychain, Windows Credential Manager, or Linux libsecret), scoped to your Cloud host.

• Check anytime with the auth_status tool (“check my ProtoPie auth status”).

• One account at a time; a new sign-in overwrites the old one, and signing out clears it. The agent can only reach Pies your account can download.

Quickstart: from Dev View to Code

1. In ProtoPie Cloud, open your Pie's Dev View, go to the MCP tab, select an element (whole Pie, a scene, a component, or a layer), and press Copy link.

2. Paste the link into your agent and prompt it — e.g. “Implement this element and its interactions in React (or your stack).”

3. The agent reads exactly that selection from the server and writes matching code. It never opens the URL in a browser.

Tips for best code output

• Select small and implement in passes — scene- or element-scoped links are faster and more reliable than whole-Pie prompts.

• Re-copy from Dev View to target the latest version (links pin a revision).

• Name your layers; generated code mirrors them (cta-button beats Rectangle 41).

• Figma-imported text sometimes arrives as images — if text looks wrong, check whether the layer is actually an image.

Access and permissions

Code MCP works only when:

• The Pie is saved in an Enterprise organization team space.

• You’re a Viewer or Editor in the same organization.

• The Pie has download access enabled.

• The Pie link is not password-protected.

Download access can come from team/project permissions or “can view & download” sharing. Anonymous access is not supported.

If any of these access requirements aren’t met, Dev View won’t show the MCP link and will display the following message: “MCP link unavailable. Ask the Pie owner to give you organization access and Pie download permission.”

Telemetry & privacy

Code MCP can send anonymous usage telemetry — event counts only, never your prototype content. It records things like which tool ran, success/failure, duration, coarse size buckets, a one-way hashed pie id, a random device id, and your Cloud account id. It never sends layer text, names, pie URLs, or .pie content.

Turn it off by setting PROTOPIE_MCP_AMPLITUDE_KEY to an empty string on the server:

• Config-based clients (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: add -e PROTOPIE_MCP_AMPLITUDE_KEY= when registering.

• Optional: PROTOPIE_MCP_AMPLITUDE_SERVER_ZONE=EU routes telemetry to the EU region (US is default).

Troubleshooting

• I'm on the Enterprise plan, but sign-in is denied → you're likely signing in to the public cloud.protopie.io instead of your company's host. Give your agent your ProtoPie Cloud host (or a Pie link) so it can update

  PROTOPIE_CLOUD_URL, then restart your agent session and sign in again. Still denied on the right host? Check with your organization service admin.

• “Authentication required” → run the auth_login tool, then check auth_status.

• Tools not appearing → restart your agent session after installing (in the Claude Desktop Code tab, fully quit and reopen). Confirm Node 20+.

• spilled: true with a file path → the result was large and saved to disk; your agent reads it from there. Normal for big scenes.

• Can Code MCP edit my Pie? → No, it’s read-only.

Learn more about Dev View.