Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

MCP

OpenClaw

Add the shadcn MCP server to OpenClaw with one terminal command. Signed in, the command on this page already holds your URL.

Kind
Terminal agent
Goes in
Terminal
Connects
Over HTTP
Team config
No
Its docs
OpenClaw MCP (opens in a new tab)

Install

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. It registers the server over streamable HTTP, the transport the shadcn.io server speaks, with your token in the URL.

Check it

Probe the connection, which also lists the tools OpenClaw found:

openclaw mcp doctor shadcnio --probe

You want it connected, with 18 tools. Then ask OpenClaw:

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

It calls whoami and answers with your account and how many calls you have left this minute.

Your first component

Prompt
use shadcnio to add a sheet for the settings panel

What OpenClaw does, in order:

  1. search_components({ query: "sheet" }) finds sheet.
  2. get_component({ name: "sheet" }) reads its parts, demos and dependencies, for your framework and base (from your package.json: Base UI unless the project uses Ark UI, Radix or React Aria).
  3. get_install_command({ name: "sheet" }) returns npx shadcn@latest add "…/r/sheet.json?token=…", your token in the URL, for OpenClaw to run.
  4. get_demo gives it a working example to adapt to your panel.

In a Vue, Svelte or Solid project, step 3 is get_install_plan: every file with its path and the packages to install.

Name the server (use shadcnio…) when several MCP servers are registered, or OpenClaw may answer from memory instead.

Manage the connection

openclaw mcp doctor shadcnio --probe checks it at any time. To change the URL after you regenerate your token, register the server again with the new URL.

FAQ

Can I keep the token out of the URL?

Yes. Register the plain endpoint as the URL and send the token as a header, with --header "Authorization: Bearer <your token>" added to the command. See Security and limits.

The probe fails

Check the URL is whole, ?token= and all: copy it again from your dashboard. A 401 means the token is wrong or regenerated; a 403 means the account has no Pro.

Why is it still giving generic answers?

Name the server in your prompt and be specific: a component's name, your framework, or a category. Vague prompts fall back on what the model remembers.

Next

Other clients