MCP Directory

How to add Shadcn UI v4 MCP Server to Claude Desktop

Give AI assistants full access to shadcn/ui v4 components, blocks, demos, and metadata across React, Svelte, Vue, and React Native. Paste the config into ~/Library/Application Support/Claude/claude_desktop_config.json and restart Claude Desktop.

Last updated June 14, 2026 · 2.8k★ · stdio · apikey

Claude Desktop config for Shadcn UI v4 MCP Server

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

Setup steps

  1. 1Open Claude Desktop → Settings → Developer → Edit Config (this opens ~/Library/Application Support/Claude/claude_desktop_config.json).
  2. 2Paste the Shadcn UI v4 MCP Server config below under the top-level "mcpServers" key.
  3. 3Fill in any placeholder secrets (API keys, paths) in the snippet.
  4. 4Save the file, then fully quit and reopen Claude Desktop.
  5. 5Open a chat and confirm Shadcn UI v4 MCP Server's tools appear under the 🔌 tools menu.

Before you start

  • Node.js >= 18.0.0
  • An MCP-compatible client (Claude Desktop, Claude Code, Cursor, VS Code, Continue.dev)
  • Optional: a GitHub Personal Access Token (no scopes needed) to raise the API rate limit to 5000 requests/hour

What Shadcn UI v4 MCP Server can do in Claude Desktop

get_component

Get the source code for a specific shadcn/ui component.

get_component_demo

Get example/demo code showing how to use a component.

list_components

List all available shadcn/ui components.

get_component_metadata

Get a component's dependencies, description, and configuration details.

get_block

Get a complete block implementation (e.g. dashboards, calendars, forms).

list_blocks

List all available blocks with their categories.

get_directory_structure

Explore the repository directory structure for components and blocks.

Security

Works without authentication at 60 GitHub API requests/hour. A GitHub Personal Access Token (no scopes required) is optional but recommended to raise the limit to 5000 requests/hour; pass it via the --github-api-key flag or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable. Avoid hardcoding the token in shared config files.

Shadcn UI v4 MCP Server + Claude Desktop FAQ

Where is the Claude Desktop config file?

Claude Desktop reads MCP servers from ~/Library/Application Support/Claude/claude_desktop_config.json. Paste the Shadcn UI v4 MCP Server config there under the "mcpServers" key and restart the client.

Is Shadcn UI v4 MCP Server safe to use with Claude Desktop?

Works without authentication at 60 GitHub API requests/hour. A GitHub Personal Access Token (no scopes required) is optional but recommended to raise the limit to 5000 requests/hour; pass it via the --github-api-key flag or the GITHUB_PERSONAL_ACCESS_TOKEN environment variable. Avoid hardcoding the token in shared config files.

Do I need a GitHub token?

No. The server works without one at 60 requests/hour. Adding a GitHub Personal Access Token (no scopes required) raises the limit to 5000 requests/hour, which is recommended for regular use.

Which frameworks are supported?

React (default, via shadcn/ui v4), Svelte (shadcn-svelte), Vue (shadcn-vue), and React Native (react-native-reusables). Select one with the --framework flag. For React you can also choose Radix UI or Base UI primitives via --ui-library.

What transport modes are available?

stdio (default, for CLI and editor integrations), sse (Server-Sent Events for HTTP/multi-client deployments), and dual (both simultaneously). The SSE server defaults to port 7423.

View repo Full Shadcn UI v4 MCP Server page