Skip to main content
Glama
heilgar

Shadcn UI MCP Server

by heilgar

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
  1. 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:

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.

Available Tools

6 tools
get-block-docsD
ParametersJSON Schema
NameRequiredDescriptionDefault
blockYesName of the block to get documentation for

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get-component-docsD
ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesName of the component to get documentation for

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

install-blocksD
ParametersJSON Schema
NameRequiredDescriptionDefault
blockYesName of the block to install
runtimeNoUser runtime (npm, pnpm, yarn, bun)

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

install-componentD
ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesName of the component to install
runtimeNoUser runtime (npm, pnpm, yarn, bun)

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list-blocksD
ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

list-componentsD
ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

D1/5.0
Behavior1/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

Tool has no description.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness1/5

Is the description appropriately sized, front-loaded, and free of redundancy?

Tool has no description.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness1/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Tool has no description.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters1/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Tool has no description.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose1/5

Does the description clearly state what the tool does and how it differs from similar tools?

Tool has no description.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines1/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

Tool has no description.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 6 tool updatesv1.0.0
    • First observedget-block-docs
    • First observedget-component-docs
    • First observedinstall-blocks
    • First observedinstall-component
    • First observedlist-blocks
    • First observedlist-components

TDQS

C2.1/5.0

Scored across 6 tools

Disambiguation5/5

Each tool has a clearly distinct purpose with no overlap: get-block-docs and get-component-docs retrieve documentation, install-blocks and install-component handle installation, and list-blocks and list-components provide listings. The block/component distinction and action types (get, install, list) create unambiguous boundaries.

Naming Consistency5/5

All tools follow a perfect verb-noun pattern with consistent kebab-case formatting: get-block-docs, get-component-docs, install-blocks, install-component, list-blocks, list-components. The naming is completely predictable and follows the same structural convention throughout.

Tool Count4/5

Six tools is reasonable for a Shadcn UI server, covering documentation retrieval, installation, and listing for both blocks and components. While slightly minimal, it provides core functionality without being overwhelming. A few additional tools like update or search might enhance it but aren't essential.

Completeness4/5

The toolset covers the main workflows for Shadcn UI: discovering components/blocks (list), accessing documentation (get), and installation (install). Minor gaps exist, such as no update/uninstall tools or search functionality, but the core CRUD-like operations for this domain are well-represented.

Maintenance

ActivityInactive
ResponsivenessNo issues

Related MCP Connectors

Related MCP Servers