Shadcn MCP for Windsurf

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

Install

In Windsurf, click the MCPs icon in the top-right of the Cascade panel (or go to Settings → Cascade → MCP Servers), scroll to the bottom, and click View raw config — that opens ~/.codeium/windsurf/mcp_config.json. Merge the mcpServers block below into it:

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 →

Windsurf uses serverUrl (not url) for remote HTTP servers. The config file is global — Windsurf doesn't load a project-scoped copy — so every workspace shares the same shadcnio server once it's installed.

Share with your team

Windsurf supports ${env:VAR} and ${file:/path} interpolation inside mcp_config.json, which means teammates can share a sanitized config shape and each supply their own token via the environment:

{
"mcpServers": {
  "shadcnio": {
    "serverUrl": "https://www.shadcn.io/api/mcp",
    "headers": {
      "Authorization": "Bearer ${env:SHADCNIO_TOKEN}"
    }
  }
}
}

Each teammate exports SHADCNIO_TOKEN in their shell (or reads it from a file via ${file:~/.secrets/shadcnio}). A Team or Organization plan gives every workspace member their own Pro entitlement. Enterprise admins can also whitelist shadcnio via the team's MCP registry so it shows up for every member by default.

Install your first block

use shadcnio to install hero-announcement into my project

What Cascade 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, Cascade picks one at random or skips tools entirely.

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

Manage the connection

Click the MCPs icon in Cascade to see every configured server. Select shadcnio to open its settings, where you can toggle individual tools on or off — Cascade caps total exposed tools at 100 across all servers combined, so if you're close to the limit, turning off tools you don't need (e.g. get_registry_stats, tool-specific lookups) frees budget for other integrations.

To disable shadcnio without removing it, use the toggle at the top of the server's settings page. The config stays in mcp_config.json, just skipped at load time.

If your Pro subscription lapses, the next tool call returns 403. Resubscribing restores access on the following request — no reconfigure, no reinstall. The token itself stays valid across subscription gaps.

FAQ