Studio MCP 설치 및 설정

MCP Core에서 사용 가능합니다.

1단계 — Studio에서 MCP 서버 켜기

1. ProtoPie Studio에서 Preferences → Labs로 이동합니다.

2. MCP Server 토글을 켭니다. 서버는 저장이나 앱 재시작 필요 없이 즉시 시작됩니다.

3. 토글 아래에서 서버 상태(status) 및 클라이언트별 연결 상세 정보(per-client connection details)를 확인할 수 있습니다. 각 복사 버튼을 사용하여 정확한 명령어나 설정을 복사하세요.

🔢 포트 정보 — 기본 포트는 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 (터미널 CLI 또는 Claude Desktop의 Code 탭)

터미널이나 Claude Desktop의 코드 탭(Code tab)(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에서 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 모드)

1. Cmd/Ctrl + Shift + P → MCP: Add Server → HTTP를 선택합니다.

2. URL로 http://127.0.0.1:9982/mcp를 입력하고 Server ID로 protopie-studio-mcp를 입력한 다음 범위를 선택합니다. 이렇게 하면 mcp.json의 servers 항목에 type: "http"와 url이 저장됩니다.

3. 서버를 시작하고, Agent 모드에서 도구를 찾은 다음 처음 사용할 때 Allow(허용)를 승인합니다.

ℹ️ VS Code 참고 사항 — MCP / Agent 모드를 사용하려면 계정에 GitHub Copilot이 활성화되어 있어야 합니다.

ℹ️ 기타 MCP 클라이언트 — Labs의 “Other MCP clients” 항목에서 JSON을 복사하여 붙여넣으세요:

3단계 — 연결 승인하기 (Allow / Deny)

• 클라이언트가 처음 연결될 때, Studio에 Allow(허용) / Deny(거부) 대화상자가 표시됩니다. 연결하려면 Allow(허용)를 클릭하세요.

• 승인하기 전에는 연결이 일시적으로 거부되므로, 클라이언트에서 다시 연결(재시도)을 실행하면 됩니다.

4단계 — Studio MCP 사용하기

Studio MCP는 Studio에서 열려 있고 포커스된 프로토타입을 대상으로 작동하므로 별도의 링크를 붙여넣을 필요가 없습니다. .pie 파일이 열린 상태에서 AI에게 다음과 같이 요청해 보세요:

• “현재 프로토타입의 인터랙션을 분석해 줘.”

• “이 버튼에 Tap 트리거를 추가해 줘.”

• “탭하면 카드가 뒤집히는 화면을 만들어 줘.”

• “현재 화면의 미리보기를 캡처해 줘.”

Studio MCP 업데이트 후 재연결하기

ProtoPie Studio 버전을 업데이트한 후에는 AI 클라이언트가 최신 연결 및 확장 프로그램 정보를 사용하도록 기존 MCP 서버를 제거하고 다시 연결해야 할 수 있습니다. 업데이트 후에는 정확한 포트가 변경될 수 있으므로 다시 연결하기 전에 항상 Preferences → Labs에서 현재 주소를 확인하세요.

Claude Desktop (Chat)

ProtoPie Studio MCP 확장 프로그램(.mcpb)을 업데이트해야 하는 경우, 현재 ProtoPie Studio 앱에 포함된 버전에서 다시 설치하세요.

1. Claude Desktop에서 기존 ProtoPie Studio MCP 확장 프로그램을 제거합니다.

2. ProtoPie Studio에서 Preferences → Labs로 이동합니다.

3. Open in Claude Desktop을 클릭하고 확장 프로그램을 다시 설치합니다.

4. 업데이트된 도구가 바로 나타나지 않으면 Claude Desktop을 다시 시작하세요.

5. 재연결 후 처음 사용할 때 Studio에서 Allow(허용) 대화상자를 승인합니다.

Studio 업데이트 시 이미 설치된 Claude Desktop 확장 프로그램이 자동으로 업데이트되지는 않습니다.

Claude Code

기존 서버를 제거한 다음, Labs에 표시된 현재 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에서 Allow(허용) 대화상자를 승인합니다.

Codex

기존 서버를 제거한 다음, Labs에 표시된 현재 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 설정을 제거한 다음, 해당 클라이언트의 설정 방법에 따라 다시 추가합니다. 실제 포트가 9982가 아닐 수 있으므로 Preferences → Labs에서 최신 URL 또는 JSON을 복사하세요.

Claude Desktop Chat과 Claude Code를 모두 사용하는 경우 각각 별도로 다시 연결해야 합니다. Claude Desktop Chat 확장 프로그램과 Claude Code MCP 등록은 독립적으로 관리됩니다.

문제 해결 및 자주 묻는 질문(FAQ)

• 연결이 되지 않습니다. → Studio에서 Allow(허용) 대화상자를 승인했는지 확인하세요. 승인 전에는 연결이 일시적으로 거부됩니다. 클라이언트에 Authenticate(인증) 버튼이 표시되더라도 여기에는 적용되지 않으므로, 대신 Reconnect(재시도)를 사용하세요.

• 도구가 누락되었거나 연결이 끊어집니다. → Preferences → Labs에서 MCP Server가 켜져 있는지, Studio가 실행 중인지, 그리고 .pie 파일이 열려 있는지 확인하세요. ProtoPie Studio 또는 Studio MCP를 업데이트한 후 이 문제가 발생했다면 위의 Studio MCP 업데이트 후 재연결하기를 따르세요.

• Open in Claude Desktop 버튼이 보이지 않습니다. → ProtoPie Studio 버전이 10.3.0 이상인지 확인하세요 (해당 버튼은 10.3.0부터 지원됩니다). 이전 버전인 경우 업데이트를 진행하거나 2-1의 수동 대안(mcp-remote) 또는 다른 클라이언트를 사용하세요.

• Claude Desktop에 추가했는데 도구가 표시되지 않습니다. → 채팅 모드와 코드 탭은 별도의 MCP 목록을 유지합니다. 채팅 모드는 Open in Claude Desktop 확장 프로그램(.mcpb)을 통해 추가하고, 코드 탭은 claude mcp add 명령어를 통해 추가해야 합니다. 현재 사용 중인 모드에 맞게 추가했는지 확인하세요.

• Claude Desktop(Chat)에 설치된 확장 프로그램(.mcpb)은 어떻게 확인하나요? → Claude Desktop에서 Cmd + ,를 눌러 설정을 열고, Extensions를 클릭하면 설치된 .mcpb 확장 프로그램 목록을 확인할 수 있습니다.

• 포트/주소가 일치하지 않습니다. → 포트가 항상 9982인 것은 아닙니다. Labs에 표시된 실제 명령어/URL을 복사하세요. “포트를 사용할 수 없음” 메시지가 표시되면 해당 포트를 선점하고 있는 앱을 종료하고 Studio를 다시 시작하세요.

• 특정 프로젝트에서는 작동하지만 다른 프로젝트에서는 작동하지 않습니다 (Claude Code / 코드 탭). → 로컬 범위는 명령어를 실행한 폴더에만 등록됩니다. 모든 환경에서 사용할 수 있도록 -scope user를 사용하세요.

Code MCP에 대해 자세히 알아보세요.