# McpPrompts
URL: /reference/react-ui-base/mcp-prompts

import { McpPromptsDemoPreview } from "./_demos/mcp-prompts-demo";

# McpPrompts

`McpPrompts` in `@tambo-ai/react-ui-base` owns the MCP prompt selection lifecycle — listing available prompts, fetching selected prompt content, validating format, and surfacing errors — while keeping styling in `@tambo-ai/ui-registry` or your own UI layer.

## Demo

<McpPromptsDemoPreview />

## Anatomy

```tsx
<McpPrompts.Root onInsertText={handleInsert}>
  <McpPrompts.Trigger />
  <McpPrompts.List>
    <McpPrompts.Item name="..." />
  </McpPrompts.List>
  <McpPrompts.Error />
</McpPrompts.Root>
```

## Examples

### Prompt Selection Lifecycle

The `Root` manages a selection lifecycle: `idle` -> `fetching` -> `done` (or `error`). When a prompt is selected via `Item`, the Root fetches the prompt content, validates it, and calls `onInsertText` with the extracted text.

```tsx
<McpPrompts.Root
  onInsertText={(text) => {
    setInputValue((prev) => (prev ? `${prev}\n\n${text}` : text));
  }}
>
  {/* children */}
</McpPrompts.Root>
```

### Accessing List State via Render Props

Use the render prop on `List` to access the prompt collection for custom iteration:

```tsx
<McpPrompts.List
  render={(props, state) => (
    <ul {...props}>
      {state.prompts.map((entry) => (
        <li key={entry.prompt.name}>
          <McpPrompts.Item
            name={entry.prompt.name}
            description={entry.prompt.description}
          >
            <strong>{entry.prompt.name}</strong>
            <span>{entry.prompt.description}</span>
          </McpPrompts.Item>
        </li>
      ))}
    </ul>
  )}
/>
```

### Error Handling

The `Error` part only renders when the selection lifecycle enters the `error` state (invalid format, no text content, or fetch failure). Consumers are responsible for managing error dismissal.

```tsx
<McpPrompts.Error
  render={(props, state) => (
    <div {...props} role="alert" className="text-red-500">
      {state.error}
    </div>
  )}
/>
```

## API reference

### Root

| Prop           | Type                     | Description                                           |
| -------------- | ------------------------ | ----------------------------------------------------- |
| `onInsertText` | `(text: string) => void` | Optional. Callback invoked when prompt text is ready. |

Renders nothing when no MCP prompts are available and not loading.

**Render state:**

| Field         | Type                                        | Description                         |
| ------------- | ------------------------------------------- | ----------------------------------- |
| `promptCount` | `number`                                    | Number of available prompts.        |
| `isLoading`   | `boolean`                                   | Whether the prompt list is loading. |
| `status`      | `"idle" \| "fetching" \| "error" \| "done"` | Current selection lifecycle status. |

### Trigger

No custom props. Renders as a `<button>` disabled when no prompts are available.

**Render state:**

| Field        | Type      | Description                         |
| ------------ | --------- | ----------------------------------- |
| `hasPrompts` | `boolean` | Whether prompts are available.      |
| `isLoading`  | `boolean` | Whether the prompt list is loading. |

### List

No custom props. Provides the prompt collection through render state.

**Render state:**

| Field         | Type                | Description                 |
| ------------- | ------------------- | --------------------------- |
| `prompts`     | `ListPromptEntry[]` | Array of available prompts. |
| `promptCount` | `number`            | Count of available prompts. |

### Item

| Prop          | Type     | Description                             |
| ------------- | -------- | --------------------------------------- |
| `name`        | `string` | The prompt name to select when clicked. |
| `description` | `string` | Optional description exposed via state. |

**Render state:**

| Field         | Type                  | Description                                |
| ------------- | --------------------- | ------------------------------------------ |
| `name`        | `string`              | The prompt name.                           |
| `description` | `string \| undefined` | The prompt description.                    |
| `isSelected`  | `boolean`             | Whether this prompt is currently selected. |
| `select`      | `() => void`          | Selects this prompt.                       |

### Error

No custom props. Renders only when the selection status is `"error"`.

**Render state:**

| Field   | Type             | Description        |
| ------- | ---------------- | ------------------ |
| `error` | `string \| null` | The error message. |

## Accessibility

* `Trigger` renders as `<button>` and is automatically disabled when no prompts are available.
* `Item` renders as `<button>` with a `data-selected` attribute for the currently selected prompt.
* Consumers should provide appropriate `aria-label` attributes on the trigger.

## Styling Hooks

* `data-slot="mcp-prompts"`
* `data-slot="mcp-prompts-trigger"`
* `data-slot="mcp-prompts-list"`
* `data-slot="mcp-prompts-item"`
* `data-slot="mcp-prompts-error"`
* `data-selected` on `Item` when selected