Agent Composer

Coding agent prompt box with a model picker.

Usage

import { AgentComposer } from '@/components/ui/agent-composer'


<AgentComposer onSubmit={(prompt) => console.log(prompt)} />


// Your own providers and models
<AgentComposer
  placeholder="What should we build?"
  providers={[
    { id: 'anthropic', label: 'Anthropic', icon: <AnthropicIcon /> },
    { id: 'openai', label: 'OpenAI', icon: <OpenAIIcon /> },
  ]}
  models={[
    { value: 'Claude Opus 5.5', provider: 'anthropic' },
    { value: 'GPT-6 Sol', provider: 'openai' },
  ]}
  defaultModel="Claude Opus 5.5"
  defaultFavorites={['Claude Opus 5.5']}
  reasoningLevels={['Low', 'Medium', 'High']}
  defaultReasoning="Medium"
  modes={[{ id: 'fast', label: 'Fast' }]}
  onAction={(id) => openPanel(id)}
  onSubmit={(prompt, { model, reasoning, modes, files }) =>
    startTask({ prompt, model, reasoning, modes, files })
  }
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/agent-composer

npx shadcn@latest add @pastaui-pro/agent-composer

yarn dlx shadcn@latest add @pastaui-pro/agent-composer

bunx --bun shadcn@latest add @pastaui-pro/agent-composer

Source

Props

Agent Composer props
Prop	Type	Default	Description
value	string	= —	Controlled text value. Pair with onValueChange.
defaultValue	string	= ''	Initial text when uncontrolled.
onValueChange	(value: string) => void	= —	Called with the new text on every change and after clearing on submit.
onSubmit	(value: string, options: { model?: string; reasoning?: string; modes: string[]; files: File[] }) => void	= —	Called on Enter or the send button when the text is not empty, with every current selection. Shift+Enter inserts a new line and Enter does nothing during IME composition.
placeholder	string	= 'Describe a task, / for commands, @ to add context'	Placeholder text.
label	string	= 'Message'	Accessible label for the text field.
clearOnSubmit	boolean	= true	Clear the text and attachments after submitting.
providers	{ id: string; label: string; icon?: ReactNode }[]	= OpenAI, Anthropic, Google (with logos)	Filters in the model picker rail, after Favorites. Left and Right arrow keys switch filters while the menu is open.
models	{ value: string; label?: string; provider: string }[]	= Sample models	Options for the model picker. provider should match a provider id. Pass [] to hide the picker.
defaultModel	string	= 'Claude Opus 5.5'	Initially selected model value. Falls back to the first model.
onModelChange	(value: string) => void	= —	Called when a model is picked.
defaultFavorites	string[]	= Five sample models	Model values starred at first. Hover a row and click the star to toggle.
onFavoritesChange	(favorites: string[]) => void	= —	Called with the new favorites list after a star is toggled.
reasoningLevels	string[]	= ['None', 'Low', 'Medium', 'High', 'Extra high', 'Max']	Options in the reasoning menu. The selected one is the trigger label.
defaultReasoning	string	= 'High'	Initially selected reasoning level. Falls back to the first level.
onReasoningChange	(value: string) => void	= —	Called when a reasoning level is picked.
modes	{ id: string; label: string; icon?: ReactNode }[]	= Fast, Pro	Switch rows under the reasoning levels. Pass [] to hide the Modes section.
defaultModes	string[]	= []	Mode ids that start switched on.
onModesChange	(modes: string[]) => void	= —	Called with the ids of every mode that is on after a switch changes.
showAttach	boolean	= true	Show "Upload attachment" in the paperclip menu. Picked files appear as removable chips and are passed to onSubmit.
attachActions	{ id: string; label: string; icon?: ReactNode }[]	= Environment variables	Extra rows under "Upload attachment" in the paperclip menu.
contextActions	{ id: string; label: string; icon?: ReactNode }[]	= Files, Pull requests, Threads, Skills	The second group in the paperclip menu.
onAttach	(files: File[]) => void	= —	Called with newly picked files.
onAction	(id: string) => void	= —	Called with the id of an attach or context action row.
disabled	boolean	= false	Disables the text field, every picker, and sending.
containerClassName	string	= —	Additional classes for the outer wrapper. Max width is 712px by default.
className	string	= —	Additional classes for the textarea. Other native textarea props and ref are forwarded to it.