Shadcn MCP for Augment Code

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

Install

Open VS Code's settings.json (Augment Code is a VS Code extension — use Cmd+Shift+P → Preferences: Open User Settings (JSON)), then merge the augment.advanced.mcpServers entry below into the existing JSON:

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

Augment Code's MCP config is an array under augment.advanced.mcpServers — not an object keyed by server name like most other clients. Each entry is a full server spec with a name field. Merge your shadcnio entry into an existing array rather than overwriting it if you already have other MCP servers configured.

Using the UI instead

If you'd rather skip the JSON, Augment's UI offers a click-through path:

1. Click the hamburger menu in the Augment panel → Settings.
2. Navigate to the Tools section.
3. Click + Add MCP.
4. Command: npx, Args: -y mcp-remote https://www.shadcn.io/api/mcp?token=YOUR_TOKEN
5. Name the MCP shadcnio and click Add.

Augment writes the same JSON shape into settings.json behind the scenes. 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 Augment Code 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 VS Code's integrated terminal. 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

Augment reloads its MCP config whenever settings.json changes. To disable shadcnio without removing it, either delete the array entry or use the UI panel's per-server toggle. Restart VS Code if a config change doesn't pick up (rare, but happens after extension upgrades).

If your Pro subscription lapses, mcp-remote surfaces the 403 response in Augment's output panel. Resubscribing restores access immediately — the token stays valid across subscription gaps.

FAQ