Shadcn MCP for VS Code

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

Install

Create or open .vscode/mcp.json at the root of your workspace — or run MCP: Open User Configuration from the Command Palette (⇧⌘P) to install it globally — and add the shadcnio server:

Paste it in once you're 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 →

VS Code shows a trust prompt the first time it starts the server — a safety check against unknown configs. Approve it once and the shadcnio tools show up in Copilot chat.

Pick the right scope

For teams, commit .vscode/mcp.json using input variables so nobody commits their token:

{
"inputs": [
  {
    "type": "promptString",
    "id": "shadcnio-token",
    "description": "shadcn.io MCP token",
    "password": true
  }
],
"servers": {
  "shadcnio": {
    "type": "http",
    "url": "https://www.shadcn.io/api/mcp?token=${input:shadcnio-token}"
  }
}
}

VS Code prompts each teammate for their token the first time the server starts and caches it securely. A Team or Organization plan gives every workspace member their own Pro entitlement.

Install your first block

use shadcnio to install hero-announcement into my project

What Copilot 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. Files land under components/ui/.

Name the server explicitly (use shadcnio…) when multiple MCPs are active. Without it, Copilot picks one at random or skips tools entirely. The Configure Tools button in the chat input lets you toggle individual shadcnio tools on or off.

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

Manage the connection

Run MCP: List Servers from the Command Palette to see every configured server and its status — from there you can start, stop, restart, disable, or view logs. The mcp.json editor also surfaces inline code lenses above each server block for the same actions.

To disable shadcnio without removing it, right-click the server in the MCP SERVERS - INSTALLED section of the Extensions view and select Disable. The enable/disable state is stored separately from mcp.json, so it doesn't affect shared configs.

If your Pro subscription lapses, the next tool call returns 403 and VS Code surfaces an error indicator in the Chat view — select Show Output to confirm. Resubscribing restores access on the following request — no reconfigure, no reinstall. The token itself stays valid across subscription gaps.

FAQ