shadcn-ui MCP 서버

shadcn/ui 구성 요소 참조를 위한 MCP 서버

이는 shadcn/ui 구성 요소에 대한 참조 정보를 제공하는 TypeScript 기반 MCP 서버입니다. AI 어시스턴트가 shadcn/ui 구성 요소 설명서와 예제에 액세스할 수 있도록 지원하는 모델 컨텍스트 프로토콜(MCP) 서버를 구현합니다.

특징

도구

list_shadcn_components - 사용 가능한 모든 shadcn/ui 구성 요소 목록을 가져옵니다.
get_component_details - 특정 구성 요소에 대한 자세한 정보를 가져옵니다.
get_component_examples - 특정 구성 요소에 대한 사용 예를 가져옵니다.
search_components - 키워드로 구성 요소 검색

기능성

이 서버는 다음에서 정보를 스크래핑하고 캐시합니다.

공식 shadcn/ui 문서 사이트( https://ui.shadcn.com )
shadcn/ui GitHub 저장소

다음을 포함한 구조화된 데이터를 제공합니다.

구성 요소 설명
설치 지침
사용 예
소품 및 변형
코드 샘플

개발

종속성 설치:

지엑스피1

서버를 빌드하세요:

npm run build

자동 재빌드를 사용한 개발의 경우:

npm run watch

설치

클로드 데스크톱 구성

Claude Desktop과 함께 사용하려면 서버 구성을 추가하세요.

MacOS의 경우: ~/Library/Application Support/Claude/claude_desktop_config.json Windows의 경우: %APPDATA%/Claude/claude_desktop_config.json

옵션 1: 로컬 빌드 사용

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "/path/to/shadcn-ui-server/build/index.js"
    }
  }
}

옵션 2: npx 명령 사용

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

윈드서핑 구성

./codeium/windsurf/model_config.json 에 다음을 추가하세요.

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

커서 구성

.cursor/mcp.json 에 다음을 추가하세요.

{
  "mcpServers": {
    "shadcn-ui-server": {
      "command": "npx",
      "args": ["-y", "shadcn-ui-mcp-server"]
    }
  }
}

디버깅

MCP 서버는 stdio를 통해 통신하므로 디버깅이 어려울 수 있습니다. 패키지 스크립트로 제공되는 MCP Inspector를 사용하는 것이 좋습니다.

npm run inspector

검사기는 브라우저에서 디버깅 도구에 액세스할 수 있는 URL을 제공합니다.

You must be authenticated.

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

TypeScript 기반 MCP 서버를 통해 AI 어시스턴트가 shadcn/ui 구성 요소 문서와 예제에 액세스할 수 있도록 지원하며, 구성 요소 세부 정보, 사용 예제 및 검색 기능에 대한 참조 정보를 제공합니다.

Related MCP Servers

Apifox MCP
sujianqingfeng
-
security
-
license
-
quality
An MCP server that integrates Apifox API documentation with AI assistants, allowing AI to extract and understand API information from Apifox projects.
Last updated -
91
TypeScript
code2prompt-mcp
ODAncona
-
security
A
license
-
quality
An MCP server that analyzes codebases and generates contextual prompts, making it easier for AI assistants to understand and work with code repositories.
Last updated -
10
Python
MIT License
browser-use MCP Server
co-browser
-
security
A
license
-
quality
An MCP server that enables AI assistants to control a web browser through natural language commands, allowing them to navigate websites and extract information via SSE transport.
Last updated -
505
Python
MIT License
ServiceTitan MCP Server
JordanDalton
A
security
F
license
A
quality
An MCP server that allows AI assistants to interact with the ServiceTitan API, requiring client credentials for authentication.
Last updated -
454
TypeScript

View all related MCP servers

shadcn-ui MCP Server