Skip to content

shadcn components as AnythingLLM agent skills

One entry in anythingllm_mcp_servers.json, and AnythingLLM's agent searches every shadcn component and block, reads their real props and hands back the install, on a cloud model or a local one. Every Pro plan includes it, whether AnythingLLM runs on your desktop or in Docker.

Get ProSet it up
Kind
App
Goes in
Agent Skills → MCP Servers
Connects
Over HTTP
Team config
No
Its docs
None

Add it to the MCP config

AnythingLLM reads its MCP servers from one JSON file in its storage folder. Paste the entry beside these steps into it, then reload from Agent Skills.

  1. Copy the server entry

    With Pro, the JSON beside these steps holds your URL, token included, and "type": "streamable", the transport this server speaks. No token yet? Create one on your account.

  2. Open the plugins folder

    On Desktop, click the version number at the top right, choose Open storage, and go into plugins. On Docker, it's plugins in the folder you mounted as STORAGE_LOCATION. AnythingLLM creates the file the first time you open Agent Skills.

  3. Add shadcnio under mcpServers

    Merge the entry into the mcpServers object of anythingllm_mcp_servers.json, beside any servers already there, and save. Keep it strict JSON: a comment or a trailing comma makes AnythingLLM read the whole file as empty.

  4. Refresh the MCP servers

    In Settings → Agent Skills, click Refresh beside MCP Servers and confirm. AnythingLLM reboots its servers from the file, and Shadcnio shows On.

  5. Call it from a chat

    In a workspace, begin the message with @agent, or set the workspace's chat mode to Agent so tools are always within reach.

Agent Skills → MCP Servers
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:

{
  "mcpServers": {
    "shadcnio": {
      "type": "streamable",
      "url": "https://www.shadcn.io/api/mcp?token=YOUR_TOKEN"
    }
  }
}

The URL carries your token, so keep the file to yourself: if it ever gets shared, regenerate the token. Refresh reboots every MCP server in the file without restarting AnythingLLM.

Where `anythingllm_mcp_servers.json` lives
InstallThe file's folder
Desktop on macOS~/Library/Application Support/anythingllm-desktop/storage/plugins/
Desktop on WindowsC:\Users\<you>\AppData\Roaming\anythingllm-desktop\storage\plugins\
Desktop on Linux~/.config/anythingllm-desktop/storage/plugins/
Docker, self-hostedplugins/ in your STORAGE_LOCATION (/app/server/storage/plugins inside the container)
AnythingLLM CloudNot available: MCP is for self-hosted installs

Check that Shadcnio is on

Settings → Agent Skills lists each MCP server as On or Stopped, and opens one to show its tools or the error that stopped it.

  1. Open Settings → Agent Skills and find Shadcnio under MCP Servers, marked On.
  2. Click it: the panel reads 22/22 tools enabled and lists every tool with its arguments.
  3. In a workspace chat, send the prompt below. The agent's thoughts show Executing MCP server: shadcnio, and whoami answers with your account and the calls left this minute.
Prompt
@agent use shadcnio to tell me who I'm connected as

What @agent does with it

Three jobs AnythingLLM users hand the agent: the calls it makes and what comes back. Toggle shadcnio off on a tab and the same @agent prompt gets the model's best guess instead.

Your agent
  1. shadcn.io MCP connected · 22 tools
  2. You: @agent turn the support handbook in this workspace into an FAQ section for our React site.
  3. Agent step: Searched this workspace's documents (RAG & long-term memory)Returns: support-handbook.pdf: billing, accounts and data
  4. MCP call: search_blocks({ query: "faq grouped by topic", category: "faq" })Returns: faq-categorized first, faq-tabbed-vertical next
  5. MCP call: get_block({ name: "faq-categorized", include: ["install", "source"] })Returns: Its npx shadcn add, and the block's code
  6. Agent step: Replaced the sample questions with the handbook'sReturns: Your wording, the block's markup
  7. Your agent: Here's faq-categorized with your handbook's questions in place: run the command in your project, then swap in this file.

In your project

Categorized FAQ

  • The handbook's answers, grouped by topic
  • One command left to run in your repo

1 prompt → 2 MCP calls

Prompts for the agent

Start with @agent unless the workspace's chat mode is Agent. Naming the server keeps a smaller model on the right tools.

Prompts
@agent use shadcnio to plan a landing page from the product brief in this workspace
@agent use shadcnio to find a kanban board block for Svelte and list every file it writes
@agent use shadcnio to give me one npx command that adds the date picker, popover and calendar
@agent use shadcnio to build a signup form with React Hook Form and Zod: name, email, password
@agent use shadcnio to fetch Vercel's DESIGN.md tokens and save them as a file
@agent use shadcnio to tell me which props the Combobox takes on React Aria
@agent use shadcnio to walk me through setting up a new Vite app for shadcn components
@agent use shadcnio to find Phosphor icons for upload, download and share

Good to know in AnythingLLM

What makes shadcnio work well in AnythingLLM: its chat modes, the workspace's prompt and model, and how many tools sit in context.

  • Keep the streamable type

    Leave type out and AnythingLLM opens an SSE connection, which this server doesn't answer, so shadcnio never starts. Keep "streamable" (or "http", which AnythingLLM treats the same).

    "shadcnio": {
  "type": "streamable",
  "url": "YOUR_MCP_URL"
}

  • Agent mode, or @agent first

    Set a workspace's chat mode to Agent and, with a provider that calls tools natively, any message can reach shadcnio. In Chat or Query mode, open with @agent, and /exit ends the agent session.

  • The System Prompt as your rules

    An agent session starts from the workspace's System Prompt, in its Chat Settings. One line there names the server and your stack for every chat in that workspace.

    For UI work, call the shadcnio tools first. Our app is React on Base UI with pnpm: pass framework, base and packageManager on every call.

  • A stronger model for the agent

    Each workspace can give its agent its own provider and model under Workspace Agent LLM Provider. Keep everyday chat on a local model and send tool calls to one that picks tools reliably.

  • Trim the tools you skip

    Past ten enabled tools, AnythingLLM marks a server in yellow, since tools take context. Switch off the shadcnio tools you never use in its panel or from Tools in the chat box: the choice is saved in the file as suppressedTools.

    "anythingllm": {
  "suppressedTools": ["search_templates", "list_icon_libraries"]
}

  • One slash command for UI work

    Under Tools → Slash Commands, Add New Preset. AnythingLLM swaps the command for its prompt before reading the message, so a prompt that opens with @agent starts an agent session.

    Command: /ui
Prompt:  @agent use shadcnio. Our stack is Svelte with pnpm.

When shadcnio won't connect

What AnythingLLM shows on the Agent Skills page or in the chat, and the fix. The troubleshooting guide covers every client.

Agent Skills says no MCP servers were found after you saved.
AnythingLLM reads a file that isn't valid JSON as empty: look for a trailing comma, a comment, or the entry outside mcpServers. Check you edited the storage folder this install uses, then click Refresh.
Shadcnio is Stopped, and its error mentions 401.
AnythingLLM sent no token, or one you have since replaced: each new token on your account cancels the last. Copy the entry again, paste its url over the old one in anythingllm_mcp_servers.json, and click Refresh.
The server's error mentions 403 or Pro required.
AnythingLLM reached shadcnio and the token checked out, but the shadcn.io account behind it has no Pro plan running. Renew it on pricing, then click Refresh on the Agent Skills page: the entry in the plugins folder works again.
Shadcnio won't start, though the URL is right.
Check the entry has "type": "streamable". Without it, AnythingLLM tries SSE, and the start fails after its 30-second connection timeout.
The reply shows no tool call in the agent's thoughts.
A plain chat doesn't use tools: open with @agent, or set the workspace's chat mode to Agent. If it still answers from memory, run /reset and ask again with use shadcnio, or give the agent a model that calls tools well.
The agent stops partway through building a page.
It reached Max Tool Calls Per Response, 10 unless you change it. Raise it in Agent Skill Settings (the settings icon on the Agent Skills page), or ask for one section per message.

Get the MCP for AnythingLLM 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 AnythingLLM: setup, limits, and the rest.

Using another agent too?

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

See all 38 agents

4.9 out of 5 from 150+ developers

Put every component behind @agent

Components, 6,181 blocks and 294k icons for AnythingLLM's agent, on Desktop or Docker, with any Pro plan.

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