Docs / Shadcn MCP

Shadcn MCP

Use natural language to browse and install blocks with AI assistants via the shadcn MCP server.

The shadcn MCP (Model Context Protocol) server enables AI assistants to browse, search, and install components directly from registries like Shadcnblocks. Instead of copying CLI commands, simply ask your AI to “add a pricing section” and watch it happen.

What is MCP?

Model Context Protocol (MCP) is an open protocol that enables AI assistants to securely connect to external data sources and tools. With the shadcn MCP server, your AI assistant gains direct access to component registries.

Key capabilities:

  • Browse Components - List all available components, blocks, and templates from any configured registry
  • Search Across Registries - Find specific components by name or functionality across multiple sources
  • Install with Natural Language - Add components using simple conversational prompts like “add a login form”
  • Multiple Registries - Access public registries, private company libraries, and third-party sources like Shadcnblocks

Quick Setup

The shadcn MCP server works with all major AI-powered development tools. Choose your IDE below:

Cursor

Quick install:

pnpm dlx shadcn@latest mcp init --client cursor

Or add manually to .cursor/mcp.json:

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

VS Code (GitHub Copilot)

Quick install:

pnpm dlx shadcn@latest mcp init --client vscode

Or add manually to .vscode/mcp.json:

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Claude Code

Quick install:

pnpm dlx shadcn@latest mcp init --client claude

Or add manually to .mcp.json:

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

Codex (OpenAI)

Quick install:

pnpm dlx shadcn@latest mcp init --client codex

Or add manually to ~/.codex/config.toml:

[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]

After adding the configuration, restart your IDE for changes to take effect.

How It Works

The MCP server acts as a bridge between your AI assistant, component registries, and the shadcn CLI:

  1. Registry Connection - MCP connects to configured registries (shadcn/ui, private registries, third-party sources like Shadcnblocks)

  2. Natural Language - You describe what you need in plain English—“add a hero section with a gradient background”

  3. AI Processing - The assistant translates your request into registry commands and finds the best matching components

  4. Component Delivery - Resources are fetched and installed directly into your project with all dependencies

Using with Shadcnblocks

The MCP server automatically discovers the Shadcnblocks registry when you have it configured in your components.json:

{
  "registries": {
    "@shadcnblocks": "https://shadcnblocks.com/r/{name}"
  }
}

Example Prompts

Once configured, try asking your AI assistant:

  • “Show me hero blocks from shadcnblocks”
  • “Add a pricing section with a comparison table”
  • “Install a testimonial carousel”
  • “Find blocks for a SaaS landing page”

Pro Blocks

To access pro blocks via MCP, you’ll need to configure API authentication. See the shadcn CLI guide for setting up your API key.

{
  "registries": {
    "@shadcnblocks": {
      "url": "https://shadcnblocks.com/r/{name}",
      "headers": {
        "Authorization": "Bearer ${SHADCNBLOCKS_API_KEY}"
      }
    }
  }
}

Supported Registries

The shadcn MCP server works out of the box with any shadcn-compatible registry:

RegistryDescription
shadcn/uiThe default registry with all official shadcn/ui components
Shadcnblocks500+ production-ready blocks and page sections
Third-PartyAny registry following the shadcn registry specification
PrivateYour company’s internal component libraries with authenticated access

Features

FeatureDescription
Natural LanguageAsk for components in plain English. “Add a testimonial section” just works.
Smart DiscoveryAI understands context. Ask for “a pricing table” and it finds the best match.
Instant InstallationComponents are installed directly into your project. No manual steps required.
Context AwareThe AI knows your project structure and places components correctly.
Secure RegistryAuthenticated access to premium blocks. Your API keys stay local.
Full Source CodeEvery component is copied to your project. Own and customize everything.

Next Steps