Compose primitivescreateCompose

createCompose & withComposeLayout

Factories that pre-bind a provider's static config to a shell and context, plus an HOC variant.

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

tsx

Installation

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

bash

pnpm add @agent-ui/react

tsx

import { createCompose } 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 { createCompose, ComposeCard, ComposeTextarea } from "@agent-ui/react";
2 
3const MyCompose = createCompose({
4  id: "acme",
5  models: [{ id: "fast", name: "Fast" }],
6  maxWidth: "max-w-none",
7});
8 
9<MyCompose onSend={send}>
10  <ComposeCard>
11    <ComposeTextarea aria-label="Message" />
12  </ComposeCard>
13</MyCompose>

API reference

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

API reference for this component
Name	Type	Default	Description
id	string	—	Stage id used for data-agent-id.
hero	string	—	Optional hero heading.
placeholder	string	—	Default prompt placeholder.
models	ComposeModelOption[]	[]	Model menu options.
defaultModelId	string	—	Initially selected model.
initialToggles	Record<string, boolean>	{}	Initial tool toggles.
maxWidth	string	"max-w-3xl"	Stage max-width class.
footer	ReactNode	—	Stage footer.

Use it with the rest of the library

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

13 lines · copy-ready