shadcn-ui MCP Server

You can deploy the server using Docker Compose. This is recommended for production-ready environments.

Quick Start:

1. Build and start the container in detached mode.
2. Verify health via the /health endpoint.
3. Test the SSE connection using curl.

Production Deployment: To start with an Nginx proxy, use the production profile: docker-compose --profile production up -d

# Build and start
docker-compose up --build -d

# Check health
curl http://localhost:7423/health

# Test SSE connection
curl -N -H "Accept: text/event-stream" http://localhost:7423/sse

You can run the shadcn/ui MCP server using npx. Depending on your needs, you can use basic usage (limited to 60 requests/hour) or provide a GitHub API token to increase the limit to 5000 requests/hour. You can also specify different frameworks like Svelte, Vue, or React Native.

# Basic usage (60 requests/hour)
npx @jpisnice/shadcn-ui-mcp-server

# With GitHub token (5000 requests/hour) - Recommended
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

# Switch 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

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

You can add the shadcn/ui MCP server directly to the Claude Code terminal using the claude mcp add command. It is highly recommended to include a GitHub API key to increase your request limit from 60 to 5000 requests per hour.

# Add the shadcn-ui MCP server with GitHub token
claude mcp add shadcn -- bunx -y @jpisnice/shadcn-ui-mcp-server --github-api-key YOUR_API_KEY

The shadcn-ui-mcp-server supports multiple frameworks. You can specify the target framework using the --framework CLI flag or the FRAMEWORK environment variable. If no framework is specified, it defaults to React.

# Using CLI flags
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

# Using Environment Variables
export FRAMEWORK=svelte
npx @jpisnice/shadcn-ui-mcp-server

The server supports complex queries including:

• Fetching a component along with its full dependency tree.
• Comparing component implementations across different frameworks (e.g., React vs Svelte).
• Requesting customization examples for specific components.

"Compare the button component between React and Svelte"
"Get the button component with all its dependencies"
"Show me how to customize the button component"

You can provide your GitHub token using three different methods: a CLI flag, an environment variable, or a single command prefix.

### Method 1: Command Line (Quick testing)
```bash
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here

Method 2: Environment Variable (Recommended)

# Add to your shell profile (~/.bashrc, ~/.zshrc, etc.)
export GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here

# Then simply run:
npx @jpisnice/shadcn-ui-mcp-server

Method 3: Single Command

GITHUB_PERSONAL_ACCESS_TOKEN=ghp_your_token_here npx @jpisnice/shadcn-ui-mcp-server

If you need the full source code including all sub-components required for a block to function, explicitly ask for the block 'with all its component files' or 'with all dependencies'.

"Get the dashboard-01 block with all its component files"
"Get the login-02 block with all dependencies"

To use the shadcn/ui MCP Server with the Continue extension in VS Code, install the 'Continue' extension from the marketplace, open the Command Palette (Ctrl+Shift+P), select 'Continue: Configure', and add the server configuration to your settings. Using a GitHub API token via the --github-api-key flag is recommended to increase rate limits.

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

For an instant installation in Claude Desktop, use the .mcpb package:

1. Download shadcn-ui-mcp-server.mcpb from the Releases page.
2. Double-click the file to open Claude Desktop automatically.
3. Enter your GitHub token (optional) and click Install.

Manual Installation: Open Claude Desktop → Settings → MCP → Add Server → Browse → Select the .mcpb file.

The server supports multiple frameworks. You can specify the target framework using the --framework (or -f) flag or by setting the FRAMEWORK environment variable. Supported values are react (default), svelte, vue, and react-native.

# React (default)
npx @jpisnice/shadcn-ui-mcp-server

# Svelte
npx @jpisnice/shadcn-ui-mcp-server --framework svelte

# Vue
npx @jpisnice/shadcn-ui-mcp-server --framework vue

# React Native
npx @jpisnice/shadcn-ui-mcp-server --framework react-native

The server supports three transport modes to handle client connections. You can switch modes using the --mode CLI argument or the MCP_TRANSPORT_MODE environment variable.

1. stdio (Default): Standard input/output transport. Use this for local CLI-based integrations.
2. sse (Server-Sent Events): HTTP/SSE transport. Enables multi-client real-time connections over a network.
3. dual: Enables both stdio and sse simultaneously.

Components can be discovered by requesting specific functional categories such as Form, Layout, or Navigation components.

"Show me all form-related components"
"Show me all layout components"
"Show me all navigation components"