Shadcn MCP for Kilo Code

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

Install

In Kilo Code, open Settings → MCP Servers → Add Server, pick HTTP Server (Streamable HTTP Transport) — or create .kilocode/mcp.json at the root of your project — 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 →

"type": "streamable-http" is required — Kilo Code uses it to pick the right transport for remote servers. Click Save in the UI (or save the JSON file manually) and the shadcnio tools show up in the agent.

Pick the right scope

Project-level config is Kilo Code's recommended default. For teams, commit .kilocode/mcp.json using the headers form so nobody commits their token:

{
"mcpServers": {
  "shadcnio": {
    "type": "streamable-http",
    "url": "https://www.shadcn.io/api/mcp",
    "headers": {
      "Authorization": "Bearer ${SHADCNIO_TOKEN}"
    },
    "alwaysAllow": [],
    "disabled": false
  }
}
}

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

Name the server explicitly (use shadcnio…) when multiple MCPs are active. Without it, Kilo Code picks one at random or skips tools entirely. To skip the per-call approval prompt for read-only tools, list them in alwaysAllow (e.g. ["search_items", "get_item"]) — leave install/write actions off that list so you always see what's being added to your project.

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

Manage the connection

Open Settings → MCP Servers to see every configured server and its live status. From there you can enable, disable, or edit any entry directly in the UI — or jump straight to the JSON config if you prefer editing the file.

Set "disabled": true on the shadcnio entry to turn the server off without removing it (useful while debugging). Flip back to false when you need it again — no re-auth required.

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