Shadcn UI MCP Server

Was ist der Shadcn UI MCP-Server?

Der Shadcn UI MCP-Server ist ein Open-Source-MCP-Server, der shadcn/ui-Komponenten und verwandte Ressourcen für KI-Anwendungen zugänglich macht. Er ermöglicht Sprachmodellen und intelligenten Agenten, programmatisch den Quellcode von Komponenten abzurufen, Demo-Verwendungsbeispiele anzuzeigen und Installationsskripte oder framework-spezifische Anleitungen über eine standardisierte Schnittstelle zu generieren. Dies erleichtert die nahtlose Integration von Wissen über shadcn/ui-Komponenten in KI-gesteuerte Arbeitsabläufe und Code-Assistenten.

So konfigurieren Sie

1. Klone das Repository in Ihre Entwicklungsumgebung.

2. Stellen Sie sicher, dass Node.js (v18 oder neuer) und npm installiert sind.

3. Installieren Sie die Abhängigkeiten mit:

   npm install
   

4. Kompilieren und starten Sie den Server mit:

   bash startup.sh
   

   oder die gleichen Schritte einzeln ausführen:

   npm run clean
   npm run build
   npm run start
   

5. Um die Integration mit anderen Anwendungen (z. B. VS Code Agent Modus) zu aktivieren, konfigurieren Sie Ihren Client (wie VS Codes settings.json), um sich mit dem SSE-Endpunkt zu verbinden, z. B.:

   "mcp": {
       "servers": {
           "shadcnui": {
               "type": "sse",
               "url": "http://localhost:3001/sse"
           }
       }
   }
   

6. Optional: Verwenden Sie den integrierten MCP-Inspektor (standardmäßig unter http://127.0.0.1:6274) für interaktives Debugging und Serverinspektion.

So verwenden Sie es

1. Starten Sie den Server und stellen Sie sicher, dass er läuft (standardmäßiger SSE-Endpunkt unter http://localhost:3001/sse).
2. Stellen Sie in Ihrem KI-Tool, Ihrer IDE oder Ihrem Assistenten (wie VS Code im Agent Modus) sicher, dass der MCP-Server korrekt als externer Toolanbieter konfiguriert ist.
3. Verwenden Sie verfügbare Befehle, um:
   • Alle shadcn/ui UI-Komponenten aufzulisten
   • Den Quellcode einer beliebigen Komponente abzurufen (z. B. button, accordion)
   • Demo-Code und Verwendung Beispiele für Komponenten abzurufen
   • Installationsskripte spezifisch für den Paketmanager zu generieren
   • Framework-spezifische Installationsanleitungen anzufordern
4. Testen Sie API-Endpunkte direkt (für Entwickler) mithilfe von curl, Browser oder Inspektor UI, um die Funktionalität zu überprüfen.
5. Analysieren Sie Antworten und integrieren Sie Ergebnisse in Ihren Coding-Workflow oder KI-gesteuerten Entwicklungsprozess.

Hauptfunktionen

• Direkter Zugriff auf den neuesten Quellcode von shadcn/ui-Komponenten aus dem offiziellen GitHub-Repository.
• Abruf von Demo-Code und praktischen Anwendungsbeispielen für eine schnelle Prototypenerstellung nach Bedarf.
• Generierung von Installationsanleitungen, die auf Ihren bevorzugten Paketmanager (npm, yarn, pnpm, bun) zugeschnitten sind.
• Framework-spezifische Installationsanleitungen für unterstützte Umgebungen (Next.js, Vite, Remix und andere).
• Einfach zu bedienender MCP-Server mit bewährter Fehlerbehandlung und Erweiterbarkeit zum Hinzufügen neuer Tools oder Ressourcen.
• Nahtlose Integration mit Entwicklungstools und KI-Assistenten, einschließlich VS Code Agent Modus.

Anwendungsfälle

• KI-Coding-Assistenten: Antrieb von KI-Tools oder Chatbots, die Entwicklern helfen, shadcn/ui-Komponenten in ihrem Code zu erkunden, einzufügen oder zu ändern.
• IDE-Integration: Ermöglichung von In-Editor-Workflows zum Abrufen des Quellcodes von Komponenten oder Demos und zur Generierung von Installationsskripten in Echtzeit.
• Automatisierte Projektbereitstellung: Ermöglichung von Bots oder Skripten, um programmgesteuert Installationsschritte für spezifische Frameworks und Paketmanager vorzubereiten.
• Entwickler-Lernwerkzeuge: Bereitstellung aktueller Code-Snippets und Anleitungen für Bildungsanwendungen oder Dokumentationsgeneratoren.
• KI-gesteuertes Refactoring von Code: Unterstützung bei Komponenteninupgrades oder Migrationsaufgaben durch Bereitstellung von immer aktuellen Quellcodes von Komponenten.

FAQ

Q1: Wie findet der Server die neueste Version von Komponenten?
Der Server ruft Komponenteninfromationen direkt aus dem shadcn/ui GitHub-Repository ab und verwendet mehrere Suchstrategien, um sich an die Art und Weise anzupassen, wie Komponenten gespeichert oder benannt sind.

Q2: Was soll ich tun, wenn ein Komponentenname nicht gefunden wird oder einen Fehler zurückgibt?
Überprüfen Sie den Komponentennamen, wie er in der offiziellen shadcn/ui-Bibliothek erscheint. Wenn es weiterhin Fehler gibt, überprüfen Sie die Struktur des shadcn/ui-Repos oder suchen Sie nach kürzlichen Umbenennungen oder Abwertungen.

Q3: Kann ich den Server erweitern, um neue Tools oder Ressourcen hinzuzufügen?
Ja, der Server ist für Erweiterbarkeit konzipiert. Sie können neue Tools zu tools.ts, Ressourcen zu resources.ts und Ressourcen-Templates zu resource-templates.ts hinzufügen.

Q4: Ist dieser Server produktionsbereit?
Obwohl robust, ist dieses Projekt hauptsächlich für lokale Entwicklung, Experimentierung und Integration von Assistenten konzipiert. Bei der Bereitstellung in der Produktion überprüfen und verstärken Sie die Sicherheit und Fehlerbehandlung.

Q5: Wie debugge ich Probleme mit dem Server oder seiner Integration?
Nutzen Sie den MCP-Inspektor unter http://127.0.0.1:6274, überwachen Sie die Konsolenprotokolle und stellen Sie sicher, dass der Netzwerkzugang sowohl zu Ihrer Entwicklungsumgebung als auch zum shadcn/ui GitHub-Repository korrekt ist.