Agent Prompt Composer

Prompt Templates: Pre-defined templates for common tasks
Persona Selection: Switch between different AI personas
Voice Input: Record prompts using voice (UI ready)
File Attachments: Attach files to prompts (UI ready)
Character Counter: Track prompt length with limits
Quick Actions: Clear and enhance prompts
Keyboard Shortcuts: Enter to submit, Shift+Enter for new line
Loading States: Visual feedback during processing

An advanced prompt input component with templates, personas, voice input, and rich interactions for AI agent interfaces.

Features

A simple prompt composer with essential features.

Complete prompt composer with templates, personas, and all features enabled.

npx shadcn add "https://agents-ui-kit.com/c/agent-prompt-composer.json"

Prop	Type	Default	Description
value	`string`	`""`	Current prompt value
onChange	`(value: string) => void`	-	Callback when prompt changes
onSubmit	`(value: string, options?: { persona?: Persona; template?: PromptTemplate }) => void`	-	Submit handler
placeholder	`string`	`"Ask anything..."`	Input placeholder text
disabled	`boolean`	`false`	Disable the input
isLoading	`boolean`	`false`	Show loading state
templates	`PromptTemplate[]`	`[]`	Available prompt templates
personas	`Persona[]`	`[]`	Available AI personas
showVoiceInput	`boolean`	`true`	Show voice input button
showFileAttachment	`boolean`	`true`	Show file attachment button
showSettings	`boolean`	`true`	Show settings button
className	`string`	-	Additional CSS classes

Property	Type	Required	Description
id	`string`	Yes	Unique identifier
name	`string`	Yes	Template name
prompt	`string`	Yes	Template content
description	`string`	No	Template description

Property	Type	Required	Description
id	`string`	Yes	Unique identifier
name	`string`	Yes	Persona name
avatar	`string`	No	Avatar URL
systemPrompt	`string`	Yes	System prompt for persona
description	`string`	No	Persona description