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).

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

Peekaboo MCP – lightning-fast macOS screenshots for AI agents

steipete

Peekaboo is a macOS CLI & optional MCP server that enables AI agents to capture screenshots of applications, or the entire system, with optional visual question answering through local or remote AI models.

4.8K

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