Quick Start
Build a working chat input in a few steps — state, mentions, commands, and structured output you can send straight to a model.
Render with state
The usePromptAreaState hook manages the editor value and exposes derived state. Spread its bind onto the component:
'use client'
import { PromptArea, usePromptAreaState } from 'prompt-area'
import 'prompt-area/styles.css'
export function ChatInput() {
const { bind, plainText, isEmpty, clear } = usePromptAreaState()
function handleSubmit() {
if (isEmpty) return
sendToModel(plainText)
clear()
}
return (
<PromptArea
{...bind}
placeholder="Ask anything…"
onSubmit={handleSubmit}
autoGrow
minHeight={48}
/>
)
}'use client'
import { PromptArea } from '@/components/prompt-area'
import { usePromptAreaState } from '@/components/use-prompt-area-state'
export function ChatInput() {
const { bind, plainText, isEmpty, clear } = usePromptAreaState()
function handleSubmit() {
if (isEmpty) return
sendToModel(plainText)
clear()
}
return (
<PromptArea
{...bind}
placeholder="Ask anything…"
onSubmit={handleSubmit}
autoGrow
minHeight={48}
/>
)
}The two differ only in imports: the npm package re-exports everything from prompt-area (and ships a stylesheet), while shadcn copies the source into @/components. The snippets below use the shadcn paths — for npm, import the same names from prompt-area.
Add mentions and commands
Triggers are just configuration. Use the presets and give each an onSearch function that returns items as the user types. Each selection becomes an immutable chip.
import {
mentionTrigger,
commandTrigger,
} from '@/components/trigger-presets'
const USERS = [
{ value: 'ana', label: 'Ana', description: 'Designer' },
{ value: 'bob', label: 'Bob', description: 'Engineer' },
]
const COMMANDS = [
{ value: 'summarize', label: 'summarize', description: 'Summarize the thread' },
]
const search = (items) => (q) =>
items.filter((i) => i.label.toLowerCase().includes(q.toLowerCase()))
<PromptArea
{...bind}
triggers={[
mentionTrigger({ onSearch: search(USERS) }),
commandTrigger({ onSearch: search(COMMANDS) }),
]}
/>Read structured output
Instead of parsing a string, read typed chips with getChipsByTrigger and send exactly what your prompt needs:
import { getChipsByTrigger } from '@/components/segment-helpers'
const mentions = getChipsByTrigger(bind.value, '@').map((c) => c.value)
const command = getChipsByTrigger(bind.value, '/')[0]?.value
await runChat({ prompt: plainText, context: mentions, command })