MCP 서버

mdui는 전용 MCP(Model Context Protocol) 서버 @mdui/mcp를 제공하여 로컬에서 AI 에이전트에게 컴포넌트, 아이콘, CSS 사용자 정의 속성 및 문서 조회 기능을 제공합니다.

이 서버는 Claude Code, Cursor, GitHub Copilot 등의 개발 도구와 함께 사용하여 코드 생성을 보조하고 mdui의 컴포넌트와 스타일을 더 잘 활용할 수 있도록 합니다.

도구

mdui의 MCP 서버는 AI 에이전트에게 다음과 같은 도구를 노출합니다:

• list_components: 모든 mdui 컴포넌트를 나열합니다.
• get_component_metadata: 단일 컴포넌트의 상세 API 메타데이터를 가져옵니다.
• list_css_classes: 전역 CSS 클래스 이름을 나열합니다.
• list_css_variables: 전역 CSS 사용자 정의 속성을 나열합니다.
• list_documents: 모든 문서를 나열합니다.
• get_document: 단일 문서의 전체 내용을 가져옵니다.
• list_icon_codes: 속성이나 API에 사용할 수 있는 아이콘 코드를 나열합니다.
• list_icon_components: 독립적인 아이콘 컴포넌트와 해당 ESM 가져오기 문을 나열합니다.

사용 방식

MCP 서버는 stdio 전송만 지원하며, VS Code, Cursor, Claude Code, Windsurf, Zed 등의 클라이언트와 stdio 프로토콜을 지원하는 AI 에이전트에서 직접 사용합니다.

VS Code

GitHub Copilot 및 GitHub Copilot Chat 확장 프로그램이 설치되어 있는지 확인하세요.

1. 프로젝트 루트 디렉터리에 .vscode/mcp.json 파일을 생성하고 다음 구성을 추가합니다:

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

2. mcp.json 파일 내의 "시작" 버튼을 클릭합니다.

3. GitHub Copilot Chat에서 대화를 시작합니다.

Cursor

1. 프로젝트 루트 디렉터리에 .cursor/mcp.json 파일을 생성하거나 편집하여 다음 구성을 추가합니다:

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

2. Settings > Cursor Settings > MCP & Integrations로 이동하여 mdui 서버를 활성화합니다.

3. Cursor Chat에서 대화를 시작합니다.

Claude Code

1. 터미널에서 다음 명령을 실행하여 mdui MCP 서버를 추가합니다:

   claude mcp add mdui -- npx -y @mdui/mcp
   

2. 그런 다음 claude를 실행하여 세션을 시작합니다.

3. 프롬프트를 입력하여 사용을 시작합니다.

Windsurf

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

2. Manage MCPs를 클릭한 다음 "View raw config"를 클릭하여 구성 파일에 다음을 추가합니다:

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

   MCP 서버가 자동으로 나타나지 않으면 Refresh를 클릭하여 목록을 새로고침하세요.

3. 프롬프트를 입력하여 대화를 시작합니다.

Zed

1. Settings > Open Settings를 열고 settings.json 파일에 다음 구성을 추가합니다:

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

2. 프롬프트를 입력하여 사용을 시작합니다.

사용자 정의 MCP 클라이언트

로컬 또는 개발 환경에서 사용자 정의 MCP 클라이언트를 사용하는 경우, 해당 서버를 클라이언트의 구성 파일에 추가하면 됩니다. 예시:

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