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 ab
get-component-docs : Dokumentation für eine bestimmte Komponente abrufen
install-component : Installiert eine shadcn/ui-Komponente
list-blocks : Ruft die Liste der verfügbaren Shadcn/UI-Blöcke ab
get-block-docs : Dokumentation für einen bestimmten Block abrufen
install-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

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 install

Erstellen Sie den Server:

npm run build

Debuggen

Da MCP-Server über stdio kommunizieren, kann das Debuggen eine Herausforderung darstellen. Wir empfehlen die Verwendung des MCP Inspector zum Debuggen:

npm run inspector

Der 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.

Install Server

HTTP connection URL

security – no known vulnerabilities

license - permissive license

quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

Ein Model Control Protocol-Server, der es Benutzern ermöglicht, Shadcn-UI-Komponenten und -Blöcke durch natürliche Sprachinteraktionen in kompatiblen KI-Tools zu entdecken, zu installieren und zu verwalten.

Related MCP Servers

Metabase MCP Server
sazboxai
-
security
F
license
-
quality
A Model Control Protocol server that enables AI assistants to interact with Metabase databases, allowing models to explore database schemas, retrieve metadata, visualize relationships, and execute actions.
Last updated -
4
Python
shadcn-ui MCP Server
ymadd
A
security
A
license
A
quality
Helps 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.
Last updated -
4
320
57
JavaScript
MIT License
SupaUI MCP Server
buoooou
A
security
F
license
A
quality
A Model Context Protocol server that enables AI agents to generate, fetch, and manage UI components through natural language interactions.
Last updated -
3
680
4
TypeScript
Blender Open MCP
dhakalnirajan
-
security
F
license
-
quality
A server that integrates Blender with local AI models via the Model Context Protocol, allowing users to control Blender using natural language prompts for 3D modeling tasks.
Last updated -
43
Python

View all related MCP servers

Shadcn UI MCP Server