Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@shadcn-ui MCP Server show me examples for the Button component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
MCP server for shadcn/ui component references
This is a TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements a Model Context Protocol (MCP) server that helps AI assistants access shadcn/ui component documentation and examples.
list_shadcn_components - Get a list of all available shadcn/ui components
get_component_details - Get detailed information about a specific component
get_component_examples - Get usage examples for a specific component
search_components - Search for components by keyword
This server scrapes and caches information from:
The official shadcn/ui documentation site (https://ui.shadcn.com)
The shadcn/ui GitHub repository
It provides structured data including:
Component descriptions
Installation instructions
Usage examples
Props and variants
Code samples
Related MCP server: @jpisnice/shadcn-ui-mcp-server
Install dependencies:
npm installBuild the server:
npm run buildFor development with auto-rebuild:
npm run watchTo use with Claude Desktop, add the server config:
On MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json
On Windows: %APPDATA%/Claude/claude_desktop_config.json
{
"mcpServers": {
"shadcn-ui-server": {
"command": "/path/to/shadcn-ui-server/build/index.js"
}
}
}{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Add this to your ./codeium/windsurf/model_config.json:
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Add this to your .cursor/mcp.json:
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["-y", "shadcn-ui-mcp-server"]
}
}
}Since MCP servers communicate over stdio, debugging can be challenging. We recommend using the MCP Inspector, which is available as a package script:
npm run inspectorThe Inspector will provide a URL to access debugging tools in your browser.
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") |
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 usage examples for a specific shadcn/ui component
| Name | Required | Description | Default |
|---|---|---|---|
| componentName | Yes | Name of the shadcn/ui component (e.g., "accordion", "button") |
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.
Get a list of all available shadcn/ui components
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
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 for shadcn/ui components by keyword
| Name | Required | Description | Default |
|---|---|---|---|
| query | Yes | Search query to find relevant components |
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.
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
get_component_detailsget_component_exampleslist_shadcn_componentssearch_componentsScored across 4 tools
Each tool has a clearly distinct purpose with no overlap: listing all components, searching by keyword, getting component details, and getting usage examples. The descriptions make it unambiguous which tool to use for each specific need.
All tools follow a consistent verb_noun pattern with clear, descriptive names (get_component_details, get_component_examples, list_shadcn_components, search_components). The naming convention is uniform and predictable throughout the set.
Four tools is perfectly appropriate for a shadcn/ui component documentation server. This provides complete coverage for the core workflows: discovering components, searching, getting details, and seeing examples without being overwhelming or insufficient.
The tool set provides complete coverage for interacting with shadcn/ui components: listing all available components, searching for specific ones, getting detailed information, and accessing usage examples. There are no obvious gaps in this documentation-focused domain.
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
A Model Context Protocol server for Wix AI tools
Serves your design system and coding standards to coding agents, so they stop guessing.
The Cortex MCP server provides read-only access to real-time engineering context from the Cortex developer portal, allowing AI coding assistants to answer natural language questions about your organization's catalog (microservices, libraries, domains, teams, infrastructure), scorecards (engineering standards and best practices), initiatives (goals and deadlines), and Engineering Intelligence metrics. It includes tools for querying documentation, tracking personal entities, and accessing AI-assisted insights across the entire Cortex ecosystem.
