Shadcn UI MCP Server
Shadcn UI MCP-Server
Ein leistungsstarker und flexibler MCP-Server (Model Control Protocol), der die Entwicklung mit Shadcn-UI-Komponenten verbessert. Dieser Server bietet eine robuste Grundlage für die Erstellung und Verwaltung von UI-Komponenten mit erweiterten Tools und Funktionen.
Merkmale
Werkzeuge
Der MCP-Server bietet eine Reihe von Tools, die über das Model Control Protocol verwendet werden können:
list-components: Ruft die Liste der verfügbaren Shadcn/UI-Komponenten abget-component-docs: Dokumentation für eine bestimmte Komponente abrufeninstall-component: Installiert eine shadcn/ui-Komponentelist-blocks: Ruft die Liste der verfügbaren Shadcn/UI-Blöcke abget-block-docs: Dokumentation für einen bestimmten Block abrufeninstall-blocks: Installieren Sie einen Shadcn/UI-Block
Funktionalität
Komponentenverwaltung
Liste der verfügbaren Shadcn/UI-Komponenten
Erhalten Sie detaillierte Dokumentationen zu bestimmten Komponenten
Installieren Sie Komponenten mit Unterstützung für mehrere Paketmanager (npm, pnpm, yarn, bun).
Blockverwaltung
Liste der verfügbaren Shadcn/UI-Blöcke
Holen Sie sich Dokumentation und Code für bestimmte Blöcke
Installieren Sie Blöcke mit Unterstützung für mehrere Paketmanager
Paketmanager-Unterstützung
Flexible Laufzeitunterstützung für npm, pnpm, yarn und bun
Automatische Erkennung des bevorzugten Paketmanagers des Benutzers
Related MCP server: aceternityui-mcp
Installation
Voraussetzungen
Node.js (v18 oder höher)
npm oder yarn Paketmanager
Claude Desktop-Konfiguration
Zur Verwendung mit Claude Desktop fügen Sie die Serverkonfiguration hinzu:
Unter MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json Unter Windows: %APPDATA%/Claude/claude_desktop_config.json
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["@heilgar/shadcn-ui-mcp-server"]
}
}
}Windsurf-Konfiguration
Fügen Sie dies zu Ihrer ./codeium/windsurf/model_config.json hinzu:
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["@heilgar/shadcn-ui-mcp-server"]
}
}
}Cursorkonfiguration
Fügen Sie dies zu Ihrer .cursor/mcp.json hinzu:
{
"mcpServers": {
"shadcn-ui-server": {
"command": "npx",
"args": ["@heilgar/shadcn-ui-mcp-server"]
}
}
}Entwicklung und Debugging
Lokale Entwicklung
Installieren Sie Abhängigkeiten:
npm installErstellen Sie den Server:
npm run buildDebuggen
Da MCP-Server über stdio kommunizieren, kann das Debuggen eine Herausforderung darstellen. Wir empfehlen die Verwendung des MCP Inspector zum Debuggen:
npm run inspectorDer Inspector stellt eine URL für den Zugriff auf Debugging-Tools in Ihrem Browser bereit, die Ihnen Folgendes ermöglicht:
Überwachen Sie die MCP-Kommunikation
Überprüfen Sie Tool-Aufrufe und -Antworten
Debuggen des Serververhaltens
Echtzeitprotokolle anzeigen
Zugehörige Projekte und Abhängigkeiten
Dieses Projekt wurde mit den folgenden Tools und Bibliotheken erstellt:
Model Context Protocol TypeScript SDK – Das offizielle TypeScript SDK für MCP-Server und -Clients
MCP Inspector – Ein Debugging-Tool für MCP-Server
Cheerio – Schnelle, flexible und schlanke Implementierung des Core-jQuery, speziell für den Server entwickelt
Lizenz
MIT-Lizenz – Sie können dieses Projekt gerne für Ihre eigenen Zwecke verwenden.
Beitragen
Beiträge sind willkommen! Senden Sie gerne einen Pull Request.
Available Tools
6 toolsget-block-docsD
| Name | Required | Description | Default |
|---|---|---|---|
| block | Yes | Name of the block to get documentation for |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get-component-docsD
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Name of the component to get documentation for |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
install-blocksD
| Name | Required | Description | Default |
|---|---|---|---|
| block | Yes | Name of the block to install | |
| runtime | No | User runtime (npm, pnpm, yarn, bun) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
install-componentD
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Name of the component to install | |
| runtime | No | User runtime (npm, pnpm, yarn, bun) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list-blocksD
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
list-componentsD
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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?
Tool has no description.
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.
6 tool updates
v1.0.0- First observed
get-block-docs - First observed
get-component-docs - First observed
install-blocks - First observed
install-component - First observed
list-blocks - First observed
list-components
TDQS
Scored across 6 tools
Each tool has a clearly distinct purpose with no overlap: get-block-docs and get-component-docs retrieve documentation, install-blocks and install-component handle installation, and list-blocks and list-components provide listings. The block/component distinction and action types (get, install, list) create unambiguous boundaries.
All tools follow a perfect verb-noun pattern with consistent kebab-case formatting: get-block-docs, get-component-docs, install-blocks, install-component, list-blocks, list-components. The naming is completely predictable and follows the same structural convention throughout.
Six tools is reasonable for a Shadcn UI server, covering documentation retrieval, installation, and listing for both blocks and components. While slightly minimal, it provides core functionality without being overwhelming. A few additional tools like update or search might enhance it but aren't essential.
The toolset covers the main workflows for Shadcn UI: discovering components/blocks (list), accessing documentation (get), and installation (install). Minor gaps exist, such as no update/uninstall tools or search functionality, but the core CRUD-like operations for this domain are well-represented.
Maintenance
Related MCP Connectors
A comprehensive Model Context Protocol (MCP) server that enables AI assistants to interact with yo…
MCP server connecting AI agents to 100+ apps (Gmail, Slack, Notion, GitHub) via one-click OAuth.
MCP server for building and testing AI agents with multi-model experimentation and insights.
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.
Related MCP Servers
- AlicenseCqualityDmaintenanceA Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.340 npm7ISC
- AlicenseAqualityFmaintenanceAn MCP server that enables AI assistants to search, discover, and install Aceternity UI components programmatically.575 npm25MIT
- AlicenseNot gradedqualityDmaintenanceThis MCP server provides tools to install and manage shadcn/ui components directly from AI coding agents.2MIT
- AlicenseAqualityCmaintenanceA secure MCP server that gives AI coding assistants direct access to the shadcn/ui registry, enabling fetching, installing, and wiring up components without switching context.822 npm4MIT