Shadcn UI MCP Server

Name: Shadcn UI MCP Server
Author: Jpisnice

@Jpisnice

关于 Shadcn UI MCP Server

A mcp server to allow LLMS gain context about shadcn ui component structure,usage and installation,compaitable with react,svelte 5,vue & React Native

#typescript #ui #ai #mcp #ts #webdev #shadcn-ui #modelcontextprotocol

基本信息

分类

其他

许可证

MIT

运行时

node

传输方式

stdio

发布者

Jpisnice

配置

使用下面的配置,将此服务器添加到你的 MCP 客户端。

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

工具

未检测到工具

工具是从 README 中自动提取的。维护者可以在 ## Tools 标题下列出工具,即可填充这部分内容。

概览

What is Shadcn UI MCP Server?

Shadcn UI MCP Server is a Model Context Protocol (MCP) server that gives AI assistants comprehensive access to shadcn/ui v4 components, blocks, demos, and metadata. It supports React, Svelte, Vue, and React Native implementations, making it suitable for developers building UIs with AI-powered workflows.

How to use Shadcn UI MCP Server?

Run the server with npx @jpisnice/shadcn-ui-mcp-server (optionally with --github-api-key for higher rate limits). Switch frameworks via --framework svelte (or vue, react-native). Use --mode sse for HTTP-based multi-client support. Integrate with Claude Desktop via a one-click .mcpb file or with Claude Code using claude mcp add. Configuration uses environment variables like GITHUB_PERSONAL_ACCESS_TOKEN and UI_LIBRARY.

Key features of Shadcn UI MCP Server

Multi‑framework support (React, Svelte, Vue, React Native)
Latest shadcn/ui v4 TypeScript source code
Component demos with usage patterns
Complete block implementations (dashboards, calendars, forms)
Metadata access (dependencies, descriptions, configuration)
SSE transport and Docker Compose for production deployments

Use cases of Shadcn UI MCP Server

AI‑powered UI development with shadcn/ui components
Multi‑client deployments using SSE transport
Production environments with Docker Compose health checks
Component discovery and comparison across frameworks
Rapid prototyping with pre‑built blocks and code generation

FAQ from Shadcn UI MCP Server

What frameworks are supported?

React (default), Svelte, Vue, and React Native. Switch with the --framework flag.

How do I get a GitHub token?

Generate a token at github.com/settings/tokens (no scopes needed). Use it with --github-api-key or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable.

What transport modes are available?

stdio (default) for CLI, sse for HTTP, and dual for both simultaneously.

Can I run this in production with Docker?

Yes. The server includes a Docker Compose file with health checks. Run docker-compose up -d and expose port 7423.

What is the default UI library for React?

Radix UI is the default. Use --ui-library base to switch to Base UI (React only).

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

Inbox Zero AI

elie222

The world's best AI personal assistant for email. Open source app to help you reach inbox zero fast.

11.6K

Awesome-MCP-ZH

yzfly

MCP 资源精选， MCP指南，Claude MCP，MCP Servers, MCP Clients

7.4K

Unity MCP ✨

justinpbarnett

Unity MCP acts as a bridge between AI assistants and your Unity Editor. Give your LLM tools to manage assets, control scenes, edit scripts, and automate tasks within Unity.

12.2K