shadcn/ui MCP Server

What is shadcn/ui MCP Server?

shadcn/ui MCP Server is a community shadcn MCP server that gives AI assistants the source code, demos, blocks and metadata of shadcn/ui v4 components, plus the Svelte, Vue and React Native ports. It is an unofficial open-source project by Janardhan Polle (Jpisnice), MIT licensed.

The server reads component code from the upstream GitHub repositories, so your assistant writes UI against the real, current shadcn ui MCP sources instead of guessing from training data. It runs locally over stdio by default and can also serve Streamable HTTP for multi-client setups.

How to use shadcn/ui MCP Server?

You need Node.js 20 or newer. A GitHub personal access token is optional but recommended: without it the server is limited to 60 GitHub API requests per hour, with it 5,000. The token needs no scopes; create one at https://github.com/settings/tokens and pass it with --github-api-key or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable.

Run it directly with npx:

npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Other frameworks
npx @jpisnice/shadcn-ui-mcp-server --framework svelte
npx @jpisnice/shadcn-ui-mcp-server --framework vue
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

# Base UI instead of Radix (React only)
npx @jpisnice/shadcn-ui-mcp-server --ui-library base

Claude Code

claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_TOKEN

For a server running in HTTP mode:

node build/index.js --mode http --port 7423
claude mcp add --scope user --transport http shadcn-mcp-server http://localhost:7423/mcp

Claude Desktop

Download shadcn-ui-mcp-server.mcpb from the project's GitHub Releases and double-click it, or add this to claude_desktop_config.json:

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

Cursor

Open Cursor Settings, search for MCP, and add:

{
  "mcpServers": {
    "shadcn-ui": {
      "command": "npx",
      "args": [
        "@jpisnice/shadcn-ui-mcp-server",
        "--github-api-key",
        "ghp_your_token_here"
      ]
    }
  }
}

VS Code

Run "MCP: Add Server...", choose "NPM Package" and enter @jpisnice/shadcn-ui-mcp-server. The resulting mcp.json entry looks like this (works with Copilot Chat):

{
  "servers": {
    "shadcn-ui-mcp-server": {
      "command": "npx",
      "args": ["@jpisnice/shadcn-ui-mcp-server", "--framework", "react", "--ui-library", "radix"],
      "env": { "GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}" },
      "type": "stdio"
    }
  },
  "inputs": [
    { "id": "github_token", "type": "promptString", "description": "GitHub Personal Access Token" }
  ]
}

Key features of shadcn/ui MCP Server

• Four frameworks: React (shadcn/ui v4, default), Svelte (shadcn-svelte), Vue (shadcn-vue) and React Native (react-native-reusables), selected with --framework.
• Radix UI or Base UI primitives for React via --ui-library or UI_LIBRARY.
• Component source code, demo code and metadata such as dependencies.
• Full block implementations, for example dashboard-01 and calendar-01.
• tweakcn theme presets that can be listed, inspected and applied.
• Caching and rate-limit handling for GitHub API calls.
• Transports: stdio (default), http (stateless Streamable HTTP at /mcp, default port 7423) and dual; Docker and Docker Compose files included.
• One-click .mcpb install for Claude Desktop.

shadcn/ui MCP Server tools

• Component tools: list_components returns every available component, get_component returns a component's source, get_component_demo returns example usage, and get_component_metadata returns dependencies and descriptions.
• Block tools: list_blocks lists blocks by category and get_block returns the full code of a block such as dashboard-01.
• Repository tool: get_directory_structure browses the upstream repository tree.
• Theme tools: list_themes and get_theme read tweakcn themes; apply_theme writes a theme preset's CSS into your project and supports a dryRun option.

Use cases of shadcn/ui MCP Server

• Building a feature with real components: "Get the card component with usage examples and build a pricing card."
• Starting a page from a block: "Get the dashboard-01 block implementation and adapt it to my analytics data."
• Component discovery: "List all available shadcn/ui components and suggest which to use for a settings page."
• Cross-framework work: "Compare the button component between React and Svelte" or "Show me the Vue version of the card component."
• Theming: preview a tweakcn preset with apply_theme in dry-run mode before writing CSS.
• Team setups: run one HTTP instance in Docker and point several clients at /mcp.

shadcn/ui MCP Server vs alternatives

shadcn now ships an official shadcn MCP server as part of its CLI (docs). It focuses on registries: browsing, searching and installing items from the registries in your components.json, set up with npx shadcn@latest mcp init --client claude (also cursor, vscode, codex, opencode). Choose the official server if you mainly want to install registry components into a project. Choose this community shadcn mcp server if you want raw component and block source, demos, tweakcn themes, or the Svelte, Vue and React Native ports. The two can run side by side.

Troubleshooting shadcn/ui MCP Server

• Rate limit errors: add a GitHub token with --github-api-key or GITHUB_PERSONAL_ACCESS_TOKEN to raise the limit from 60 to 5,000 requests per hour.
• Server won't start: check node --version (20+ is required since 3.0.0) and npx --version.
• Wrong framework: the startup log names the active framework, e.g. INFO: MCP Server configured for SVELTE framework. Logs go to stderr, so check your client's MCP logs.
• 404 on /sse: the legacy SSE transport was removed; connect to http://<host>:7423/mcp with the http transport.
• -32022 Unsupported protocol version: the client uses the 2025-era protocol while the server runs with --protocol modern; use --protocol any (the default).