PrimitivesComposer

Composer

Composer owns draft text and attachment state, auto-resizes its textarea, and exposes compound parts through dot notation. Build exactly the prompt bar your product needs without reimplementing keyboard handling.

Composer ships with a full API table, a copyable example, and accessibility notes.

tsx

Installation

Install the package once, then import Composer from its direct entry point or from the root.

bash

pnpm add @agent-ui/react

tsx

import { Composer } from "@agent-ui/react/composer";

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

1import { Composer } from "@agent-ui/react";
2 
3<Composer onSend={(text, files) => send(text, files)}>
4  <Composer.Input placeholder="Ask anything..." />
5  <div className="mt-2 flex items-center justify-between">
6    <div className="flex gap-1">
7      <Composer.SearchToggle />
8      <Composer.ThinkingToggle />
9    </div>
10    <Composer.SendButton />
11  </div>
12</Composer>

API reference

Every prop Composer accepts, its type, default, and behaviour.

API reference for this component
Name	Type	Default	Description
onSend	(text: string, attachments: File[]) => void	—	Called on Enter or send click when the draft is non-empty.
disabled	boolean	false	Disables the textarea and send button.
children	ReactNode	—	Composer parts: Input, SendButton, slots, toggles.
className	string	—	Inherits every native div attribute, including id, aria-, data-, onClick, and style.

Compound parts

Composer exposes these parts for composition.

Compound parts
Part	Description
Composer.Input	Auto-resizing textarea; Enter sends, Shift+Enter adds a line.
Composer.SendButton	Disabled until text exists; clears the draft after send.
Composer.ProviderModelSlot	Inline slot for a model or provider control.
Composer.SkillSlot	Inline slot for skills, tools, or mentions.
Composer.AttachmentSlot	Inline slot for attachment chips.
Composer.SearchToggle	Globe toggle with aria-pressed state.
Composer.ThinkingToggle	Cycles off → low → medium → high with accessible labels.
Composer.MentionMenu	Listbox surface for @-mention suggestions.

Accessibility

The textarea has an accessible name, Enter and Shift+Enter behaviour, and the send button reports its disabled state.

Use it with the rest of the library

Composer composes with MessageList, ChatShell, useChat, and the provider compose blocks. Browse the full reference or see all components in the gallery.

12 lines · copy-ready