Compose primitivesModelChip
Model Chip
Model menu trigger with keyboard navigation, light tone, and top or bottom placement.
ModelChip ships with a full API table, a copyable example, and accessibility notes.
tsx
Installation
Install the package once, then import ModelChip from its direct entry point or from the root.
bash
pnpm add @agent-ui/reacttsx
import { ModelChip } from "@agent-ui/react";Tailwind CSS v4 users: add @source "../node_modules/@agent-ui/react/src" to the global stylesheet so the library utilities are generated.
Usage
The example below is the same code that renders the preview. Copy it, swap in your own handlers, and ship.
tsx
import { ModelChip } from "@agent-ui/react"; <ModelChip tone="light" placement="bottom" />API reference
Every prop ModelChip accepts, its type, default, and behaviour.
| Name | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Model" | Shown when no model is selected. |
| plain | boolean | false | Hides the chevron. |
| tone | "default" | "light" | "default" | Popover tone; light matches provider stages. |
| placement | "top" | "bottom" | "top" | Menu opening side. |
| className | string | — | Merged onto the wrapper. |
Use it with the rest of the library
ModelChip composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.
3 lines · copy-ready