Skip to content

shadcn/ui components for your OpenClaw agent

Save the server once on your Gateway, and the agent you message from Telegram, Slack or WhatsApp finds every component and block, reads its real props and installs it in your repo. It comes with Pro, and one token serves every channel the Gateway answers on.

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

Save it on your Gateway

One command saves the server on your Gateway, for every channel your agent answers on. Signed in with Pro, the command beside these steps already holds your token.

  1. Copy your openclaw command

    Signed in with Pro, the --url in that command already ends in your token. No token yet? Create one on your account.

  2. Stop the Gateway, then run it

    CLI changes to saved servers need the Gateway stopped: openclaw gateway stop, paste the command, then openclaw gateway start. openclaw mcp add connects before it saves, so a bad URL fails here, not in a chat.

  3. Or add it in Settings → MCP

    With the Gateway running, open the Control UI (openclaw dashboard), choose Add server, name it shadcnio, pick Streamable HTTP and paste the URL.

  4. Message your agent

    From any channel the agent answers on, start with the server's name (use shadcnio…) the first few times, so it reaches for the tools before its memory.

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

How it reads, with YOUR_TOKEN where your token goes:

$ openclaw mcp add shadcnio --url "https://www.shadcn.io/api/mcp?token=YOUR_TOKEN" --transport streamable-http

Saved under mcp.servers.shadcnio in ~/.openclaw/openclaw.json, with the token in its URL. If that token ever leaks, regenerate it and copy the command again.

Four ways to save it in OpenClaw
WhereHowThe Gateway
Terminalopenclaw mcp add, the command beside these stepsStopped while it saves
Control UISettings → MCP → Add server, Streamable HTTPRunning
Chat composer+ → Connectors → Add MCP server… (administrators only)Running
Config filemcp.servers.shadcnio in ~/.openclaw/openclaw.jsonRunning: applied without a restart

See it answer

Settings → MCP in the Control UI lists each saved server with its transport and an enable switch; only a probe proves it answers.

  1. With the Gateway stopped, openclaw mcp doctor shadcnio --probe checks the saved entry, connects and lists the server's 22 tools.
  2. Start it again and run openclaw dashboard: shadcnio sits under Settings → MCP, enabled, on Streamable HTTP.
  3. In a Control UI chat, + → Connectors → Tool access shows its tools for that session.
  4. Send the prompt below from any channel: OpenClaw calls whoami and replies with your account and the calls left this minute.
Prompt
use shadcnio: which shadcn.io account am I connected as, and how many calls are left

What it looks like from a chat app

Three messages sent from a phone, start to finish: the calls OpenClaw makes, and what lands on the Gateway's machine. Turn the MCP off to see the same message answered from memory.

Your agent
  1. shadcn.io MCP connected · 22 tools
  2. You: Build the landing page for my coffee subscription in ~/code/roastery.
  3. Agent step: Read ~/code/roastery/package.jsonReturns: Next.js, @base-ui/react, pnpm
  4. MCP call: plan_page({ brief: "landing page for a coffee subscription", sections: ["hero", "features", "pricing", "faq", "footer"] })Returns: A pick per section, pricing-gift-subscription for the plans
  5. MCP call: get_block({ names: ["hero-centered-trusted-logos", "features-bento-grid", "pricing-gift-subscription", "faq-accordion", "footer-columns"], include: ["install"] })Returns: One shadcn add command for all five
  6. Agent step: Ran pnpm dlx shadcn addReturns: The five blocks and the components they use
  7. Your agent: The landing page is up in app/page.tsx: hero, features, the gift-subscription plans, FAQ and footer, with copy written for the coffee.

In your project

Landing page

  • Five sections from one plan
  • One install for all of them

1 prompt → 2 MCP calls

Messages to start with

Paste one into WhatsApp, Telegram, Slack or the Control UI chat. Starting with the server's name steers OpenClaw to its tools.

Prompts
use shadcnio to plan a landing page for my pottery classes and send me the sections before you build it
use shadcnio to find three pricing blocks with a monthly and yearly switch, and send me their preview links
use shadcnio to add a kanban board for support tickets to the dashboard in ~/code/helpdesk
use shadcnio to restyle my portfolio after Vercel's DESIGN.md and tell me what changed
use shadcnio to swap the hand-drawn icons in the Svelte app for Tabler ones
use shadcnio to check what props Combobox takes before you change the city search field
use shadcnio to start a Vite app in ~/code/recipes with shadcn components and a sign-in screen

How OpenClaw handles the server

The parts of OpenClaw that decide what the agent sees: its cap on server guidance, workspace files, tool policy and approvals.

  • One line in AGENTS.md

    The agent reads AGENTS.md at the start of every session, and its ## Tools section is where tool conventions go. Edit it in Settings → Agents → Files.

    ## Tools
- UI: use the shadcnio MCP. Search before writing a component, and run the install it returns.

  • Guidance stops at 2,000 characters

    OpenClaw passes its own agent only the first 2,000 characters of a server's instructions. The shadcnio part on blocks, brand designs and icons falls past that, so ask for them by name: search_blocks, plan_page, get_design, search_icons.

  • Prompts and resources, as tools

    Chat apps have no slash menu, so OpenClaw adds prompts_list, prompts_get, resources_list and resources_read for the server. Ask for the shadcnio page prompt, or Stripe's DESIGN.md resource, in plain words.

  • Let sandboxed sessions see it

    Sandboxed sessions drop MCP tools unless the sandbox tool list allows them, and the minimal profile hides them everywhere. Allow the server's glob:

    {
  "tools": {
    "sandbox": {
      "tools": { "alsoAllow": ["shadcnio__*"] }
    }
  }
}

  • Move the token to a header

    Drop ?token= from the URL and send an Authorization header that reads SHADCNIO_TOKEN, set in ~/.openclaw/.env. openclaw mcp doctor warns about a literal secret in a header, not about a reference.

    {
  "mcp": {
    "servers": {
      "shadcnio": {
        "headers": { "Authorization": "Bearer ${SHADCNIO_TOKEN}" }
      }
    }
  }
}

  • Codex runs, approved once

    On a Codex runtime with a guarded or read-only posture, MCP calls can ask each time. All 22 tools only read, so approve the server once, with the Gateway stopped; the installs it runs still follow your exec approvals.

    $ openclaw mcp configure shadcnio --approval approve

When the agent can't reach it

What OpenClaw reports, and the fix. Every client's failures are in the troubleshooting guide.

openclaw mcp add refuses and asks you to stop the Gateway.
Saved-server changes from the CLI need OpenClaw's state to themselves. Run openclaw gateway stop, the command again, then openclaw gateway start; or add it under Settings → MCP while it runs.
The probe or the Gateway log says authentication refused (401).
The token in the URL is missing, or was regenerated since you saved it. Copy the command from this page again, run openclaw mcp unset shadcnio, and add it anew.
Calls to shadcnio come back with 403.
shadcn.io knows the token, yet the plan behind it has lapsed. Renew Pro on that account and the server saved on your Gateway answers again, with no openclaw command to rerun.
An entry written by hand, or saved as SSE, never connects.
Check its transport. With none set, OpenClaw uses SSE, and the shadcn.io server speaks Streamable HTTP: keep --transport streamable-http, or set transport: "streamable-http" in the entry.
The probe lists the tools, but a sandboxed session sees none.
Sandboxed sessions filter MCP tools unless tools.sandbox.tools allows bundle-mcp or shadcnio__*, and the minimal profile hides them everywhere. openclaw doctor points out the sandbox case.
The agent writes the UI from memory instead.
Name the server (use shadcnio…), and the tool for blocks, designs and icons: they fall past the guidance OpenClaw passes on. A line under ## Tools in AGENTS.md makes it stick.

Get the MCP for OpenClaw with Pro

The MCP comes with every Pro plan, with every block and premium template, for you or your whole team. Monthly, yearly or lifetime.

See full pricing

4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.

Billed once a year in USD. Cancel anytime.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

  • How many people can use the license.Seats: 1 seat
  • Client work, SaaS products and anything you charge for.Commercial use: Personal & open source only
  • Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.Blocks: All 6,181 blocks
  • Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.Templates: All 14 templates
  • Your AI agent searches, previews and installs any component, block, icon or DESIGN.md from a prompt: 22 tools in Claude Code, Cursor, VS Code and 35 more clients.MCP server: 38 AI clients
  • Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.Animated buttons: All 35 buttons
  • Typewriters, scrambles, counters and more, for headlines, labels and numbers.Text effects: All 97 effects
  • Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.Backgrounds: All 100 backgrounds
  • WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.Shaders: All 100 shaders
  • One design and one theme on all four: the components, blocks and effects are built for each framework.Frameworks: React, Vue, Svelte, Solid
  • React on Base UI, Radix UI, React Aria or Ark UI: install the version for the library your project already uses. Vue, Svelte and Solid run on Ark UI.UI libraries: Base UI, Radix, Aria, Ark
  • From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.Components: All 174 components
  • Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.Examples: All 1,103 examples
  • Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.Charts: All 70 charts
  • Debounce, local storage, media queries and more: each hook is one typed file you own.React hooks: All 35 hooks
  • From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.Icons: 294k+ icons
  • Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.DESIGN.md files: All 500 brands
  • Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.Theme builder: 8 styles × 18 colors
  • Priority requests are answered first.Support: Standard

Team

Most popular

For freelancers, agencies & startups

$66instead of $99/mo

$789 billed yearly · ≈ $13/dev/mo

Everything in Individual, plus

  • How many people can use the license.Seats: Up to 5 seats
  • Client work, SaaS products and anything you charge for.Commercial use: Included
  • Priority requests are answered first.Support: Priority

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Everything in Team, plus

  • How many people can use the license.Seats: Unlimited seats
  • Secure checkout via Stripe
  • Code lives in your repo
  • Keep what you've shipped if you cancel
  • License terms

Frequently asked questions

The shadcn MCP in OpenClaw: setup, limits, and the rest.

Using another agent too?

The same URL works in every MCP client: use it beside OpenClaw, in your editor, your terminal or your chat app.

See all 38 agents

4.9 out of 5 from 150+ developers

Give your OpenClaw agent the registry

Message your agent for a component, a block or an icon from any channel, with 6,181 blocks to pick from: in every Pro plan.

Get Pro
  • Cancel anytime
  • Keep what you've shipped