Compose primitivesuseCompose

useCompose

Read and drive compose state from any child of ComposeProvider.

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

tsx

Draft: 0 characters · empty

Installation

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

bash

pnpm add @agent-ui/react

tsx

import { useCompose } 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

1import { useCompose } from "@agent-ui/react";
2 
3function DraftCount() {
4  const { text } = useCompose();
5  return <span>{text.length} characters</span>;
6}

API reference

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

API reference for this component
Name	Type	Default	Description
text	string	—	Current draft.
setText	(t: string) => void	—	Draft setter.
send	(text?: string) => void	—	Send the draft or a provided override.
canSend	boolean	—	True when the draft is non-empty and not disabled.
disabled	boolean	—	Stage disabled state.
models	ComposeModelOption[]	—	Available models.
modelId	string \| null	—	Selected model id.
setModelId	(id: string) => void	—	Model setter.
toggles	Record<string, boolean>	—	Tool toggle map.
toggle	(key: string) => void	—	Flip a tool toggle.

Use it with the rest of the library

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

6 lines · copy-ready