shadcn-ui MCP Server
Servidor MCP shadcn-ui
Servidor MCP para referencias de componentes shadcn/ui
Este es un servidor MCP basado en TypeScript que proporciona información de referencia para los componentes shadcn/ui. Implementa un servidor de Protocolo de Contexto de Modelo (MCP) que ayuda a los asistentes de IA a acceder a la documentación y los ejemplos de los componentes shadcn/ui.
Características
Herramientas
list_shadcn_components: obtiene una lista de todos los componentes shadcn/ui disponiblesget_component_details: obtener información detallada sobre un componente específicoget_component_examples: obtener ejemplos de uso para un componente específicosearch_components- Buscar componentes por palabra clave
Funcionalidad
Este servidor recopila y almacena en caché información de:
El sitio oficial de documentación de shadcn/ui ( https://ui.shadcn.com )
El repositorio de GitHub shadcn/ui
Proporciona datos estructurados que incluyen:
Descripciones de componentes
Instrucciones de instalación
Ejemplos de uso
Accesorios y variantes
Ejemplos de código
Related MCP server: @jpisnice/shadcn-ui-mcp-server
Desarrollo
Instalar dependencias:
npm installConstruir el servidor:
npm run buildPara desarrollo con reconstrucción automática:
npm run watchInstalación
Configuración del escritorio de Claude
Para utilizar con Claude Desktop, agregue la configuración del servidor:
En MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json En Windows: %APPDATA%/Claude/claude_desktop_config.json
Opción 1: Usar compilación local
{
"mcpServers": {
"shadcn-ui-server": {
"command": "/path/to/shadcn-ui-server/build/index.js"
}
}
}Opción 2: Usar el comando npx
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Configuración de windsurf
Agregue esto a su ./codeium/windsurf/model_config.json :
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Configuración del cursor
Agregue esto a su .cursor/mcp.json :
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Depuración
Dado que los servidores MCP se comunican a través de stdio, la depuración puede ser complicada. Recomendamos usar el Inspector MCP , disponible como script de paquete:
npm run inspectorEl Inspector proporcionará una URL para acceder a las herramientas de depuración en su navegador.
Available Tools
4 toolsget_component_detailsB
Get detailed information about a specific shadcn/ui component
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "accordion", "button") |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "accordion", "button") |
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
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.
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.
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.
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.
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.
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
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
TDQS
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.
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.
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.
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.
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.
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.
4 tool updates
- First observed
get_component_details - First observed
get_component_examples - First observed
list_shadcn_components - First observed
search_components
TDQS
Scored across 4 tools
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.
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.
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.
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
Related MCP Connectors
The Remote MCP server acts as a standardized bridge between LLM applications (like Claude, ChatGPT, and Cursor) and external services, enabling AI agents to access external tools and resources. Its primary capability is providing a centralized search tool to discover other MCP servers and their respective tools. Unlike local implementations, it runs remotely with OAuth authentication and permission controls for security.
Augments MCP Server - A comprehensive framework documentation provider for Claude Code
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
Search GitHub, npm, PyPI, StackOverflow, ArXiv from one MCP — built for coding agents.
Related MCP Servers
- AlicenseAqualityDmaintenanceProvides reference information for shadcn/ui components through a Model Context Protocol server that helps AI assistants access component documentation and examples.4921 npmMIT
- AlicenseAqualityBmaintenanceA mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation106,059 npm3,043MIT
- FlicenseAqualityDmaintenanceProvides AI assistants with direct access to shadcn/ui components and blocks, enabling real-time fetching of component source code, documentation, and implementation examples.432 npm4-
- AlicenseAqualityCmaintenanceMCP server for Shadcn Dashboard that enables AI to discover, search, and install UI blocks directly into projects without copy-paste.637 npmMIT