Shadcn MCP for GitHub Copilot CLI

One MCP URL gives GitHub Copilot CLI live tools to search, preview, and install every block, component, and icon on shadcn.io — no hallucinated props, no broken installs.

Install

Open ~/.copilot/mcp-config.json and add the shadcnio server:

Paste it in once signed in with an active shadcn.io Pro subscription — the config carries your personal token, so treat the full URL like an API key. Pro starts at $19/mo and includes MCP access across every editor plus 6,000+ production-ready blocks. Not Pro yet? See what you unlock →

Copilot CLI uses "type": "http" for remote servers (same as VS Code's Copilot) and accepts a tools allowlist to restrict which functions the agent can call.

Restrict which tools the agent can call

For most shadcn.io workflows, a minimal tools allowlist is enough:

{
"mcpServers": {
  "shadcnio": {
    "type": "http",
    "url": "https://www.shadcn.io/api/mcp?token=YOUR_TOKEN",
    "tools": [
      "search_items",
      "get_item",
      "get_install_command",
      "list_blocks_in_category"
    ]
  }
}
}

A Team or Organization plan gives every workspace member their own Pro entitlement.

Install your first block

copilot use shadcnio to install hero-announcement into my project

What Copilot CLI actually does, in order:

1. search_items({ query: "hero-announcement" }) to confirm the slug resolves.
2. get_item({ name: "hero-announcement" }) for a cheap metadata peek.
3. get_install_command({ name: "hero-announcement" }) — returns a shadcn add https://www.shadcn.io/r/hero-announcement.json?token=… URL with your token already in the query string.
4. Runs it directly in your shell. Files land under components/ui/.

Name the server explicitly ("use shadcnio…") when multiple MCPs are configured, or Copilot picks one at random.

The example above uses hero-announcement, a Pro block — the install runs once you're signed in with an active subscription.

Manage the connection

Copilot CLI re-reads ~/.copilot/mcp-config.json at each invocation, so edits take effect on the next copilot run — no restart needed. To disable shadcnio without removing, delete the entry or wrap the URL in an env-var and leave it unset.

If your Pro subscription lapses, the next tool call returns 403 and Copilot surfaces the error in its output. Resubscribing restores access immediately — the token stays valid across subscription gaps.

FAQ