Shadcn MCP for Qwen Code

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

Install

Open ~/.qwen/settings.json for user-scope config, or .qwen/settings.json at the repo root for project-scope, 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 →

Qwen Code uses httpUrl (not url) for remote HTTP servers. The Accept header advertising text/event-stream is required for streaming tool output — without it, you lose partial progress on longer calls.

CLI shortcut

If you'd rather let the CLI write the config for you:

qwen mcp add --transport http shadcnio https://www.shadcn.io/api/mcp?token=YOUR_TOKEN \
--header "Accept: application/json, text/event-stream"

Add --scope user to write into ~/.qwen/settings.json instead of the default project-scope .qwen/settings.json.

Share with your team

Commit .qwen/settings.json project-scope with an env-var reference so nobody commits their token:

{
"mcpServers": {
  "shadcnio": {
    "httpUrl": "https://www.shadcn.io/api/mcp",
    "headers": {
      "Authorization": "Bearer ${SHADCNIO_TOKEN}",
      "Accept": "application/json, text/event-stream"
    }
  }
}
}

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 Qwen Code 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 CLI's shell tool. Files land under components/ui/.

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

Qwen Code re-reads settings at invocation time, so changes to settings.json take effect on the next run — no restart needed. To verify:

qwen mcp list

shadcnio should appear with a tool count. To disable without removing, delete the shadcnio block (Qwen Code has no built-in disabled flag for HTTP servers) or move it into a parked section of your settings and re-add when needed.

If your Pro subscription lapses, the next tool call returns 403. Resubscribing restores access immediately — the token itself stays valid across subscription gaps.

FAQ