elorm/ui

Prompt Composer

An AI prompt input block with action shortcuts, attachment control, and suggestion chips.

Saved preference for elorm init --ui-library base-ui
PreviewCode
import { PromptComposer } from "@/components/blocks/prompt-composer"

export function PromptComposerDemo() {
  return <PromptComposer />
}

Installation#

Usage#

import { PromptComposer } from "@/components/blocks/prompt-composer"

An AI prompt input block with action shortcuts, attachment control, and suggestion chips.

Use as a hero prompt box, agent command bar, or AI app launcher. Connect onPromptSubmit to your chat, agent, or workflow endpoint.

Composition#

Prompt Composer
├── FieldGroup
├── Field
├── Button

Examples#

Follow-up composer#

PreviewCode
import { PromptComposer } from "@/components/blocks/prompt-composer"

export function PromptComposerDemo() {
  return (
    <PromptComposer variant="follow-up" placeholder="Send follow-up" />
  )
}

Custom suggestions#

PreviewCode
import { PromptComposer } from "@/components/blocks/prompt-composer"

export function PromptComposerDemo() {
  return (
    <PromptComposer suggestions={[{ label: "Landing page", prompt: "Build a landing page for " }, { label: "Dashboard", prompt: "Create a dashboard that tracks " }]} />
  )
}
Benchmark GridPage Header