MCP 서버

Podo UI MCP 서버를 사용하면 AI 코딩 도구가 컴포넌트, 스타일 시스템, 사용 예제를 직접 조회할 수 있습니다.

설정

AI 코딩 도구에 Podo UI MCP 서버를 등록하세요. 경로는 실제 podo-ui 설치 경로로 변경해야 합니다.

claude mcp add podo-ui -- node /path/to/podo-ui/mcp/dist/index.js

.cursor/mcp.json

{
  "mcpServers": {
    "podo-ui": {
      "command": "node",
      "args": ["/path/to/podo-ui/mcp/dist/index.js"]
    }
  }
}

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "podo-ui": {
      "command": "node",
      "args": ["/path/to/podo-ui/mcp/dist/index.js"]
    }
  }
}

빌드 필요 MCP 서버를 사용하기 전에 mcp 폴더에서 npm run build를 실행하여 dist/index.js를 생성해야 합니다.

MCP 서버가 AI 도구에 제공하는 6가지 도구입니다.

get_overview

Podo UI 전체 개요를 조회합니다. 버전, 컴포넌트 목록, 설치 방법, 테마, 기술 스택 정보를 반환합니다.

search_component

이름이나 키워드로 컴포넌트를 검색합니다. 이름, 카테고리, 설명이 포함된 결과를 반환합니다.

get_component

특정 컴포넌트의 상세 정보를 조회합니다. Props, CSS 클래스, 사용 예제, 관련 컴포넌트를 반환합니다.

get_system

SCSS 시스템의 상세 정보를 조회합니다. 컬러 토큰, 간격 스케일, 타이포그래피, 그리드, 아이콘, 버튼 스타일을 지원합니다.

search_css_class

CSS 클래스 이름으로 검색하여 해당 클래스를 정의하는 컴포넌트나 시스템을 찾습니다.

get_example

키워드로 사용 예제를 검색합니다. React, Svelte, SCSS, HTML 프레임워크별로 필터링할 수 있습니다.

MCP 서버가 연결된 AI 도구에서 자연어로 Podo UI 정보를 질문할 수 있습니다.

프롬프트

Podo UI Input 컴포넌트의 Props와 사용법을 알려줘

프롬프트

Podo UI에서 폼 유효성 검사 예제를 보여줘

프롬프트

Podo UI 컬러 시스템의 primary 토큰 목록을 알려줘