Shadcn MCP for Visual Studio 2022

One MCP URL gives Visual Studio 2022's 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

In Visual Studio 2022, create or open .mcp.json at the root of your solution and add the shadcnio server:

Paste it in 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 →

Visual Studio's MCP config uses an inputs array (for prompted variables — we don't need any here since the token is already in the URL) and a servers object keyed by server name with "type": "http" for remote transports.

Share with your team

Commit .mcp.json using an inputs entry so the token is prompted once and cached securely outside the committed config:

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

Visual Studio prompts each teammate for the token the first time the server starts and caches it outside source control. 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 Visual Studio 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 through the integrated terminal. Files land under components/ui/.

Copilot agent mode is available in Visual Studio 2022 17.12 and later — make sure Copilot Chat is enabled and agent mode is selected in the chat pane dropdown. Name the server explicitly ("use shadcnio…") when multiple MCPs are configured.

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

Manage the connection

In the Copilot Chat pane, the tools dropdown (wrench icon) lists every MCP server with its available tools. Toggle individual tools on/off from there. To disable the server entirely without removing the config, you can set it aside in .mcp.json and reload, though the simplest path is to delete and re-add the server block.

If your Pro subscription lapses, the next tool call returns 403 and Visual Studio surfaces the error in the Output window (select MCP from the dropdown). Resubscribing restores access on the following request — no reconfigure, no reinstall.

FAQ