shadcn/ui MCP Server — Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

Echtzeit-Abruf der Komponentenquelle aus der shadcn/ui-Registry
Multi-Framework: React, Vue, Svelte 5, React Native
Komponenten-Abhängigkeitsgraph (z. B. Dialog benötigt Portal)
Installationsbefehl pro Package-Manager (npm/pnpm/yarn/bun)
Beispiele und Demo-Quellen, nicht nur die bare Komponente
Block-Templates (Auth-Seiten, Dashboards) enthalten

Live-Demo

In der Praxis

shadcn-ui-mcp.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "shadcn-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "shadcn-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@jpisnice/shadcn-ui-mcp-server"
      ]
    }
  ]
}

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: shadcn/ui MCP Server

Ein shadcn/ui-Formular ohne API-Drift scaffolden

👤 Frontend-Entwickler, die React/Next-Apps bauen ⏱ ~20 min intermediate

Wann einsetzen: Ein Formular mit react-hook-form + Zod soll gebaut werden, aber Claude verwendet immer veraltete shadcn-Imports.

Voraussetzungen

Next.js / Vite-App mit initialisiertem shadcn/ui — npx shadcn@latest init

Ablauf

Aktuelle Formularquelle holen

shadcn-ui MCP: aktuelle Quelle für form (React) und seine Abhängigkeiten abrufen. Installationsbefehl anzeigen.✓ Kopiert

→ Neueste Quelle zurückgegeben; Abhängigkeitsliste enthält react-hook-form, zod
Formular bauen

Jetzt ein SignupForm mit genau diesen APIs bauen. E-Mail + Passwort + Terms-Checkbox; Zod-Schema mit Validierungsnachrichten. Keine erfundenen Imports.✓ Kopiert

→ Komponente kompiliert gegen aktuelle shadcn-Version
Prüfen

tsc --noEmit ausführen und nicht aufgelöste Imports melden.✓ Kopiert

→ Sauberer TS-Check

Ergebnis: Ein funktionierendes Formular gegen die aktuelle shadcn/ui-API — keine falschen Import-Pfade.

Fallstricke

Projekt verwendet eine ältere shadcn-Version — Via --registry pinnen oder das Upgrade akzeptieren und shadcn upgrade ausführen

Kombinieren mit: filesystem

Einen shadcn-Block (Auth/Dashboard) einbinden

👤 Entwickler, die fertige Layouts brauchen ⏱ ~15 min beginner

Wann einsetzen: Eine vollständige Login-Seite oder ein Dashboard-Layout wird benötigt, nicht nur eine Komponente.

Ablauf

Blocks durchsuchen

shadcn-ui: verfügbare Blocks auflisten. Ich möchte ein Sidebar-Dashboard-Layout.✓ Kopiert

→ Block-Liste mit Namen + Previews
Abrufen und anpassen

Quelle für sidebar-07 abrufen. An meine Routen anpassen — Demo-Links durch /dashboard, /clients, /settings ersetzen.✓ Kopiert

→ Block-Code zurückgegeben; meine Pfade eingesetzt

Ergebnis: Vollständiges Dashboard-Layout, angepasst für die App, in unter 10 Minuten.

Fallstricke

Block hängt von nicht installierten Komponenten ab — MCP gibt die Abhängigkeitsliste zurück; fehlende zuerst installieren

Kombinieren mit: filesystem

shadcn-Nutzung einer React-App nach Svelte portieren

👤 Entwickler, die Frameworks migrieren ⏱ ~30 min advanced

Wann einsetzen: Von Next zu SvelteKit gewechselt und shadcn-svelte-Äquivalente werden benötigt.

Ablauf

Komponenten mappen

Die Komponenten auflisten, die die App aus @/components/ui importiert. Für jede das Svelte-5-Äquivalent über shadcn-ui MCP abrufen.✓ Kopiert

→ Komponente-für-Komponente-Zuordnung mit Hinweisen auf API-Unterschiede
Ein Beispiel übersetzen

Diese React-Formular-Nutzung in die Svelte-Version mit der aktuellen API übersetzen.✓ Kopiert

→ Idiomatischer Svelte-5-Code

Ergebnis: Migrationsplan + Referenzübersetzung für das Team.

Fallstricke

Einige Komponenten gibt es noch nicht im Svelte-Port — MCP sagt "not found"; diese für manuellen Port markieren

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

shadcn-ui-mcp + filesystem

Komponenten direkt in das Repository generieren

shadcn: Formular abrufen. Filesystem: Code in src/components/SignupForm.tsx mit meinem Schema schreiben.✓ Kopiert

shadcn-ui-mcp + github

PR für ein UI-Refactoring mit aktueller shadcn-API

Aktuelle Dialog-API abrufen. src/components/Modal.tsx entsprechend umstrukturieren. PR öffnen.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
list_components	framework?: react\|vue\|svelte\|react-native	Discovery	1 Fetch
get_component	name: str, framework?: str	Vor dem Schreiben von Code	1 Fetch
get_component_demo	name: str, framework?: str	Echte Nutzung sehen	1 Fetch
list_blocks	framework?: str	Fertige Layouts finden	1 Fetch
get_block	name: str	Layout einbinden	1 Fetch

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: GitHub-Raw-Fetches (60/Stunde nicht authentifiziert, 5000/Stunde authentifiziert)
Tokens pro Aufruf: 300–4000 (Komponentenquelle kann groß sein)
Kosten in €: Kostenloser Open Source
Tipp: GITHUB_PERSONAL_ACCESS_TOKEN setzen, um das 60/Stunden-Limit zu umgehen

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Optionaler GitHub-Token für erhöhtes Rate-Limit

Datenabfluss: github.com (raw und api)

Niemals gewähren: repo:write

MCP holt nur öffentlichen Code — schreibt nicht in das Repository, außer wenn mit filesystem kombiniert

Fehlerbehebung

Häufige Fehler und Lösungen

Rate-Limit überschritten

GITHUB_PERSONAL_ACCESS_TOKEN-Env-Variable setzen

Komponente im Framework nicht gefunden

Vue/Svelte-Ports hinken React hinterher; list_components für das Framework prüfen

Zurückgegebene Quelle verwendet andere API als das Projekt

Projekt ist auf älterem shadcn; entweder upgraden oder auf alte Registry-Version pinnen

Alternativen

shadcn/ui MCP Server vs. andere

Alternative	Wann stattdessen	Kompromiss
Magic MCP (21st Dev)	Breitere UI-Generierung gewünscht, nicht nur shadcn	Meinungsstarker; schwerer
Component MCP (eigene Registry)	Internes Design-System vorhanden	Selbst bauen erforderlich

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen