Prompting

Ask for what you want on the page; your agent picks the tools. These habits make it reach for them, and get the right component the first time.

Name the server

With several MCP servers connected, or none mentioned, an agent may answer from what it remembers. Start with use shadcnio:

Once it has called the tools in a conversation, it usually keeps using them.

Say what you need, not what it's called

The search knows the names other libraries use: a modal is a dialog, a toast a sonner, a chip a badge, a multiselect a combobox. Describe the job:

Give the target when it can't read your project

In your editor, your agent reads package.json for your framework and primitives. A chat app can't, so say it:

Frameworks and bases has every target.

Examples

Start a project

get_project_setup: the shadcn CLI's init with the preset and Vite's guide. In a Vue, Svelte or Solid app, the packages, the alias and the theme to write.

Add a component

search_components, then one get_component call with its install (the CLI command for React; for Vue, Svelte and Solid, the files to write), its usage and a demo to adapt.

Build a page from several

One get_component call with names brings one install for them all and each one's usage; your agent puts the page together from there.

Build a form

get_guide for React Hook Form's setup and validation, then get_demo for each field type it needs (react-hook-form with input, checkbox…). TanStack Form and Formisch work the same way.

Learn how a component works

get_component_docs with the sections it needs, usually Usage. For a prop, a data attribute, a CSS variable or a keyboard key, get_component_api answers with just that part or prop.

Start from an example

search_demos looks through every demo for the pattern, then get_demo returns its code to adapt.

Browse

list_components: the names by category, or with descriptions. For a quick look before deciding, ask for a link: get_component has each demo's.

Icons

search_icons finds all three in one call, by name or by meaning ("logout" is log-out), in the set your project already uses. Then get_icon with their names: from a set with a package, like Lucide, one import line and nothing added; from any other, a component for your framework.

Match a brand's look

search_designs finds the brand (or one by kind of product or color: "a dark fintech"), then get_design returns its DESIGN.md: your agent saves it at the project's root and sets the theme from its tokens.

Start from a template

search_templates: templates by what the app is, each with its code and live demo. Then get_component for what it doesn't have yet.

Check the connection

whoami: your account, your plan and the calls left this minute.

Slash commands

Clients that list an MCP server's prompts show five, each one a task with the calls that do it in the fewest steps. In Claude Code they're /mcp__shadcnio__add, /mcp__shadcnio__form, /mcp__shadcnio__setup, /mcp__shadcnio__icons and /mcp__shadcnio__design:

Keep responses short

A component's whole docs page is long, and some clients warn on large tool outputs. Ask for what you need: "the content's props", "the keyboard interactions", "the range demo". Your agent then requests one part's API, just those sections, or one demo.

Let it install

The install is the step that saves the most time: the CLI, or the plan's files, bring the component with everything it uses. Approve the command when your editor asks, or tell your agent to write the files from the plan.

FAQ