Composer

The AI chat composer from the AI Chat template as a standalone block: a pill input with working attachment and model menus, voice and send controls, the status bar with branch, project, agent mode and context meter, and a liquid-glass treatment that takes over the controls while the agent works.

57%

Installation

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

Pro access

Composer is a Pro component.

Your BoardUI Pro license unlocks this component and all of its source files. Activate your license once, then install it directly into your project with the CLI.

Activate your license

Use the key from your Lemon Squeezy purchase email. You only need to do this once per machine.

npx boardui@latest login YOUR_LICENSE_KEY

Install the component

The CLI copies the source and resolves every BoardUI and npm dependency for you.

npx boardui@latest add composer

This component is included in BoardUI Pro

Get BoardUI Pro now and install it right away.

Working state

The full agent-working treatment, looping: the AgentThinking thinks above the pill, the free ComposerLoader light orbits it, and GlassComposer morphs the attachment, model, and mic controls into liquid glass. Everything fades back when the reply lands.

57%

const [working, setWorking] = useState(false);
{working && <AgentThinking variant="infinity" />}<ComposerLoader active={working}>  {/* the controls morph to liquid glass while the agent works */}  <GlassComposer glass={working} /></ComposerLoader><StatusBar />

The parts

Everything ships as separate exports so the pieces compose: the pill, the status bar, the assembled preview, and the glass wrapper. The attachment and model menus are fully working popovers, plugins grid and all.

{/* The pill alone - attachment menu, input, model picker, mic, send */}<Composer />
{/* Status row - branch, project folder menu, agent mode, context meter */}<StatusBar />
{/* Both assembled, as in the AI chat template */}<AiChatComposerPreview />