사용 가이드

MCP로 Pixso를 AI 에이전트에 연결하기

Pixso MCP는 호환되는 AI 에이전트를 디자인 파일, 레이어 구조와 디자인 도구에 연결합니다. 클라우드 접근에는 Remote MCP를, 데스크톱에서 열어 둔 파일과 현재 선택 영역을 사용하려면 Local MCP를 선택합니다.

Remote MCP로 연결하기

Streamable HTTP를 지원하는 에이전트에서 서버 URL로 https://pixso.net/mcp를 추가합니다.
대상 파일에 접근할 수 있는 Pixso 계정으로 OAuth 인증을 완료합니다.
Pixso에서 대상 레이어나 프레임의 링크를 복사하여 요청에 포함합니다.

Remote MCP는 Pixso 데스크톱 앱을 계속 열어 둘 필요가 없습니다. 프라이빗 배포 사용자는 해당 환경의 서비스 주소를 사용하며, 담당자와 기능 활성화를 협의합니다.

Local MCP로 연결하기

Pixso 데스크톱 2.2.0 이상을 설치하고 로그인합니다.
대상 디자인 파일을 열고 왼쪽 위의 설정 진입점에서 MCP를 활성화합니다.
클라이언트에 표시된 서비스 주소를 에이전트의 Streamable HTTP 설정에 복사합니다.
Pixso를 열어 두고 대상 파일 탭을 활성 상태로 유지합니다. 현재 선택 영역을 사용하는 요청이라면 대상 레이어를 선택합니다.

일반적인 로컬 주소는 http://127.0.0.1:3667/mcp이지만 실제 포트는 다를 수 있습니다. 클라이언트에 표시된 주소를 사용합니다.

접근 권한과 전체 설정

MCP는 인증한 계정의 파일 권한을 따릅니다. 쓰기 작업에는 편집 권한이 필요하며, 개별 도구에 적절한 라이선스 유형이 요구될 수도 있습니다. 전체 연결 방법과 도구 설명은 영문 MCP 개발자 문서에서 확인할 수 있습니다.

아래는 로컬 IDE의 연결 설정과 디자인 선택 방법입니다. 코드와 스크린샷의 localhost:3667은 예시입니다. 실제 연결에는 Pixso에 표시된 현재 서비스 주소를 사용합니다. 코드 생성을 요청할 때는 사용하는 도구의 권한을 확인합니다. D2C⁺에는 기업 라이선스와 파일 공간 조건이 적용됩니다.

로컬 MCP 사용 방법

1단계: 로컬 MCP 활성화

Pixso 데스크톱 앱을 설치하고 로그인합니다. (데스크톱 앱 버전은 2.2.0 이상이어야 합니다)
Pixso 데스크톱 앱에서 새 디자인 파일을 생성하거나 기존 파일을 엽니다.
디자인 파일의 좌측 상단 [파일] 메뉴에서 Pixso MCP를 찾아 활성화합니다.

Pixso의 1단계: 로컬 MCP 활성화 화면

Pixso MCP가 성공적으로 활성화되면, 현재 캔버스 하단에 “Pixso MCP가 성공적으로 활성화되었습니다”라는 알림이 표시됩니다.

Pixso MCP 서버의 로컬 주소는 다음과 같습니다: http://localhost:3667/mcp

2단계: MCP 클라이언트에 로컬 MCP 연결

Pixso MCP 서버가 성공적으로 실행된 후, MCP 클라이언트 내에서 설정을 완료하면 서버와 연결할 수 있습니다.

Pixso MCP가 지원하는 데스크톱 앱 및 설정 방법은 다음과 같습니다:

Cursor

Cursor → Settings(설정) → MCP & Integrations로 이동
MCP & Integrations 페이지에서 MCP Tools 항목을 찾아 New MCP Server(새 MCP 서버)를 클릭
아래 설정을 mcp.json 파일에 복사하여 붙여넣고 저장

{
  "mcpServers": {
    "Pixso MCP": {
      "url": "http://localhost:3667/mcp",
      "headers":{}
    }    
  }
}

저장 후 MCP & Integrations 페이지로 돌아가 Pixso MCP를 실행(Start)합니다. ‘loading tools’ 메시지 후 도구가 정상적으로 로드되면, Pixso MCP 서버와의 연결이 성공적으로 완료된 것입니다.

VS Code

VS Code를 열고 → 대화창(Ctrl + Alt + I)을 실행 → 입력창에서 Configure Tools를 선택하여 엽니다.
Configure Tools 페이지에서 Add MCP Server → HTTP를 선택합니다. (처음 사용하는 경우, 임의의 내용을 입력하여 mcp.json을 생성)
아래 설정을 mcp.json 파일에 복사하여 붙여넣고 저장

{
    "servers": {
        "pixso": {
            "url": "http://localhost:3667/mcp",
            "type": "http"
        }
    },
    "inputs": []
}

Pixso의 VS Code 화면

저장 후 입력창에 MCP 서버 관련 설정이 표시됩니다.
Settings(설정) → Start Server를 선택하여 실행 중인 Pixso MCP 서비스에 연결합니다. 콘솔에 Connection state: Running이 출력되면 연결이 성공적으로 완료된 것입니다.

MCP와 Streamable HTTP를 지원하는 VS Code 버전을 사용합니다.

Windsurf

Windsurf를 열고 로그인 → Settings → Windsurf Settings로 이동
General 페이지에서 MCP Servers 항목을 찾아 Manage MCPs를 클릭
MCP 설정 패널에서 View raw config를 클릭하여 mcp_config.json을 열고, 아래 설정을 복사하여 붙여넣고 저장

{
    "mcpServers": {
      "pixso": {
        "serverUrl": "http://localhost:3667/mcp"
      }
    }
  }

클라이언트마다 설정 형식이 다를 수 있습니다. 위 구성은 Windsurf의 예시입니다.

Pixso의 Windsurf 화면

4. 저장 후 Manage MCPs 페이지로 돌아가 Refresh(새로고침)을 클릭합니다. 설정 내용이 정상적으로 로드되면 구성 완료입니다.

Pixso의 Windsurf 화면

Claude Code

터미널에서 아래 명령어를 실행하여 설정할 수 있습니다:

claude mcp add --transport http pixso-desktop http://127.0.0.1:3667/mcp

3단계: MCP 클라이언트에서 대화하기

MCP 클라이언트가 Pixso MCP 서버와 성공적으로 연결되면, 데스크톱 앱 내에서 바로 사용할 수 있습니다.

Pixso MCP는 두 가지 방식으로 Pixso 디자인 데이터를 불러올 수 있습니다.

링크 복사

Pixso 데스크톱 앱에서 디자인 파일을 엽니다.
디자인 파일에서 프레임을 선택하고, 컨테이너 링크를 복사합니다.
클라이언트 IDE(예: Cursor)에서 대화 모드를 열고, 링크를 붙여넣은 후 명령을 입력합니다. 예: “HTML 코드 생성”

Pixso의 링크 복사 화면

컨테이너 선택

Pixso 데스크톱 앱에서 디자인 파일을 엽니다.
캔버스 내에서 단일 컨테이너 레이어를 선택합니다.
MCP 클라이언트 IDE(예: Cursor)에서 대화 모드를 열고 명령을 입력합니다. 예: “선택한 컨테이너의 HTML 코드 생성”

Pixso의 컨테이너 선택 화면

주의사항:

로컬 MCP를 이용하는 동안 Pixso 데스크톱 앱을 실행 상태로 유지하세요. 대상 컨테이너가 포함된 디자인 파일을 열고 해당 탭을 활성 상태로 두어야 합니다.
MCP를 지원하고 코드 생성 작업에 적합한 대규모 언어 모델(LLM)을 사용하세요.

MCP 구성 상세 정보 및 튜토리얼은 아래 개발자 문서를 참고하시기 바랍니다.

https://pixso.net/developer/en/mcp/introduction.html