shadcn MCP server

ui.shadcn.com

Lets an agent browse, search, and install items from shadcn/ui and any registry configured in components.json.

Before you start

Run it in a project with a valid components.json. The server reads the registries configured there.
The default shadcn/ui registry needs no configuration. Private registries read their tokens from environment variables in .env.local.

MCP server setup

{
  "mcpServers": {
    "shadcn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}{
  "mcpServers": {
    "shadcn": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "shadcn@latest",
        "mcp"
      ]
    }
  }
}

Add to .mcp.json. Start Claude Code in the project and approve the shadcn server when asked.

Agent setup prompt

Paste this into a coding agent to set shadcn MCP server up in the client you use.

Set up shadcn MCP server (https://ui.shadcn.com/docs/mcp) for the AI client I use with this project.

MCP server "shadcn":
- Runs locally over stdio: npx shadcn@latest mcp
- Needs no sign-in or API key.
- Config file per client: Claude Code: .mcp.json; Cursor: .cursor/mcp.json; VS Code: .vscode/mcp.json; Codex: ~/.codex/config.toml.

Before you start:
- Run it in a project with a valid components.json. The server reads the registries configured there.
- The default shadcn/ui registry needs no configuration. Private registries read their tokens from environment variables in .env.local.

Steps:
1. Ask which client I use if you can't tell.
2. For Claude Code, Cursor, VS Code, or Codex, add the "shadcn" server to that client's config file, using its documented format. Keep every server and setting already in the file.
3. Reload the client, finish any sign-in, and confirm the server's tools are listed.

Never write a secret value into a config file or ask me to paste one into this chat. If anything here differs from the provider's guide, follow the guide.