# AI composer

> A focused assistant thread where messages lift out of the composer and replies stream in.

- Type: Block
- Page: https://uiarc.dev/components/blocks/ai-composer
- Markdown: https://uiarc.dev/components/blocks/ai-composer/markdown

- Access: Arc Pro
- Registry id: `ai-composer`
- Source file: `registry/blocks/ai-composer/ai-composer.tsx`
- Built from: Copy button, Text stream, Text shimmer
- Keywords: react ai chat, chatgpt clone ui, ai composer, chat input with attachments, llm chat interface, assistant chat panel, streaming chat ui

Use this for an in-product assistant. Connect onSend to your model endpoint and stream its tokens into the reply; files and replies in the preview are simulated.

## When to use

- An in-product assistant or chat panel.
- Chats with file attachments and suggested questions.
- Replies that stream in with a thinking shimmer, a stop control, and copy buttons.

## When not to use

- Use support-conversation for chats with human agents.
- Use command-palette for quick actions and search.
- Use text-stream on its own when you already have a chat layout.

## Installation

AI composer is part of Arc Pro. The live preview is public; the source and install command need Pro.

### CLI with a Pro token

1. Create a token in your account and set it in the environment (or `.env.local`). Never commit it.

```bash
export ARC_PRO_TOKEN=arc_pro_...
```

2. Add the Pro registry to `components.json`:

```json
{
  "registries": {
    "@uiarc": "https://uiarc.dev/r/{name}.json",
    "@uiarc-pro": {
      "url": "https://uiarc.dev/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${ARC_PRO_TOKEN}"
      }
    }
  }
}
```

3. Install:

```bash
npx shadcn@latest add @uiarc-pro/ai-composer
```

### Manual

Signed-in Pro members can copy the source from the Manual tab on the docs page.

- Plans: https://uiarc.dev/pricing
- Create a Pro token: https://uiarc.dev/account#pro-access
- Setup guide: https://uiarc.dev/docs/ai#pro-access

## Usage

```tsx
import { AiComposer } from "@/registry/blocks/ai-composer/ai-composer";

export function Assistant() {
  return (
    <AiComposer
      onSend={({ text, files }) =>
        fetch("/api/chat", { method: "POST", body: JSON.stringify({ text, files }) })
      }
    />
  );
}
```

## API reference

### AiComposer

An assistant thread with a composer, sample file attachments, suggested questions, and streamed replies with copy buttons. Replies and attachments are simulated.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onSend` | `(message: { text: string; files: string[] }) => void` | – | Called with the text and attached file names each time a message is sent. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Enter | Sends the message. Ignored during IME composition. |
| Shift+Enter | Inserts a new line. |
| Escape | Stops a reply that is streaming. |

## Accessibility

- Suggested questions are a labelled group of buttons.
- Sending, streaming, and stopping are announced through a visually hidden role="status" region.

## Motion

- Sent messages lift out of the composer into the thread, and replies stream in with a shimmer while thinking.
- Reduced motion removes the lift and shows replies without the travel animation.

## Responsive behavior

- The panel is up to 760px wide and 660px tall; below 560px it drops to 620px, hides the keyboard hint, and widens bubbles to 86%.
- Copy buttons on sent messages show on hover for mouse and are always visible on touch.

## Performance

- The thread is not virtualized; long histories grow the DOM, so trim or paginate old messages.
- A ResizeObserver measures the composer so the thread keeps room for it.

## Notes for AI

- Use for an in-product assistant or chat panel.
- onSend only reports the message; the reply is simulated inside the block, so stream your model's tokens into the reply state instead.
- Composes Arc copy-button, text-stream, and text-shimmer.

## Related

- [Text shimmer](https://uiarc.dev/components/text-shimmer/markdown): Show ongoing work with a calm light across the words.
- [Support conversation](https://uiarc.dev/components/blocks/support-conversation/markdown): A responsive message thread with useful quick replies and live feedback.
- [Command palette](https://uiarc.dev/components/blocks/command-palette/markdown): A complete keyboard driven action surface with search, grouped results, and shortcuts.
- [Copy button](https://uiarc.dev/components/copy-button/markdown): Copy a value with immediate confirmation.

## Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://uiarc.dev/llms.txt