get_component_docs

Q: Why do the demos point at get_demo?

Demo code is left out unless you pass includeCode. Each demo names the get_demo call that returns it, ready to paste.

Read a component's docs page as Markdown, for the framework you pass. Use it when you want the written guide, not only the props.

Group: Inspect
Inputs: namebase?framework?includeCode?sections?
Access: Read-only

When to use it

Before using a component: its usage, and how its parts fit together.
For its accessibility notes or its demos' descriptions. For one prop or part, get_component_api is cheaper.

Inputs

InputType

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"

includeCode?boolean

Add each demo's code (long).

sections?string[]

Usage, Accessibility, Demos… All when unset.

Example prompts

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

Prompts

use shadcnio to show me how to use the Combobox in Svelte

use shadcnio: how do the Slider's parts fit together?

Call and response

Asked “How do I use the Combobox in Svelte?”, the agent sends this call. The response is real, trimmed: long lists show their first items and long strings are cut.

Call

get_component_docs({ framework: "svelte", name: "combobox", sections: ["Usage"] })

Response

---
title: Combobox
description: "Displays a searchable list of options."
category: Selection
---

## Usage

Its Default demo, in Svelte:

```svelte
<script lang="ts">
import { useListCollection } from "@ark-ui/svelte/collection"
import { useFilter } from "@ark-ui/svelte/locale"
import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox"
const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]
const __useFilter1 = useFilter({ sensitivity: "base" })
const { contains } = $derived(__useFilter1())
const __useListCollection2 = useListCollection({
    filter: contains,
    initialItems: frameworks,
  })
const { filter } = __useListCollection2
const collection = $derived(__useListCollection2.collection())
const handleInputValueChange = ({ inputValue }: { inputValue: string }) => {
    filter(inputValue);
  }
</script>
```
…

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_component_docs, one of the Inspect tools. Your agent reads it to decide when to call the tool:

tools/listget_component_docs.description

A component's docs page as Markdown. Ask for the sections you need: a whole page is long.

FAQ

Which sections of the docs page can I ask for?

Installation, Anatomy, Usage, Accessibility, Demos and API Reference, by heading. One or two keep the response short; a whole page can pass some clients' output limits.

Why do the demos point at get_demo?

Demo code is left out unless you pass includeCode. Each demo names the get_demo call that returns it, ready to paste.