Shadcn UI MCP-Server

Integrations

Supports using Bun as a package manager when installing shadcn/ui components and blocks
Integrates with Windsurf (part of Codeium) through MCP configuration
Supports using npm as a package manager when installing shadcn/ui components and blocks

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.

You must be authenticated.

security – no known vulnerabilities

license - not found

quality - confirmed to work

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

Command Executor MCP Server
Sunwood-ai-labs
A
security
F
license
A
quality
A Model Context Protocol server that allows secure execution of pre-approved commands, enabling AI assistants to safely interact with the user's system.
Last updated -
1
3
18
JavaScript
Godot MCP
Coding-Solo
-
security
A
license
-
quality
A Model Context Protocol server that enables AI assistants to interact with the Godot game engine, allowing them to launch the editor, run projects, capture debug output, and control project execution.
Last updated -
62
JavaScript
MIT License
MCP Toolkit
zxfgds
-
security
F
license
-
quality
A comprehensive Model Context Protocol server implementation that enables AI assistants to interact with file systems, databases, GitHub repositories, web resources, and system tools while maintaining security and control.
Last updated -
16
TypeScript
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 -
2
Python

View all related MCP servers

Shadcn UI MCP Server