shadcn.io is not affiliated with official shadcn/ui

MCP

get_demo

Q: Where do the demo slugs come from?

get_component lists a component's demos with their slugs. An unknown slug returns the list too.

Q: What does a demo need besides its code?

uses names the components it imports (install them with it). packages names the npm packages it imports that those installs don't bring, like @tanstack/react-table for the Table's data table, with packagesInstall, the command for your packageManager.

Q: How do I get a form field's demo code?

Pass the guide as the name: get_demo({ name: "react-hook-form", demo: "date-picker" }), or tanstack-form, formisch. The answer lists the packages to install and the components it uses.

Get one demo's code, with imports pointed at your components. It also lists the components it uses and the packages it still needs.

Group: Inspect
Inputs: demonamebase?framework?packageManager?uiAlias?
Access: Read-only

When to use it

To start from a working example of the component in use.
After an install, to adapt a demo to the user's page.

Inputs

InputType

demostring

Its slug: range.

namestring

As in its URL: date-picker.

base?"base" | "aria" | "ark" | "radix"

React only. Default base (Base UI).

Type: "base" | "aria" | "ark" | "radix"

framework?"react" | "vue" | "svelte" | "solid"

Default react.

Type: "react" | "vue" | "svelte" | "solid"

packageManager?"npm" | "pnpm" | "yarn" | "bun"

From the lockfile. Default npm.

Type: "npm" | "pnpm" | "yarn" | "bun"

uiAlias?string

components.json's aliases.ui (#lib/components/ui): demo imports point there.

Example prompts

Name the server, so the agent doesn't answer from memory:

Prompts

use shadcnio to give me the Calendar's range demo for Vue

use shadcnio to show me the default Drawer demo for Solid

Call and response

Asked “Give me the Calendar's range demo for Vue”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call

get_demo({ demo: "range", framework: "vue", name: "calendar" })

Response

{
  "code": "<script setup lang=\"ts\">\nimport { shallowRef } from \"vue\"\nimport { type DateValue, parseDate } from \"@ark-ui/vue/date-picker\"\nimport { Calen…",
  "demo": "range",
  "file": "calendar/example-range.vue",
  "language": "vue",
  "preview": "https://kit.dev/view/ui/vue/calendar/range",
  "title": "Range",
  "uses": [
    "calendar"
  ],
  "name": "calendar",
  "target": "Vue · Ark UI"
}

Call it by hand

Your MCP client sends this for you. To try the tool without one, post the call yourself; the server answers in server-sent events, the result on the data: line.

Terminal

Google GitHub

Use email insteadPart of Pro

What your agent reads

The server's description of get_demo, one of the Inspect tools. Your agent reads it to decide when to call the tool:

tools/listget_demo.description

One demo's code, imports pointing at your components (uiAlias: yours from components.json); the components it uses, the packages it needs besides (packages), and the files it imports from beside it (a Svelte demo's nested components). A form guide's demos come per base.

FAQ

Where do the demo slugs come from?

get_component lists a component's demos with their slugs. An unknown slug returns the list too.

What does a demo need besides its code?

uses names the components it imports (install them with it). packages names the npm packages it imports that those installs don't bring, like @tanstack/react-table for the Table's data table, with packagesInstall, the command for your packageManager.

Why does a Svelte demo come with more files?

Svelte puts each nested component in its own file, so some Svelte demos import one from beside them (./default-tree-node.svelte). Those come in the response's files, with the path to write each at.

How do I get a form field's demo code?

Pass the guide as the name: get_demo({ name: "react-hook-form", demo: "date-picker" }), or tanstack-form, formisch. The answer lists the packages to install and the components it uses.