Connect any editor to the shadcn MCP.

Find your editor, paste your Pro URL, start prompting. Works with every MCP-ready AI agent.

Setup guides for every supported editor

35guides — click any card to see the exact config for that editor, with your Pro token already embedded once you're signed in.

Claude

Claude Code

Setup →

Anthropic's CLI — `claude mcp add` one-liner setup

Claude

Claude Desktop

Setup →

Custom Connectors UI — paste one URL, no restart

ChatGPT

Setup →

Developer Mode apps on Pro, Plus, Team, Enterprise, Edu

Opencode

Setup →

Open-source Claude Code alternative — enabled flag control

OpenAI Codex

Setup →

TOML at ~/.codex/config.toml — CLI + IDE share state

Google

Antigravity

Setup →

Google's AI IDE — MCP Store + raw mcp_config.json

Cursor

Cursor

Setup →

One-click install since Cursor 1.0, ~/.cursor/mcp.json

Kiro

Setup →

AWS's AI IDE — hot-reload on save, autoApprove per tool

Kilo Code

Setup →

UI or .kilocode/mcp.json with streamable-http transport

Roo Code

Setup →

Cline fork with `${env:VAR}` interpolation and timeouts

Cline

Cline

Setup →

VS Code extension — streamableHttp camelCase schema

Augment Code

Setup →

VS Code extension — mcpServers array (not object) schema

Windsurf

Windsurf

Setup →

Cascade marketplace + ${env:VAR} / ${file:…} interpolation

VSCodium

VS Code

Setup →

GitHub Copilot agent mode — .vscode/mcp.json per workspace

Visual Studio

Setup →

Visual Studio 2022 17.12+ — .mcp.json per solution

GitHub Copilot

Copilot Coding Agent

Setup →

GitHub's async PR agent — per-repo MCP configuration

GitHub Copilot

Copilot CLI

Setup →

Local Copilot CLI — ~/.copilot/mcp-config.json with tools

JetBrains

JetBrains

Setup →

AI Assistant across IntelliJ, WebStorm, PyCharm, Rider…

Trae

Setup →

ByteDance's AI IDE — Cursor-compatible config schema

Google Gemini

Gemini CLI

Setup →

Google's CLI — httpUrl + SSE Accept header required

Alibaba Cloud

Qwen Code

Setup →

Alibaba's CLI — Gemini-compatible httpUrl schema

Warp

Warp

Setup →

AI terminal — STDIO-only config + mcp-remote bridge

Amp

Setup →

Sourcegraph CLI — `amp mcp add shadcnio <url>` one-liner

Amazon Q

Setup →

AWS Developer CLI — /tools + /mcp slash commands

LM Studio

Setup →

Local-LLM desktop — STDIO bridge via mcp-remote

Crush

Setup →

Charmbracelet TUI — top-level `mcp` object (not mcpServers)

BoltAI

Setup →

macOS AI chat app — Settings → Plugins, STDIO bridge

Atlassian

Rovo Dev

Setup →

Atlassian Rovo CLI — `acli rovodev mcp` edits the config

Zencoder

Setup →

Agent tools menu — flat config, UI handles wrapping

Qodo

Qodo Gen

Setup →

Qodo agent — VS Code + IntelliJ, agentic mode required

Perplexity

Perplexity

Setup →

Desktop Connectors → Advanced — Pro, Max, Enterprise only

Factory

Setup →

droid CLI — `droid mcp add shadcnio <url> --type http`

Hermes

Setup →

Nous Research — YAML config at ~/.hermes/config.yaml

Zed Industries

Zed

Setup →

Fast modern editor — context_servers + mcp-remote bridge

Smithery

Setup →

Cross-client MCP installer — one command, any editor

Every editor. One MCP URL.

Prompt Claude Code, Cursor, Windsurf, ChatGPT — or any of the 35 supported clients above — and install any shadcn.io block, component, or icon in seconds.

  1. Grab your MCP URL

    Copy from /dashboard/account — your personal Pro token is baked in.

  2. Paste into your editor

    Any MCP-ready client. Here's the command for Claude Code:

  3. Prompt as usual

    Your AI agent auto-discovers all 15 MCP tools — search, preview and install any shadcn.io resource straight from your prompt.

Frequently Asked Questions

How to pick an editor, manage your token across clients, and debug a setup that isn't surfacing shadcnio tools.