Shadcn MCP for Zed

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

Install

Open ~/.config/zed/settings.json (on macOS: Zed → Settings…, on Linux: File → Settings) and add the shadcnio context 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 →

Zed keys MCP servers under context_servers (not mcpServers like Cursor). It runs them as STDIO child processes, so remote HTTP requires a bridge — the snippet above uses the mcp-remote adapter over npx, which proxies shadcn.io's HTTP endpoint into STDIO frames Zed can read.

Project-level config

Zed also loads .zed/settings.json at the project root — perfect for teams. Commit a sanitized version that reads the token from an env var and let each teammate export their own:

{
"context_servers": {
  "shadcnio": {
    "source": "custom",
    "command": "npx",
    "args": [
      "-y",
      "mcp-remote",
      "https://www.shadcn.io/api/mcp?token=${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 project

What Zed 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 agent's terminal tool. Files land under components/ui/.

Name the server explicitly ("use shadcnio…") when multiple context servers are active.

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 the agent panel (the chat icon in the right dock) and click the settings gear to see every context server Zed has loaded. Each entry lists its command, current status, and the tools it exposes. Restarting a server is a matter of removing and re-adding the entry in settings — Zed picks up changes on save.

To disable shadcnio without removing the config, comment out the block in settings.json (Zed's JSON parser accepts // comments) or move it into a "context_servers_disabled" object if you want to preserve the shape. Easier: just delete the config temporarily.

If your Pro subscription lapses, mcp-remote surfaces the 403 response directly in Zed's log. Resubscribing restores access on the next invocation.

FAQ