Shadcn MCP for Kiro
Connect Kiro into the shadcn.io registry with one MCP URL — access every block, icon, and example in the catalog.
One MCP URL gives Kiro live tools to search, preview, and install every block, component, and icon on shadcn.io — no hallucinated props, no broken installs.
Install
In Kiro, open the panel and select the Open MCP Config icon — or run Kiro: Open workspace MCP config (JSON) from the command palette (⇧⌘P) — 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 →
Kiro reloads the config on save — no editor restart needed. The new server reconnects automatically the moment you hit ⌘S.
Pick the right scope
| File | Where | Shared with team |
|---|---|---|
~/.kiro/settings/mcp.json | Global — every workspace | No — your machine only |
.kiro/settings/mcp.json | At repo root | Yes — commit it |
If both files exist, workspace settings take precedence. For teams, commit .kiro/settings/mcp.json using an env-var reference so nobody commits their token:
{
"mcpServers": {
"shadcnio": {
"url": "https://www.shadcn.io/api/mcp",
"headers": {
"Authorization": "Bearer ${SHADCNIO_TOKEN}"
}
}
}
}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 projectWhat Kiro actually does, in order:
search_items({ query: "hero-announcement" })to confirm the slug resolves.get_item({ name: "hero-announcement" })for a cheap metadata peek.get_install_command({ name: "hero-announcement" })— returns ashadcn add https://www.shadcn.io/r/hero-announcement.json?token=…URL with your token already in the query string.- Runs it. Files land under
components/ui/.
Name the server explicitly (use shadcnio…) when multiple MCPs are active. Without it, Kiro picks one at random or skips tools entirely. If you want specific shadcnio tools to run without per-call approval prompts, add them to an autoApprove array (e.g. ["search_items", "get_item"]) — install/write actions are worth leaving off that list.
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 Kiro > MCP Servers to see every configured server and its live status. From there you can enable, disable, or edit any entry — changes take effect the moment the JSON file is saved, so iteration is fast.
Set "disabled": true on the shadcnio entry to turn the server off without removing it (useful while debugging). Flip back to false (or delete the line) 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
Was this page helpful?
Sign in to leave feedback.