Shadcn MCP for Hermes

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

Install

Open ~/.hermes/config.yaml and add the shadcnio server to the mcp_servers block:

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 →

Hermes uses YAML for configuration (not JSON like most other MCP clients). Indent with two spaces; tabs will produce a parse error. If mcp_servers: doesn't exist yet in your config, add the whole block as the top-level key — YAML's whitespace-based grouping handles the nesting.

Using headers instead

If you'd rather keep the token out of the URL, Hermes accepts a headers map:

mcp_servers:
shadcnio:
  url: "https://www.shadcn.io/api/mcp"
  headers:
    Authorization: "Bearer YOUR_TOKEN"

CLI shortcut

Hermes also supports adding servers via its CLI:

hermes mcp add shadcnio --url https://www.shadcn.io/api/mcp?token=YOUR_TOKEN

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 Hermes 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 shell. 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

Verify a new config landed with:

hermes mcp test shadcnio

This opens a test session against the server and prints the tool list on success. hermes mcp list prints every configured server. To disable without removing, comment out the block in config.yaml (YAML uses # for comments) — Hermes re-reads the file on next invocation.

If your Pro subscription lapses, the next tool call returns 403. Resubscribing restores access immediately — the token stays valid across subscription gaps.

FAQ