Shadcn MCP for GitHub Copilot Coding Agent

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

Install

In your GitHub repo, go to Settings → Copilot → Coding agent → MCP configuration and add the shadcnio server:

Save once signed in with an active 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 coding agent runs in GitHub's cloud sandbox when you @mention it on an issue or PR, so the MCP config is evaluated per-agent-run (not on your laptop). Changes take effect on the next task you assign.

Restrict which tools the agent can call

Coding agent supports a tools allowlist per server — the agent only gets the tools you name. For shadcn.io work, a minimal safe set:

{
"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"
    ]
  }
}
}

This lets the agent search, inspect, and install blocks without exposing the full tool surface. Add or remove tool names as your workflow needs evolve. A Team or Organization plan gives every workspace member their own Pro entitlement.

Install your first block

In an issue or PR, assign coding agent and describe the task:

@copilot use shadcnio to install the hero-announcement block into app/components and wire it into the landing page.

What the agent 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 inside the sandbox, commits the generated files, opens a PR for review.

The example above uses hero-announcement, a Pro block — the install runs once the repo's MCP configuration is set up with an active subscription.

Manage the connection

Return to Settings → Copilot → Coding agent → MCP configuration to edit or remove the shadcnio server. To disable temporarily, either delete the shadcnio block or wrap its URL in an env-var reference and leave that env-var unset for the agent run.

If your Pro subscription lapses, the next tool call returns 403 and the coding agent logs the failure in its run output. Resubscribing restores access on the following agent run — no reconfigure needed.

FAQ