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

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

1. Installieren Sie Abhängigkeiten:

npm install

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