MCP 서버

MCP 서버 (MCP Server)

AI 에이전트와 Chakra UI 사이의 간극을 메워 주는 서버예요. Chakra UI MCP 서버는 Model Context Protocol을 구현한 전용 서버로, AI 어시스턴트(Claude Code, Cursor, Copilot 등)가 Chakra UI 컴포넌트 라이브러리, 디자인 토큰, 마이그레이션 가이드에 접근할 수 있게 해 줍니다.

출처: 문서

본문

Chakra UI MCP 서버는 AI 에이전트에게 다음 도구들을 노출해요.

도구 (Tools)

컴포넌트 도구 (Component Tools)

• list_components: 사용 가능한 모든 컴포넌트의 전체 목록을 가져옵니다
• get_component_props: 어떤 컴포넌트든 상세한 props, 타입, 설정 옵션을 가져옵니다
• get_component_example: 코드 예시와 사용 패턴을 검색합니다

Chakra UI Pro 도구

이 도구들은 AI 에이전트가 Chakra UI Pro에서 잘 설계되고, 완전히 반응형이며, 접근 가능한 컴포넌트 템플릿에 접근할 수 있게 해 줘요.

• list_component_templates: Chakra UI Pro에서 사용 가능한 컴포넌트 템플릿 목록을 가져옵니다
• get_component_templates: Chakra UI Pro에서 잘 설계되고, 완전히 반응형이며, 접근 가능한 컴포넌트 템플릿을 가져옵니다

:::note

이 도구들은 활성화된 Chakra UI Pro 라이선스와, Chakra UI Pro에서 생성한 API 키를 담은 CHAKRA_PRO_API_KEY 환경 변수 설정이 필요해요. 설정 방법은 Chakra UI Pro 통합 섹션을 참고하세요.

:::

디자인 시스템 도구 (Design System Tools)

• get_theme: 모든 디자인 토큰의 상세 목록을 가져옵니다
• theme_customization: 커스텀 테마 토큰 생성 및 수정

마이그레이션 도구 (Migration Tools)

• v2_to_v3_code_review: 버전 2에서 버전 3으로의 마이그레이션 가이드

설정 (Setup)

MCP 서버는 현재 stdio transport만 지원하며 @chakra-ui/react-mcp로 게시되어 있어요.

Visual Studio Code

GitHub Copilot과 GitHub Copilot Chat 확장이 설치되어 있는지 확인하세요.

프로젝트 루트의 .vscode/mcp.json 파일에 MCP 서버 블록을 추가하세요.

{
  "servers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

이제 MCP 서버를 사용할 준비가 됐어요. MCP 서버에서 Start를 클릭하세요.

Cursor

프로젝트 루트의 .cursor/mcp.json 파일에 다음 설정을 추가하세요.

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

Cursor가 변경 사항을 자동으로 감지하지 못한다면 에디터를 다시 시작하거나, "MCP Tools"를 통해 Chakra UI 서버를 수동으로 활성화하세요.

Claude Code

Claude Code가 설치되어 있는지 확인하세요. 설치 방법은 Anthropic docs를 참고해요.

터미널에서 다음 명령을 실행해 Chakra UI MCP 서버를 추가하세요.

claude mcp add chakra-ui -- npx -y @chakra-ui/react-mcp

이제 MCP 서버를 사용할 준비가 됐어요. claude를 실행해 Claude Code 세션을 시작하세요.

Windsurf

1. "Settings" > "Windsurf Settings" > "Cascade"로 이동합니다

2. "Manage MCPs" 버튼을 클릭한 다음 "View raw config" 버튼을 클릭합니다.

3. MCP 설정 파일에 다음을 추가합니다.

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

목록에서 MCP 서버를 보려면 "Refresh" 버튼을 클릭해야 할 수도 있어요.

Zed

1. Settings > Open Settings로 이동합니다

2. settings.json 파일에 MCP 서버를 새 context server로 추가합니다

{
  "context_servers": {
    "chakra-ui": {
      "source": "custom",
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

커스텀 MCP 클라이언트 (Custom MCP Client)

커스텀 MCP 클라이언트를 사용해 로컬이나 개발 환경에서 MCP 서버를 실행하려면, 클라이언트의 설정 파일에 MCP 서버를 추가해야 해요.

{
  "mcpServers": {
    "chakra-ui": {
      "command": "npx",
      "args": ["-y", "@chakra-ui/react-mcp"]
    }
  }
}

Chakra UI Pro 통합 (Chakra UI Pro Integration)

Chakra UI Pro의 프리미엄 컴포넌트 템플릿에 접근하려면 API 키를 설정해야 해요. 이를 위해 Chakra UI Pro 활성 라이선스가 필요합니다.

API 키 설정 (Setting Up Your API Key)

1. Chakra UI Pro 사용자 메뉴에서 API 키를 받습니다.

2. MCP 설정에 CHAKRA_PRO_API_KEY 환경 변수를 추가합니다.

env를 지원하는 에디터(VS Code, Cursor, Windsurf, Zed, Custom MCP)의 경우:

{
  "env": {
    "CHAKRA_PRO_API_KEY": "your_api_key_here"
  }
}

Claude Code의 경우:

claude mcp add chakra-ui --env CHAKRA_PRO_API_KEY=your_api_key_here -- npx -y @chakra-ui/react-mcp

설정을 마치면 list_component_templates와 get_component_templates 도구를 사용해 Pro 컴포넌트 템플릿에 접근할 수 있어요.

더 알아보기 (Learn more)

• AI Skills
• Chakra UI Pro