Shadcn MCP for Warp

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

Install

In Warp, go to Settings → AI → Manage MCP servers, click + Add, and paste this configuration:

Click Save once signed in with an active Pro subscription — the config carries your personal token through the mcp-remote bridge, 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 →

Warp's MCP config uses STDIO transport only — it launches servers as child processes. Since shadcn.io is a remote HTTP server, the snippet above uses mcp-remote (published on npm) as a thin adapter that proxies HTTP into STDIO frames Warp can read.

Manage startup behavior

The config exposes three Warp-specific knobs worth knowing about:

• start_on_launch: true — Warp starts the MCP server when the app opens. Flip to false if you want to start shadcnio manually via Manage MCP servers → Start each session (useful if you only occasionally need shadcn blocks).
• working_directory: null — runs from wherever Warp exec's. Set to a path if you need npx to resolve a different node_modules.
• env: {} — empty by default. Add SHADCNIO_TOKEN here and swap the URL for ${SHADCNIO_TOKEN} if you want the token out of the config JSON.

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 Warp 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 in the active terminal tab. 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

Go to Settings → AI → Manage MCP servers to see every configured server. Each row has a status dot, a start/stop toggle, and a delete button. Warp surfaces mcp-remote's stderr inline — if shadcn.io returns 403, you'll see the error in the server's detail panel.

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