Will my token show up if I /share a Pi session?

It can. The React install commands the server returns carry your token in their URL, so a session that ran one holds it. Read a session before you share it, and if one went out with the token in it, regenerate the token on your account page so the old one stops working.

What does the shadcn server learn about my project when Pi calls it?

Only the tool calls: their names and inputs, such as a component's name, a framework or a search for date picker. Your files and file tree stay on your machine, because Pi reads your project and the server never does. None of the shadcnio tools write anything; they just look things up in the registry.

Is MCP built into Pi, or do I need an extension?

Built in since Pi 0.99.0: pi mcp add, pi mcp list and /mcp ship with Pi. Run pi update if yours is older. An extension that registers /mcp, such as pi-mcp-adapter, still replaces the built-in support, and Pi then stops reading mcp.json in sessions.

Which Pi version can run the pi mcp add command for shadcnio?

Pi 0.99.0 or later, the release where MCP arrived. If pi mcp add is not a command on your machine, run pi update, or update through the package manager that installed Pi (Nix, for one), then run the copied command again.

Where does Pi save the shadcn server when I run pi mcp add?

In ~/.pi/agent/mcp.json, outside every repo. With -l it goes to .pi/mcp.json in the current folder instead, which Pi reads only in a folder you trust.

Why does the shadcn command for Pi use --exposure direct?

Pi's default exposure, codemode, keeps a server's tools off the model's tool list: the model reaches them from JavaScript scripts that look them up first. Direct declares all 22 like Pi's own read and bash, so a prompt that names shadcnio goes straight to the right call. For a shorter tool list, use deferred or codemode instead.

How can a team share one shadcn MCP setup in Pi without sharing a token?

The team command saves the endpoint with an Authorization header that reads SHADCNIO_TOKEN, and each person exports their own token. One person can add -l at the repo's root to write .pi/mcp.json and commit it; Pi loads it for each teammate once they trust the folder. A Team or Organization plan gives every member a Pro token of their own.

Does a committed .pi/mcp.json load when Pi runs with -p?

Only in a folder you trust, because Pi reads the project file nowhere else. If a scripted run doesn't see shadcnio, add it to the global file with pi mcp add, which doesn't depend on trust.

Why does pi mcp list say shadcnio needs sign-in in Pi?

The server answered 401: the token in the URL is old or missing. Pi treats an HTTP server with no Authorization header as an OAuth server and reads that as a sign-in request, which won't help here. Copy the command again and run it: pi mcp add replaces the entry with the same name.

What does a 403 from shadcnio mean in Pi?

Pi got through, but shadcn.io found no live Pro plan on the token's account. Renew it, then select shadcnio in /mcp and reconnect: mcp.json stays as it is. A 429 instead means more than 600 calls a minute on one token; wait the seconds Retry-After gives.

Why does a Pi session opened before pi mcp add have no shadcnio tools?

Sessions read mcp.json when they start. Run /reload, then /mcp to watch shadcnio connect.

Why is shadcnio missing from /mcp in Pi?

An installed extension registers /mcp (pi-mcp-adapter, for one) and replaces Pi's own MCP support, so sessions skip mcp.json. Remove the extension, or add shadcnio in that extension's own config.

Does Pi ask before it calls shadcnio or runs the install?

No. Pi puts no approval prompt in front of tool calls, so the registry calls and the npx shadcn add that follows them run as soon as the model makes them. Every shadcnio tool only reads and declares readOnlyHint, so a permission extension can let them through and still confirm shell commands. Review the diff afterwards, or run Pi in a container for unattended work.

Do the server's prompts show up as slash commands in Pi?

No. Pi brings in a server's tools and resources, not its prompts, so the seven task prompts other clients list as commands aren't there. A prompt template in ~/.pi/agent/prompts does the same job: its file name becomes the command.

Can I use the shadcn MCP with a local model in Pi?

The model can be any one that calls tools, but the registry can't be local: shadcnio is a remote server, and each call goes to shadcn.io over the network. With a small model, name the server and the component in the prompt so the right call is obvious.

Can Pi read a brand's DESIGN.md through the shadcn server?

Yes. Because the server offers resources, Pi adds list_mcp_resources and read_mcp_resource. Ask for shadcnio://design/raycast and the brand's DESIGN.md arrives whole, ready to save at the root of your repo.

Pi wrote its own component instead of using the registry. Why?

The model decides when to reach for a tool, and a short prompt can look answerable without one. Check /mcp shows shadcnio connected, start the prompt with use shadcnio, and put a line in AGENTS.md so every session searches the registry first.

Pi, with every shadcn component one call away

One pi mcp add gives Pi 22 tools that search the registry, read a component's real props and install it in your repo's framework, Svelte and Vue included. The MCP comes with every Pro plan.

Get Pro Set it up

Kind: Terminal agent
Goes in: Terminal
Connects: Over HTTP
Team config: Yes
Its docs: Pi MCP (opens in a new tab)

One command in your shell

Pi has MCP built in since 0.99.0, managed from your shell or from /mcp. Signed in with Pro, the command beside these steps already holds your URL.

Copy the pi mcp add command
With Pro, it carries your MCP URL, token included. No token yet? Create one on your account; the URL itself is on your MCP page.
Run it in a terminal
It writes shadcnio to ~/.pi/agent/mcp.json and doesn't connect yet. If your Pi has no mcp command, run pi update first: MCP arrived in 0.99.0.
Check it with pi mcp list
It connects to every enabled server and prints its state and tools. You want shadcnio: connected, 22 tools (direct, global).
Start pi in your project
A new session connects it on start; one that was already open needs /reload. Begin your first prompts with use shadcnio so the model picks the registry.

Terminal

Google GitHub

Use email insteadPart of Pro

How it reads, with YOUR_TOKEN where your token goes:

$ pi mcp add shadcnio --url "https://www.shadcn.io/api/mcp?token=YOUR_TOKEN" --exposure direct

Saved in ~/.pi/agent/mcp.json, outside every repo. Add -l to write the project's .pi/mcp.json instead, which Pi reads only in a folder you trust. The URL holds your token: regenerate it if it leaks.

How Pi hands the tools to the model, by exposure
Exposure	What the model gets	Pick it when
`direct` (in the command)	All 22 tools declared like `read` or `bash`; the first prompt waits up to 10 seconds for them to connect	You reach for the registry in most sessions
`deferred`	Nothing declared until `tool_search` loads the matches for the next call	You run many servers and want a short tool list
`codemode` (Pi's default)	Tools called from JavaScript scripts that find them with `searchTools()`	You want the model to batch calls and trim results in a script

One command for the whole team

Nothing in this command is secret: Pi saves the endpoint with an Authorization: Bearer ${SHADCNIO_TOKEN} header, and each person exports their own token. Everyone can run it as is, or one person adds -l at the repo's root to write .pi/mcp.json and commits it; Pi loads it for each teammate once they trust the folder. With a Team or Organization plan, each teammate exports a Pro token of their own.

Terminal

pi mcp add shadcnio --url "https://www.shadcn.io/api/mcp" --bearer-token-env-var SHADCNIO_TOKEN --exposure direct

Each teammate sets SHADCNIO_TOKEN to their own token (from their MCP URL), so no token is committed.

See it in /mcp

/mcp lists each server with its state, tool count, exposure and the file it came from, the ones that need attention first. pi mcp list prints the same from a shell.

From a shell, pi mcp list should print shadcnio: connected, 22 tools (direct, global) and the tool names.
In a session, type /mcp and select shadcnio to see its tools and their exposure, or to reconnect it.
Ask the prompt below: the call shows as shadcnio/whoami (Ctrl+O expands it), and whoami answers with your account and the calls left this minute.

Prompt

use shadcnio's whoami and tell me which account this token belongs to

Three jobs Pi does with it

A React debug panel, a SvelteKit filter drawer and a docs changelog: the prompt, Pi's tool calls and what lands. Turn the MCP off to compare.

Your agent

shadcn.io MCP connected · 22 tools
You: Show the webhook payload in the debug panel as a JSON tree I can fold.
Agent step: read package.jsonReturns: Vite, React 19, @base-ui/react, bun.lock
MCP call: search_components({ query: "json viewer" })Returns: json-tree-view, then tree-view
MCP call: get_component({ name: "json-tree-view", include: ["install", "usage"], packageManager: "bun" })Returns: bunx shadcn add …/r/json-tree-view.json, and its data prop
Agent step: bash: bunx shadcn add …/r/json-tree-view.jsonReturns: components/ui/json-tree-view.tsx, no prompt on the way
Your agent: DebugPanel renders the payload with JsonTreeView now, two levels open and long arrays grouped.

shadcn.io MCP connected · 22 tools
You: On phones, put the product filters in a drawer that opens from the bottom.
Agent step: read package.jsonReturns: SvelteKit, Svelte 5, Tailwind 4, pnpm-lock.yaml
MCP call: get_install_plan({ framework: "svelte", name: "drawer", packageManager: "pnpm" })Returns: The drawer's .svelte files by path, and @ark-ui/svelte to add
Agent step: write: src/lib/components/ui/drawer/…Returns: The drawer, plus the button and scroll area it imports
Agent step: edit: src/routes/products/+page.svelteReturns: Filters moved into the drawer below md
Your agent: Added the drawer and @ark-ui/svelte; under md the filters now open in a bottom drawer, and wider screens keep the sidebar.

shadcn.io MCP connected · 22 tools
You: Add a changelog page to the docs with a tab for each recent version.
MCP call: search_blocks({ query: "changelog with a tab per version", category: "changelog" })Returns: changelog-version-tabs, the closest match
MCP call: get_block({ name: "changelog-version-tabs", include: ["install"] })Returns: An npx shadcn add line for changelog-version-tabs, token included
Agent step: bash: npx shadcn add …/r/changelog-version-tabs.jsonReturns: The block, with the Tabs and Badge it imports
Agent step: edit: app/changelog/page.tsxReturns: Versions parsed from CHANGELOG.md into the block
Your agent: The changelog shows the last four releases as tabs, read from CHANGELOG.md, each change tagged by kind.

In your project

JSON Tree View

Opens two levels deep, folds the rest
Installed with bun, as the lockfile says

1 prompt → 2 MCP calls

Prompts to paste into Pi

Type one into Pi's editor as is. The use shadcnio prefix steers the model to the registry; once AGENTS.md says so, you can drop it.

Prompts

use shadcnio to add a Cmd+K command palette to src/App.tsx that jumps to every route

use shadcnio to plan the landing page for this CLI from blocks: a hero with the install line, features, FAQ and a footer

use shadcnio to swap the emoji in the deploy log for Lucide icons, each labelled for screen readers

use shadcnio to read Popover's API and work out why it closes when I click inside it

use shadcnio to restyle the app after Raycast's DESIGN.md, saved at the repo root

use shadcnio to set up this fresh SolidStart project for shadcn components

use shadcnio to replace the hand-rolled toasts in lib/notify.ts with Sonner

use shadcnio to give the settings area a sidebar block that collapses to icons

What's different in Pi

Pi stays minimal: no approval prompts, no plan mode, a tool list you shape yourself. These make the MCP fit that.

Nothing asks before a call
Pi runs tool calls without asking, so shadcnio/get_block and the npx shadcn add after it simply happen: read the diff afterwards. If you use a permission extension, every shadcnio tool declares readOnlyHint, so it can pass them and still stop at bash.
One line in AGENTS.md
Pi loads AGENTS.md (or CLAUDE.md) from the project and its parent folders, plus ~/.pi/agent/AGENTS.md for every project. Say there to use the server for UI, and the use shadcnio prefix becomes optional.
```
For any UI work, call the shadcnio MCP first: search, read the component, then run the install command it returns.
```

A /ui command of your own

Pi lists a server's tools and resources, not its prompts. A prompt template brings the shortcut back: save this as ~/.pi/agent/prompts/ui.md, run /reload, then type /ui a date range filter.

---
description: Build UI with the shadcn MCP
argument-hint: "<what to build>"
---
Use the shadcnio MCP to build $@. Search before writing any UI, install with the command it returns, and keep to this project's framework.

Long answers lose their middle
Pi trims a text result over 20 KB around the middle and saves the full text to a temp file it names. A component's source or every docs section can reach that: ask for install and usage, or name the sections you need.
Read a DESIGN.md as a resource
Since the server offers resources, Pi adds list_mcp_resources and read_mcp_resource. Ask for shadcnio://design/raycast and the brand's DESIGN.md arrives whole, ready to save at the root.
In scripts, keep only its tools
pi -p runs one prompt and exits, and pi mcp list exits with 1 when a server isn't connected. A --tools entry starting with mcp__ limits MCP tools to the ones it matches.
```
$ pi mcp list > /dev/null || exit 1
pi -p "use shadcnio to add a skeleton while the feed loads" \
  --tools read,bash,edit,write,'mcp__shadcnio__*'
```

When shadcnio won't connect

What pi mcp list or /mcp shows, and what fixes it. Anything else is in the full troubleshooting guide.

pi mcp list shows shadcnio: needs sign-in, or Pi says at startup that it requires sign-in.: The server answered 401: the token in the URL is old or missing. Pi treats an HTTP server with no Authorization header as an OAuth server and reads that as a sign-in request, which won't help here. Copy the command again and run it: pi mcp add replaces the entry with the same name.
shadcnio fails with MCP HTTP request failed with status 403.: Pi got through, but shadcn.io found no live Pro plan on the token's account. Renew it, then select shadcnio in /mcp and reconnect: mcp.json stays as it is.
Pi reports it failed to resolve the Authorization header from SHADCNIO_TOKEN.: The variable isn't set in the shell Pi started from. Export it in your shell profile, open a new terminal and start Pi again.
A session that was open before you ran pi mcp add has no shadcnio tools.: Sessions read mcp.json when they start. Run /reload, then /mcp to watch shadcnio connect.
/mcp looks nothing like Pi's docs, and shadcnio isn't in it.: An installed extension registers /mcp (pi-mcp-adapter, for one) and replaces Pi's own MCP support, so sessions skip mcp.json. Remove the extension, or add shadcnio in that extension's own config.
Your Pi doesn't know pi mcp add.: MCP arrived in Pi 0.99.0. Run pi update, or update through the package manager that installed Pi (Nix, for one), then run the command again.

Get the MCP for Pi 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.

Billing

Billed once a year in USD. Cancel anytime.

Yearly-33%MonthlyLifetimePay once

How many people can use the license.
Client work, SaaS products and anything you charge for.
Page sections in 56 categories, from heroes and pricing tables to dashboards and settings, on every framework and UI library, in your theme.
Complete Next.js sites for startups, SaaS, agencies and portfolios, every page designed, ready to ship.
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.
Buttons with motion and states of their own, from an arrow that slides in to a burst of confetti.
Typewriters, scrambles, counters and more, for headlines, labels and numbers.
Animated backgrounds for heroes, sections and cards, from a soft aurora to a flock that flees the cursor. Most are pure CSS.
WebGPU shaders, from a slow aurora to a black hole, each drawing only while it's on screen.
One design and one theme on all four: the components, blocks and effects are built for each framework.
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.
From a button to a date picker, a color picker or a guided tour: accessible, typed in TypeScript, each with live demos.
Real-world patterns built from the components, in 53 galleries: forms, tables, menus, dialogs and more.
Area, bar, line, pie, radar and radial charts on TanStack Charts, on every framework. React also gets the Recharts originals.
Debounce, local storage, media queries and more: each hook is one typed file you own.
From 222 libraries, Lucide, Heroicons, Tabler and Material Symbols among them, as SVG or a React component in one command.
Stripe, Linear, Apple and 497 more: a brand's colors, typography and components in one file your AI agent builds from.
Restyle every component and block at once: 8 styles, 8 grays, 18 colors and 5 radii, shared as a shadcn preset code.
Priority requests are answered first.

Individual

For personal projects & open source

$32instead of $49/mo

$389 billed yearly

Seats: 1 seat
Commercial use: Personal & open source only
Blocks: All 6,181 blocks
Templates: All 14 templates
MCP server: 38 AI clients
Animated buttons: All 35 buttons
Text effects: All 97 effects
Backgrounds: All 100 backgrounds
Shaders: All 100 shaders
Frameworks: React, Vue, Svelte, Solid
UI libraries: Base UI, Radix, Aria, Ark
Components: All 174 components
Examples: All 1,103 examples
Charts: All 70 charts
React hooks: All 35 hooks
Icons: 294k+ icons
DESIGN.md files: All 500 brands
Theme builder: 8 styles × 18 colors
Support: Standard

Team

Organization

For companies with larger teams

$132instead of $199/mo

$1,589 billed yearly

Seats: Unlimited seats
Commercial use: Included
Blocks: All 6,181 blocks
Templates: All 14 templates
MCP server: 38 AI clients
Animated buttons: All 35 buttons
Text effects: All 97 effects
Backgrounds: All 100 backgrounds
Shaders: All 100 shaders
Frameworks: React, Vue, Svelte, Solid
UI libraries: Base UI, Radix, Aria, Ark
Components: All 174 components
Examples: All 1,103 examples
Charts: All 70 charts
React hooks: All 35 hooks
Icons: 294k+ icons
DESIGN.md files: All 500 brands
Theme builder: 8 styles × 18 colors
Support: Priority

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

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 Pi: setup, limits, and the rest.

Using another agent too?

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

See all 38 agents

4.9 out of 5 from 150+ developers

Put the registry in Pi's toolbox

Components, 6,181 blocks and 294k icons as tools Pi calls from your terminal, with any Pro plan.

Get Pro

Cancel anytime
Keep what you've shipped

Explore UI

Popular

Frameworks

Built On

Explore Blocks

Marketing

Application

Explore Charts

Popular

Frameworks

Explore Examples

More Galleries

Explore Icons

More Libraries

Browse

Explore Templates

Categories

Community

Explore Design Systems

Categories

More

Explore Tools

Categories

Explore MCP

Set Up In

Help

Explore Pro

Resources

Legal

Pi, with every shadcn component one call away

One command in your shell

Copy the pi mcp add command

Run it in a terminal

Check it with pi mcp list

Start pi in your project

One command for the whole team

See it in /mcp

Three jobs Pi does with it

Prompts to paste into Pi

What's different in Pi

Nothing asks before a call

One line in AGENTS.md

A /ui command of your own

Long answers lose their middle

Read a DESIGN.md as a resource

In scripts, keep only its tools

When shadcnio won't connect

Get the MCP for Pi with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Is MCP built into Pi, or do I need an extension?

Which Pi version can run the pi mcp add command for shadcnio?

Where does Pi save the shadcn server when I run pi mcp add?

Why does the shadcn command for Pi use --exposure direct?

Does Pi ask before it calls shadcnio or runs the install?

Do the server's prompts show up as slash commands in Pi?

Can I use the shadcn MCP with a local model in Pi?

Can Pi read a brand's DESIGN.md through the shadcn server?

Pi wrote its own component instead of using the registry. Why?

How can a team share one shadcn MCP setup in Pi without sharing a token?

Does a committed .pi/mcp.json load when Pi runs with -p?

Will my token show up if I /share a Pi session?

What does the shadcn server learn about my project when Pi calls it?

Why does pi mcp list say shadcnio needs sign-in in Pi?

What does a 403 from shadcnio mean in Pi?

Why does a Pi session opened before pi mcp add have no shadcnio tools?

Why is shadcnio missing from /mcp in Pi?

Using another agent too?

Put the registry in Pi's toolbox