Skip to main content
Glama
ymadd

shadcn-ui MCP Server

by ymadd

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 - 키워드로 구성 요소 검색

기능성

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

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

  • 구성 요소 설명

  • 설치 지침

  • 사용 예

  • 소품 및 변형

  • 코드 샘플

Related MCP server: @jpisnice/shadcn-ui-mcp-server

개발

종속성 설치:

지엑스피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을 제공합니다.

Available Tools

4 tools
get_component_detailsB

Get detailed information about a specific shadcn/ui component

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNameYesName of the shadcn/ui component (e.g., "accordion", "button")

TDQS

B3.3/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states this is a read operation ('Get detailed information'), which is helpful, but it doesn't describe what 'detailed information' includes (e.g., properties, usage, dependencies), whether there are rate limits, authentication requirements, or error handling. For a tool with zero annotation coverage, this leaves significant gaps in understanding its behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It's front-loaded with the core action and resource, making it easy to parse quickly. There's no wasted language, and it earns its place by providing essential context.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's low complexity (1 parameter, no output schema, no annotations), the description is minimally adequate. It covers the basic purpose but lacks details on what 'detailed information' entails, which is critical since there's no output schema to clarify the return values. For a tool that presumably returns structured data about components, more context on the output would improve completeness.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the parameter 'componentName' clearly documented in the schema as 'Name of the shadcn/ui component (e.g., "accordion", "button")'. The description doesn't add any additional meaning beyond what the schema provides, such as format constraints or examples not already covered. With high schema coverage, the baseline score of 3 is appropriate.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the verb ('Get detailed information') and resource ('specific shadcn/ui component'), making the purpose immediately understandable. It distinguishes from 'list_shadcn_components' (which likely lists all components) and 'search_components' (which likely searches across components), though it doesn't explicitly differentiate from 'get_component_examples' which might overlap in retrieving component-related information.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage when detailed information about a specific component is needed, but it doesn't provide explicit guidance on when to use this tool versus alternatives like 'get_component_examples' or 'search_components'. There's no mention of prerequisites, exclusions, or specific scenarios where this tool is preferred over siblings.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_component_examplesB

Get usage examples for a specific shadcn/ui component

ParametersJSON Schema
NameRequiredDescriptionDefault
componentNameYesName of the shadcn/ui component (e.g., "accordion", "button")

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool retrieves examples but does not describe any behavioral traits such as rate limits, authentication needs, error handling, or the format of returned examples. This leaves significant gaps in understanding how the tool operates beyond its basic purpose.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without any unnecessary words. It is front-loaded and appropriately sized for a simple tool, making it easy for an agent to parse and understand quickly.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the tool's low complexity (one parameter, no output schema, no annotations), the description is adequate but incomplete. It covers the basic purpose but lacks details on behavioral aspects and usage guidelines, which are important for effective tool invocation. Without annotations or output schema, more context in the description would be beneficial.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The schema description coverage is 100%, with the parameter 'componentName' clearly documented in the input schema. The description adds minimal value beyond this, as it only reiterates the need for a component name without providing additional context like valid examples or constraints. This meets the baseline for high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with a specific verb ('Get') and resource ('usage examples for a specific shadcn/ui component'), making it immediately understandable. However, it does not explicitly differentiate from sibling tools like 'get_component_details' or 'search_components', which might also provide example-related information, so it falls short of a perfect score.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus alternatives like 'get_component_details' or 'search_components'. It implies usage for retrieving examples but offers no context on prerequisites, exclusions, or specific scenarios, leaving the agent to infer usage based on the tool name alone.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list_shadcn_componentsB

Get a list of all available shadcn/ui components

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool 'gets a list' but doesn't describe what the list contains (e.g., names, metadata), how it's formatted, or any limitations (e.g., pagination, rate limits). For a tool with zero annotation coverage, this leaves significant gaps in understanding its behavior.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's function without any wasted words. It's appropriately sized and front-loaded, making it easy to understand at a glance.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and no output schema, the description is incomplete for a tool that likely returns a list of components. It doesn't explain what the output includes (e.g., component names, descriptions, categories) or any behavioral traits. For a tool with no structured data to rely on, the description should provide more context about the return values and usage.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The tool has zero parameters, and the schema description coverage is 100% (as there are no parameters to describe). The description doesn't need to add parameter information, so it meets the baseline expectation. No additional value is required beyond stating the tool's purpose.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool's purpose with a specific verb ('Get') and resource ('list of all available shadcn/ui components'). It distinguishes itself from siblings by focusing on listing all components rather than getting details, examples, or searching. However, it doesn't explicitly mention how it differs from 'search_components' in terms of scope or filtering.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines2/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description provides no guidance on when to use this tool versus its siblings. It doesn't mention alternatives like 'search_components' for filtered results or 'get_component_details' for specific information. There's no context about prerequisites, timing, or exclusions for usage.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

search_componentsB

Search for shadcn/ui components by keyword

ParametersJSON Schema
NameRequiredDescriptionDefault
queryYesSearch query to find relevant components

TDQS

B3.2/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It states the tool searches by keyword but doesn't describe how results are returned (e.g., format, pagination), performance traits (e.g., rate limits), or error handling. This leaves significant gaps in understanding the tool's behavior beyond the basic action.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, efficient sentence that directly states the tool's purpose without unnecessary words. It is front-loaded with the core action and resource, making it easy to understand at a glance. Every part of the sentence contributes essential information.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness2/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Given the lack of annotations and output schema, the description is incomplete for a search tool. It doesn't explain what the search returns (e.g., list of component names, metadata), how results are structured, or any limitations (e.g., search scope, result ordering). For a tool with no structured behavioral data, this leaves critical gaps in understanding its functionality.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The input schema has 100% description coverage, with the single parameter 'query' documented as 'Search query to find relevant components'. The description adds minimal value beyond this, as it only repeats the keyword-based search concept without providing additional syntax, examples, or constraints. Baseline 3 is appropriate given the high schema coverage.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the action ('Search for') and target resource ('shadcn/ui components'), specifying the method ('by keyword'). It distinguishes from sibling tools like 'list_shadcn_components' by indicating a keyword-based search rather than a simple listing. However, it doesn't explicitly contrast with 'get_component_details' or 'get_component_examples', which are more specific retrieval tools.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description implies usage for finding components via keywords, suggesting it's for discovery rather than detailed retrieval. However, it lacks explicit guidance on when to use this tool versus alternatives like 'list_shadcn_components' (e.g., for unfiltered listing) or 'get_component_details' (e.g., for specific component info). No exclusions or prerequisites are mentioned.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 4 tool updates
    • First observedget_component_details
    • First observedget_component_examples
    • First observedlist_shadcn_components
    • First observedsearch_components

TDQS

A3.7/5.0

Scored across 4 tools

Disambiguation5/5

Each tool has a clearly distinct purpose with no overlap: list_shadcn_components provides all components, get_component_details gives detailed info, get_component_examples shows usage examples, and search_components enables keyword-based discovery. An agent can easily distinguish between these four operations.

Naming Consistency5/5

All tool names follow a consistent verb_noun pattern (get_component_details, get_component_examples, list_shadcn_components, search_components) with clear, descriptive verbs (get, list, search) and consistent snake_case formatting throughout.

Tool Count5/5

Four tools is well-scoped for a component documentation server, providing essential operations (list, search, get details, get examples) without bloat. Each tool earns its place in supporting component discovery and usage workflows.

Completeness4/5

The toolset covers core documentation needs well: discovery (list/search) and component information (details/examples). A minor gap exists in lacking installation/implementation guidance tools, but agents can work around this with the provided information.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers