Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

MCP

Quickstart

Connect the shadcn MCP and add a component in about a minute. Copy your URL, paste it into your editor, then ask for a date picker.

Three steps: get your URL, add it to your editor, ask for a component.

1. Get your URL

Your MCP URL is on your dashboard. It comes with Pro and holds your personal token, the same one your shadcn add commands use, so treat it like an API key.

Signed in with Pro, every config on this page and in the guides holds your URL, ready to paste: Copy takes it whole. Signed out, they ask you to sign in first.

2. Add it to your editor

Claude Code

Terminal
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

Run it in a terminal, then check it with /mcp in a session. The Claude Code guide covers scopes and a config to share with your team.

Cursor

~/.cursor/mcp.json
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

Open Settings → Cursor Settings → MCP → Add new global MCP server and paste it. The Cursor guide has the project scope and the team config.

VS Code

.vscode/mcp.json
Sign in to get your config
Sign in with a Pro account, and this holds your MCP URL, ready to paste.
GoogleGitHub
Use email insteadPart of Pro

Save it as .vscode/mcp.json at your workspace's root, and approve the server when VS Code asks. The VS Code guide has the team config, which asks each teammate for their token.

Another editor

There's a guide for each of 38 clients: Windsurf, Zed, JetBrains, Codex, Gemini CLI, Claude Desktop, ChatGPT and more. Any client that speaks MCP over HTTP takes the same URL.

3. Check the connection

Ask your agent:

Prompt
use shadcnio to tell me who I'm connected as

It calls whoami and answers with your account, your plan and how many calls you have left this minute. No answer, or an error? See Troubleshooting.

4. Add your first component

Prompt
use shadcnio to add a date picker to the booking form

Your agent reads your package.json for your framework and primitives, then:

  1. search_components finds date-picker.
  2. get_component, in one call for your stack: what it is, how to install it and a working demo. For React, the install is a shadcn add command with your token in it; your editor asks you before running it. In a Vue, Svelte or Solid project, it's every file and package, and your agent writes them.
  3. Your agent adapts the demo to your form. For one prop it isn't sure of, get_component_api answers with just that.

A project without shadcn.io yet? Your agent calls get_project_setup first: the init command with the preset for React, or for Vue, Svelte and Solid the packages, files and theme.

FAQ

Where do I get my MCP URL?

On your dashboard, with Pro. It holds your token. Signed in, every config on this page already includes it.

Which editor should I start with?

Claude Code, Cursor, or VS Code are on this page. 38 clients have their own guide, and any client that speaks MCP over HTTP can take the same URL.

How do I know it connected?

Ask use shadcnio to tell me who I'm connected as. The agent calls whoami and answers with your account. If it doesn't, see Troubleshooting.

What if the project has no shadcn.io yet?

Your agent calls get_project_setup first. React gets the CLI preset. Vue, Svelte, and Solid get their packages, files, and theme.

Next