Shadcn MCP for Opencode

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

Install

Open your Opencode configuration file — ~/.config/opencode/opencode.json for global settings or opencode.json at the root of your project — and merge the mcp 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 →

If opencode.json already has other settings, merge the mcp object into your existing config — don't overwrite. Flip enabled to false to temporarily disable the server without removing the config.

Pick the right scope

For teams, commit opencode.json with a ${SHADCNIO_TOKEN} placeholder so nobody commits their token:

{
"mcp": {
  "shadcnio": {
    "type": "remote",
    "url": "https://www.shadcn.io/api/mcp?token=${SHADCNIO_TOKEN}",
    "enabled": true
  }
}
}

Each teammate exports SHADCNIO_TOKEN in their shell (or a git-ignored .env). 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 Opencode 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, Opencode 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

Opencode reads opencode.json at startup — restart the session after editing the mcp block so the new server loads. Inside a running session, ask "use shadcnio to list block categories" to confirm the tools are live; if nothing comes back, the server didn't register.

Flip "enabled": false in the config to disable the server without removing it (useful while debugging). To remove it entirely, delete the shadcnio entry from the mcp object.

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

FAQ