search_demos

Q: How is search_demos different from search_components?

search_components finds the component; search_demos finds the example of a pattern inside the components, which is usually the code you want to start from.

Find a demo of a pattern across every component, such as a controlled dialog. The best match comes first, and get_demo returns its code.

Group: Discover
Inputs: querybase?component?framework?limit?
Access: Read-only

When to use it

The user describes a pattern ("a dialog with a form", "a table with actions") more than a component.
Before adapting a component by hand: a demo may already do it.

Inputs

InputType

querystring

A pattern: "date range", "controlled dialog".

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

React only. Default base (Base UI).

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

component?string

Only this component's demos.

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

Default react.

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

limit?number

Example prompts

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

Prompts

use shadcnio to find a demo of a date range picker

use shadcnio: is there an example of a combobox with multiple selection?

Call and response

Asked “Is there a demo of a date range picker I can start from?”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call

search_demos({ query: "date range" })

Response

{
  "count": 10,
  "next": "get_demo({ name: \"date-input\", demo: \"range\" }) returns its code.",
  "query": "date range",
  "results": [
    {
      "demo": "range",
      "name": "date-input",
      "title": "Range"
    },
    {
      "demo": "range",
      "description": "A date picker component for selecting a range of dates.",
      "name": "date-picker",
      "title": "Range"
    },
    "… 8 more"
  ],
  "target": "React · Base 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 search_demos, one of the Discover tools. Your agent reads it to decide when to call the tool:

tools/listsearch_demos.description

Find the demo of a pattern across every component ("controlled dialog", "multiple selection"), best first: working code to start from, via get_demo.

FAQ

How is search_demos different from search_components?

search_components finds the component; search_demos finds the example of a pattern inside the components, which is usually the code you want to start from.

What text does demo search look at?

Each demo's title, the line its docs open it with, and its component (with the names people call it: a modal is a dialog). The component a word names ranks first. For React, the form guides' demos too: a field per type with React Hook Form, TanStack Form or Formisch.