shadcn-ui-mcp-server
Provides comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata, with support for React, Svelte, Vue, and React Native implementations, enabling AI-powered UI development and code generation.
Click on "Install 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-serverGet the source code for the shadcn/ui button component in React"
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.
Shadcn UI v4 MCP Server
π The fastest way to integrate shadcn/ui components into your AI workflow
A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. Seamlessly retrieve React, Svelte, Vue, and React Native implementations for your AI-powered development workflow.
β¨ Key Features
π― Multi-Framework Support - React, Svelte, Vue, and React Native implementations
π¦ Component Source Code - Latest shadcn/ui v4 TypeScript source
π¨ Component Demos - Example implementations and usage patterns
ποΈ Blocks Support - Complete block implementations (dashboards, calendars, forms)
π Metadata Access - Dependencies, descriptions, and configuration details
π Directory Browsing - Explore repository structures
β‘ Smart Caching - Efficient GitHub API integration with rate limit handling
π SSE Transport - Server-Sent Events support for multi-client deployments
π³ Docker Ready - Production-ready containerization with Docker Compose
Related MCP server: shadcn-ui MCP Server
π Quick Start
# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server
# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
# Switch frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native
# Use Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library baseπ― Get your GitHub token in 2 minutes: docs/getting-started/github-token.md
π¦ One-Click Installation (Claude Desktop)
Download and double-click the .mcpb file for instant installation:
Download
shadcn-ui-mcp-server.mcpbfrom ReleasesDouble-click the file - Claude Desktop opens automatically
Enter your GitHub token (optional, for higher rate limits)
Click Install - tools are available immediately
Manual install: Claude Desktop β Settings β MCP β Add Server β Browse β Select .mcpb file
References: Anthropic Desktop Extensions | Building MCPB
π SSE Transport & Docker Deployment
Run the server with Server-Sent Events (SSE) transport for multi-client support and production deployments:
Quick Start with SSE
# SSE mode (supports multiple concurrent connections)
node build/index.js --mode sse --port 7423
# Docker Compose (production ready)
docker-compose up -d
# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sseTransport Modes
stdio(default) - Standard input/output for CLI usagesse- Server-Sent Events for HTTP-based connectionsdual- Both stdio and SSE simultaneously
Docker Examples
# Basic container
docker run -p 7423:7423 shadcn-ui-mcp-server
# With GitHub API token
docker run -p 7423:7423 -e GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token shadcn-ui-mcp-server
# Docker Compose (recommended)
docker-compose up -d
curl http://localhost:7423/healthEnvironment Variables
MCP_TRANSPORT_MODE- Transport mode (stdio|sse|dual)MCP_PORT- SSE server port (default: 7423 - SHADCN on keypad!)MCP_HOST- Host binding (default: 0.0.0.0)MCP_CORS_ORIGINS- CORS origins (comma-separated)GITHUB_PERSONAL_ACCESS_TOKEN- GitHub API tokenUI_LIBRARY- UI primitive library:radix(default) orbase(React only)
π Documentation
Section | Description |
Installation, setup, and first steps | |
Framework selection, tokens, and options | |
Editor and tool integrations | |
Examples, tutorials, and use cases | |
Framework-specific documentation | |
Common issues and solutions | |
Tool reference and technical details |
π¨ Framework Support
This MCP server supports four popular shadcn implementations:
Framework | Repository | Maintainer | Description |
React (default) | React components from shadcn/ui v4 | ||
Svelte | Svelte components from shadcn-svelte | ||
Vue | Vue components from shadcn-vue | ||
React Native | React Native components from react-native-reusables |
UI Library (React only)
shadcn/ui v4 supports two primitive libraries for React: Radix UI (default) and Base UI.
# Radix UI (default)
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library radix
# Base UI
npx @jpisnice/shadcn-ui-mcp-server --framework react --ui-library base
# Or via environment variable
UI_LIBRARY=base npx @jpisnice/shadcn-ui-mcp-serverClaude Desktop config example:
{
"args": ["--framework", "react", "--ui-library", "base"]
}π οΈ Essential Setup
1. Get GitHub Token (Recommended)
# Visit: https://github.com/settings/tokens
# Generate token with no scopes needed
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here2. Run Server
# React (default)
npx @jpisnice/shadcn-ui-mcp-server
# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue
# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native3. Integrate with Your Editor
Claude Code: See Claude Code Integration below
VS Code: docs/integration/vscode.md
Cursor: docs/integration/cursor.md
Claude Desktop: docs/integration/claude-desktop.md
Continue.dev: docs/integration/continue.md
π» Claude Code Integration
Quick Add (CLI)
# Add the shadcn-ui MCP server
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKENSSE Transport
For production deployments with SSE transport:
# Start server in SSE mode
node build/index.js --mode sse --port 7423
# Connect with Claude Code
claude mcp add --scope user --transport sse shadcn-mcp-server http://localhost:7423/sseFramework-Specific Commands
See Claude Code Integration Guide for framework-specific commands (React, Svelte, Vue, React Native).
Reference: Claude Code MCP Documentation
π― Use Cases
AI-Powered Development - Let AI assistants build UIs with shadcn/ui
Multi-Client Deployments - SSE transport supports multiple concurrent connections
Production Environments - Docker Compose ready with health checks and monitoring
Component Discovery - Explore available components and their usage
Multi-Framework Learning - Compare React, Svelte, Vue, and React Native implementations
Rapid Prototyping - Get complete block implementations for dashboards, forms, etc.
Code Generation - Generate component code with proper dependencies
π¦ Installation
# Global installation (optional)
npm install -g @jpisnice/shadcn-ui-mcp-server
# Or use npx (recommended)
npx @jpisnice/shadcn-ui-mcp-serverπ¨ Building from Source
Prerequisites
Node.js >= 18.0.0
npm or pnpm
Build Steps
# Clone the repository
git clone https://github.com/Jpisnice/shadcn-ui-mcp-server.git
cd shadcn-ui-mcp-server
# Install dependencies
npm install
# Build the project
npm run build
# Run the server
node build/index.js --github-api-key YOUR_TOKENRun Locally
# After building, run with options
node build/index.js --github-api-key YOUR_TOKEN
node build/index.js --framework svelteBuilding MCPB Package
The project includes a manifest.json following the MCPB specification. The .mcpb file is a ZIP archive containing the server, dependencies, and configuration.
See CONTRIBUTING.md for detailed packaging instructions.
Reference: Building Desktop Extensions with MCPB
π Quick Links
π Full Documentation
π¨ Framework Comparison
π§ API Reference
π Troubleshooting
π¬ Issues & Discussions
π License
MIT License - see LICENSE for details.
π Acknowledgments
shadcn - For the amazing React UI component library
huntabyte - For the excellent Svelte implementation
unovue - For the comprehensive Vue implementation
Founded Labs - For the React Native implementation
Anthropic - For the Model Context Protocol specification
Made with β€οΈ by Janardhan Polle
Star β this repo if you find it helpful!
Available Tools
10 toolsapply_themeCDestructive
Apply a TweakCN theme preset to the project
| Name | Required | Description | Default |
|---|---|---|---|
| query | No | Search query for theme (e.g., 'cyberpunk', 'modern') | |
| dryRun | No | If true, returns preview instead of writing files | |
| presetId | No | Specific preset ID if known | |
| tailwindVersion | No | Tailwind CSS version (default: '4') |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations mark this as destructive, but the description adds no additional behavioral context. It doesn't indicate what files are modified, whether the operation is reversible, or what the impact of applying a theme is. Given the destructive hint, the description could have explained the scope of modifications but remains silent, leaving the agent under-informed.
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, clear sentence with no fluff. It effectively communicates the core purpose without unnecessary words, making it easy to parse quickly. It earns its place by stating the action and target, though it is minimal.
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?
For a destructive action with multiple optional parameters and no output schema, the description is underspecified. It fails to explain what 'apply' does to the project (e.g., which files change, whether dryRun prevents all changes), what the preview in dryRun looks like, or how presetId relates to query. The lack of detail makes it inadequate for safe and effective use.
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?
Schema description coverage is 100%, so all parameters have descriptions in the schema. The tool description adds no extra parameter context. Since the schema fully documents parameters (query, dryRun, presetId, tailwindVersion), the baseline of 3 applies; the description does not hinder or enhance understanding beyond the schema.
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 ('Apply') and resource ('TweakCN theme preset') and specifies the target ('to the project'). It distinguishes from sibling tools like get_theme or list_themes, which are read-only, but does not detail what 'apply' entails. It avoids tautology and is clear but could be more specific about the nature of the application.
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, nor any prerequisites or side effects. It simply states the action without context. There's no mention of when to choose this over get_theme or list_themes, nor any caution about destructive consequences.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_blockARead-only
Get source code for a specific shadcn/ui v4 block (e.g., calendar-01, dashboard-01)
| Name | Required | Description | Default |
|---|---|---|---|
| blockName | Yes | Name of the block (e.g., "calendar-01", "dashboard-01", "login-02") | |
| includeComponents | No | Whether to include component files for complex blocks (default: true) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint: true, and the description aligns with that. It adds useful context about the block being v4 and examples, but does not disclose what the returned source code looks like or any edge-case behavior. Since annotations cover the safety profile, this is acceptable but not rich.
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 concise sentence that provides key details and examples without waste. It is well-front-loaded.
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?
For a simple read-only tool with two parameters and no output schema, the description covers the core purpose and usage. It could mention the return format or includeComponents behavior, but the schema already covers the parameter. Overall adequate.
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?
Schema coverage is 100% with both parameters well-described. The description adds example values for blockName but does not add meaning beyond the schema. Baseline 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 uses a specific verb ('Get') and resource ('source code for a specific shadcn/ui v4 block'), with clear example values. It distinguishes itself from sibling tools like list_blocks and get_component by focusing on fetching a single block's source.
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 when to use the tool (when you need source code for a specific block) and provides examples. However, it does not explicitly name alternatives or state when not to use it, though the context is clear enough.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_componentARead-only
Get the source code for a specific shadcn/ui v4 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?
Annotations already provide readOnlyHint: true, so the description doesn't need to cover safety. It adds the detail that it returns source code, which is consistent and slightly more specific than the tool name. No contradictions, though it could mention return format or error 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, front-loaded sentence that is direct and free of redundancy. Every word earns its place.
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?
For a simple read-only getter with one parameter and no output schema, the description adequately conveys the tool's purpose. Sibling differentiation is implicit through 'source code', and the annotations cover safety. No critical information is missing.
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 provides 100% coverage with a clear description and example for componentName. The description adds no extra parameter semantics, but the schema handles it well, so baseline 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 uses a specific verb ('Get') and resource ('source code for a specific shadcn/ui v4 component'), clearly distinguishing it from sibling tools like get_component_demo and get_component_metadata by emphasizing 'source code'.
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?
No explicit guidance on when to use this tool versus alternatives. The description implies usage via 'source code' but doesn't name siblings or provide exclusion criteria. Given the cluster of similar tools (demo, metadata), this is a missed opportunity to clarify when to choose this tool.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_demoARead-only
Get demo code illustrating how a shadcn/ui v4 component should be used
| 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?
The description is consistent with the readOnlyHint annotation and adds useful version/scope context ('shadcn/ui v4'). However, it does not disclose return format, output size, or behavior details beyond what the annotation already signals about safety.
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, front-loaded sentence that conveys the tool's exact purpose. Every word earns its place, with no filler or redundant restatement of the tool name.
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?
For a simple one-parameter read-only tool without an output schema, the description plus annotation provides adequate context: what it returns (demo code), for what (shadcn/ui v4), and safety (readOnlyHint). It could briefly mention the demo format or relationship to get_component, but the low complexity makes the description mostly sufficient.
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?
Schema description coverage is 100% for the single componentName parameter, so the schema already documents the expected input. The description adds no parameter-specific meaning beyond what the schema provides, warranting the baseline score.
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 uses a specific verb-object pair ('Get demo code') and names the target resource ('shadcn/ui v4 component'). It clearly separates this tool from siblings like get_component and get_component_metadata by emphasizing its purpose is showing usage examples rather than fetching the component itself.
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 intended usage is implied by 'demo code illustrating how a shadcn/ui v4 component should be used,' but no explicit guidance is given about when to choose this over get_component or get_component_metadata. Sibling tools exist, so some direct differentiation would strengthen this dimension.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_component_metadataARead-only
Get metadata for a specific shadcn/ui v4 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?
The readOnlyHint annotation already indicates a safe read operation, and the description does not contradict it. However, the description adds no additional behavioral context (e.g., no side effects, no data mutability), so it relies on the annotation. It is adequate but not enriched.
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, concise sentence with no unnecessary words. It directly and efficiently conveys the tool's purpose, earning top marks for brevity and clarity.
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 simplicity and the presence of sibling tools, the description is sufficient for basic understanding. However, it omits usage guidance and does not hint at what metadata contains, which could leave ambiguity in richer contexts. It is adequate but not fully comprehensive.
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 provides a clear description of componentName with examples, fully covering the parameter semantics. The tool description adds no extra detail, so it neither improves nor degrades the parameter understanding. Thus, it meets the baseline for a schema-covered parameter.
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 retrieves metadata for a specific shadcn/ui v4 component, which is a specific action on a specific resource. It distinguishes from sibling tools like get_component (likely fetching the component code) and list_components (listing all), making the purpose unambiguous.
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 does not specify when to use this tool over alternatives. It merely states functionality without explaining scenarios (e.g., 'use this when you need only metadata, not the full component'), nor does it mention any exclusions among siblings. This lack of guidance leaves the agent to infer usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_directory_structureBRead-only
Get the directory structure of the shadcn-ui v4 repository
| Name | Required | Description | Default |
|---|---|---|---|
| path | No | Path within the repository (default: v4 registry) | |
| repo | No | Repository name (default: "ui") | |
| owner | No | Repository owner (default: "shadcn-ui") | |
| branch | No | Branch name (default: "main") |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The readOnlyHint annotation already signals a safe read operation, so the description does not need to repeat that. However, it adds no behavioral detail beyond a literal restatementβthere is no mention of the tree format, recursion behavior, or how the result is structured, leaving the agent to infer the output.
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?
A single, succinct sentence conveys the core purpose with no filler or redundancy. It is optimally concise for a simple read-only tool.
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?
The description is too minimal for a tool with four optional parameters and no output schema. It fails to explain what a 'directory structure' entails (e.g., files, folders, nesting) or how the response is represented, leaving significant gaps in the agent's understanding.
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?
Schema description coverage is 100%, and each parameter has a clear description with defaults. The tool description adds nothing new about parameters, but since the schema already handles explanations, the baseline 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 uses a specific verb ('Get') and a clear resource ('directory structure of the shadcn-ui v4 repository'), clearly distinguishing it from sibling tools that fetch components, blocks, or themes. It avoids tautology and precisely states the tool's function.
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?
No guidance is provided on when to use this tool versus alternatives such as get_component or list_components. There is no mention of scenarios where examining repository structure is appropriate or when it should be avoided.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_themeBRead-only
Get details of a specific tweakcn theme
| Name | Required | Description | Default |
|---|---|---|---|
| themeName | Yes | Name or ID of the theme to retrieve |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations include readOnlyHint: true, which already signals a safe read operation. The description adds no behavioral context beyond that, but doesn't contradict the annotation. It doesn't mention error handling, response format, or any special behavior, leaving the annotations to carry the burden.
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 lean sentence with no redundant words. It is appropriately sized for a simple getter tool and earns its place without filler.
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 simplicity (one parameter, readOnly annotation, no output schema), the description is minimally adequate. However, it doesn't specify what 'details' include or the return value structure, which would be helpful since no output schema exists. It's not incomplete enough to be confusing, but lacks rich context.
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 describes the single parameter themeName as 'Name or ID of the theme to retrieve' with 100% coverage, so the schema fully handles parameter semantics. The description itself adds no extra meaning beyond what the schema provides, matching 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 retrieves details of a specific tweakcn theme, using a specific verb ('Get') and resource ('theme'). It distinguishes from list_themes by implying a single specific theme, but doesn't explicitly contrast with siblings like get_component or get_block.
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?
No guidance is given on when to use this tool versus alternatives. It does not mention that list_themes should be used to find themes first, or that apply_theme is for modifying, providing no context for tool selection.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_blocksBRead-only
Get all available shadcn/ui v4 blocks with categorization
| Name | Required | Description | Default |
|---|---|---|---|
| category | No | Filter by category (calendar, dashboard, login, sidebar, products) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, so the agent knows this is a safe read. The description adds 'with categorization', hinting at output structure, but does not disclose response format, pagination, or other behavioral details. It does not contradict annotations.
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?
One short sentence that communicates the core purpose and scope without any filler. Every word contributes meaning, and the structure is immediately scannable.
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?
For a simple listing tool with one optional parameter, no output schema, and clear annotations, the description is nearly sufficient. It could mention what the returned list looks like or that it returns categorized data, but overall it is adequate for the low complexity.
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 already provides 100% description coverage for the category parameter, including valid values. The description adds no further meaning beyond the schema, so it meets the baseline of 3.
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 ('Get') and the resource ('all available shadcn/ui v4 blocks'), and adds the scope 'with categorization'. It distinguishes from sibling tools like get_block (singular) and list_components (different resource type), though it does not explicitly name them.
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?
No explicit guidance on when to use this tool versus alternatives. It does not mention when to prefer list_blocks over list_components or get_block, nor any exclusions. The only implied usage is that it lists blocks, which is already obvious from the name.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_componentsBRead-only
Get all available shadcn/ui v4 components
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
The annotations already declare readOnlyHint: true, so the description isn't required to restate that. It adds no additional context (e.g., return format, scope, rate limits), but it doesn't contradict the annotation. The description is adequate but adds no extra behavioral disclosure beyond the annotation.
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, concise sentence: 'Get all available shadcn/ui v4 components.' It is front-loaded and contains no fluff, making it easy to parse.
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?
The description is minimal and adequate for a simple listing tool, but since there is no output schema, it could benefit from specifying what information is returned (e.g., component names, IDs, or metadata) and how it relates to sibling tools like get_component. Without these details, an agent might not know what to expect from the result.
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?
There are no parameters, so schema coverage is trivially 100%. The baseline for zero-parameter tools is 4, and the description doesn't need to explain any parameters. This score 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 it lists all available shadcn/ui v4 components. It uses a specific verb and resource, and the 'all available' phrasing implies a listing function, which distinguishes it from sibling tools like get_component that retrieve individual components. However, it doesn't explicitly contrast with siblings, so it falls short of a 5.
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?
No guidance is provided on when to use this tool versus alternatives. While 'all available' hints at an overview purpose, the description doesn't explicitly mention using it over get_component or other siblings, nor does it state when not to use it. This is a notable gap given the rich sibling list.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list_themesARead-only
List available tweakcn themes
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations already declare readOnlyHint=true, so the safety profile is covered. The description adds no extra behavioral details (e.g., pagination, sorting, or response format), but for a simple parameterless list operation this does not create a significant gap. The description neither contradicts annotations nor enriches them beyond the basic read-only nature.
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 sentence, using exactly the words needed to convey the purpose. There is no fluff or repetition, making it optimally concise and well-structured for a simple tool.
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 simplicity (no parameters, no output schema, basic list operation), the description is complete enough for an agent to understand the function. It does not specify the return format, but the practical nature of a theme list makes this self-evident, so minimal detail is acceptable.
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?
There are zero parameters, and schema coverage is trivially 100%. Per rubric, a baseline of 4 applies when no parameters exist; the description correctly adds no parameter explanations since there are none to describe.
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 uses a specific verb 'List' and names the resource 'tweakcn themes', clearly indicating it enumerates available themes. It naturally distinguishes from sibling tools like get_theme, which retrieves a single theme, without needing explicit differentiation.
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?
No guidance is provided on when to use this tool versus alternatives such as get_theme or list_components. The description only states what it does, with no context on typical use cases, prerequisites, or exclusions. It is not misleading but lacks any usage direction.
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.
10 tool updates
v2.0.0- First observed
apply_theme - First observed
get_block - First observed
get_component - First observed
get_component_demo - First observed
get_component_metadata - First observed
get_directory_structure - First observed
get_theme - First observed
list_blocks - First observed
list_components - First observed
list_themes
TDQS
Scored across 10 tools
Each tool targets a distinct resource (component, block, theme, directory) and action (list, get, apply). The three component-specific getters are clearly separated by what they return: source, demo, or metadata, so an agent is unlikely to confuse them.
All tools follow a consistent verb_noun pattern with snake_case: list_* for enumeration, get_* for retrieval, and apply_theme for the one mutation. Singular get_* versus plural list_* is a standard and predictable convention.
Ten tools is well-scoped for the server's purpose. The three resource domains (components, blocks, themes) each have a small, focused set of tools, and no tool feels redundant or unnecessary.
The tool surface covers the core workflows: discovering components and blocks, retrieving their source/demo/metadata, and exploring/applying themes. Minor gaps exist (e.g., no search/filtering across components, no block demos or metadata), but an agent can accomplish most expected tasks without dead ends.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Connect AI assistants to your GitHub-hosted Obsidian vault to seamlessly access, search, and analyβ¦
Versioned documentation registry and semantic search for AI tools and coding assistants.
Related MCP Servers
- AlicenseAqualityDmaintenanceHelps AI assistants access shadcn/ui component documentation and examples through a TypeScript-based MCP server that provides reference information for component details, usage examples, and search capabilities.41,09560MIT
- AlicenseAqualityDmaintenanceProvides reference information for shadcn/ui components through a Model Context Protocol server that helps AI assistants access component documentation and examples.41,095MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI assistants to discover, install, and generate code examples for shadcn/ui components, providing installation commands and usage examples for 37+ React UI components.MIT
- FlicenseAqualityDmaintenanceProvides AI assistants with direct access to shadcn/ui components and blocks, enabling real-time fetching of component source code, documentation, and implementation examples.4224-