Shadcn UI MCP Server

Name: Shadcn UI MCP Server
Author: heilgar

@heilgar

リポジトリ

Shadcn UI MCP Server について

概要はまだありません

#shadcn-ui #mcp-server #ide-integration #component-library

基本情報

カテゴリ

その他

ライセンス

MIT

ランタイム

node

トランスポート

stdio

公開者

heilgar

設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

ツール

Get the list of available shadcn/ui components

Get documentation for a specific component

Install a shadcn/ui component

Get the list of available shadcn/ui blocks

Get documentation for a specific block

Install a shadcn/ui block

概要

What is Shadcn UI MCP Server?

An MCP (Model Control Protocol) server that enhances the development experience with Shadcn UI components. It provides tooling for listing, documenting, and installing shadcn/ui components and blocks, supporting multiple package managers. Designed for developers using shadcn/ui in their projects.

How to use Shadcn UI MCP Server?

Install and configure the server by adding a JSON entry to your AI client’s config (Claude Desktop, Windsurf, or Cursor). Use tools like list-components, get-component-docs, install-component, list-blocks, get-block-docs, and install-blocks through the MCP interface.

Key features of Shadcn UI MCP Server

List available shadcn/ui components and blocks
Get detailed documentation for specific components and blocks
Install components and blocks with one command
Supports npm, pnpm, yarn, and bun package managers
Automatic detection of the user’s preferred package manager
Debugging via the MCP Inspector tool

Use cases of Shadcn UI MCP Server

Quickly search and install a shadcn/ui component without leaving your editor
Browse block documentation and code before adding it to a project
Automate component installation across different package managers
Integrate shadcn/ui management into an AI-assisted workflow

FAQ from Shadcn UI MCP Server

What tools does the Shadcn UI MCP Server provide?

It provides six tools: list-components, get-component-docs, install-component, list-blocks, get-block-docs, and install-blocks.

How do I install the Shadcn UI MCP Server?

Run npx @heilgar/shadcn-ui-mcp-server and add the appropriate JSON configuration to your client (Claude Desktop, Windsurf, or Cursor). Configuration examples are provided for each.

What are the prerequisites?

Node.js version 18 or higher and a package manager (npm or yarn) are required.

What package managers are supported?

npm, pnpm, yarn, and bun are supported, with automatic detection of the user’s preferred manager.

How do I debug the server?

Use the MCP Inspector by running npm run inspector. It provides a URL to monitor communication, inspect tool calls, and view real‑time logs.

「その他」の他のコンテンツ

🚀 Model Context Protocol (MCP) Curriculum for Beginners

microsoft

This open-source curriculum introduces the fundamentals of Model Context Protocol (MCP) through real-world, cross-language examples in .NET, Java, TypeScript, JavaScript, Rust and Python. Designed for developers, it focuses on practical techniques for building modular, scalable,

16.7K