shadcn-ui MCP Server

@ymadd

リポジトリ

基本情報

カテゴリ

その他

ライセンス

MIT

トランスポート

stdio

作者

ymadd

shadcn-ui MCP Server について

MCP server for shadcn/ui component references

#shadcn-ui #mcp-server

shadcn-ui MCP Server の設定

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

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

shadcn-ui MCP Server のツール

Get a list of all available shadcn/ui components

Get detailed information about a specific shadcn/ui component

Get usage examples for a specific shadcn/ui component

Search for shadcn/ui components by keyword

概要

What is shadcn-ui MCP Server?

A TypeScript-based MCP server that provides reference information for shadcn/ui components. It implements the Model Context Protocol to help AI assistants access shadcn/ui component documentation, examples, and code samples by scraping the official documentation site and GitHub repository.

How to use shadcn-ui MCP Server?

Install dependencies with npm install, then build with npm run build. Configure the server in Claude Desktop, Windsurf, or Cursor by adding a JSON entry to the respective configuration file, pointing either to the local build or using the npx command npx -y shadcn-ui-mcp-server.

Key features of shadcn-ui MCP Server

Lists all available shadcn/ui components
Retrieves detailed component information (descriptions, installation steps)
Provides usage examples with code samples
Searches components by keyword
Caches scraped data from official sources

Use cases of shadcn-ui MCP Server

AI assistants answering questions about shadcn/ui components
Developers quickly fetching component installation instructions and props
Searching for components that match a specific UI need
Generating code examples for shadcn/ui usage in projects

よくある質問

What does the shadcn-ui MCP Server do?

It offers tools for AI assistants to list, search, and retrieve detailed reference information about shadcn/ui components, including descriptions, installation instructions, props, and usage examples.

How do I install and configure the server?

Install via `npm install` and build with `npm run build`. Configuration files differ per client: for Claude Desktop, edit `claude_desktop_config.json`; for Windsurf, edit `model_config.json`; for Cursor, edit `.cursor/mcp.json`. Use either a local build path or the npx command.

Where does the component data come from?

The server scrapes and caches information from the official shadcn/ui documentation site (https://ui.shadcn.com) and the shadcn/ui GitHub repository.

What are the runtime dependencies?

Node.js and npm are required. The server is written in TypeScript and relies on the MCP SDK. The README does not specify a minimum Node version.

How can I debug the server?

Use the MCP Inspector by running `npm run inspector`, which provides a URL to access debugging tools. Because MCP servers communicate over stdio, the Inspector is the recommended debugging method.

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

Reactive Resume

amruthpillai

A one-of-a-kind resume builder that keeps your privacy in mind. Completely secure, customizable, portable, open-source and free forever. Try it out today!

39.5K

Yuppsy

Yuppsy MCP: build and publish real estate websites from your AI assistant. Yuppsy lets your AI assistant create live websites for real estate agents and individual property listings. You don't need a designer or any code

Activepieces

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

23.2K