广告合作
MCP.so
登录

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 工具

4

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

常见问题

1

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.

2

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.

3

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.

4

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.

5

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.

评论

其他 分类下的更多 MCP 服务器

Awesome Mlops

visenger

A curated list of references for MLOps

14.0K

Screenpipe

screenpipe

YC (S26) | Open Computer History | Continuously record your company computer work, map your workflows, help you find work worth automating, and power your agents' context

22.0K

Sequential Thinking

modelcontextprotocol

Model Context Protocol Servers

88.2K

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

Glasswarp

Glasswarp

See and control a real Windows PC you own — from any MCP client, locally or remotely. Observe (UIA + screenshots), click/type/drag/scroll, launch apps, owner Live View. BYOH: your machine, your key.

广告合作