# Reusable AI Interface Prompt

Create or update an AI-assisted frontend using the existing AI Elements under
`src/shared/components/ui/shadcn-io/ai`.

## React composition contract

- Compose the smallest relevant set of `Conversation`, `Message`, `Response`,
  `PromptInput`, `Actions`, `Reasoning`, `Source`, `Task`, `Tool`, or
  `WebPreview` components.
- Keep provider credentials and model calls on an approved backend; never expose
  secret keys through `VITE_*` variables or public browser code.
- Model pending, submitted, streaming, complete, stopped, and error states
  explicitly.
- Keep component rendering separate from transport and domain orchestration.

## Styling theme: calm intelligence

- Make user input, assistant output, tool activity, and sources visually
  distinguishable without turning the interface into a separate design system.
- Use semantic project tokens and existing typography.
- Streamed output must remain readable without excessive layout movement.
- Reasoning and tool details use progressive disclosure.
- Destructive or externally visible tool actions require clear confirmation.

## Request

- **User goal:** `<What the AI helps the user accomplish>`
- **Input:** `<Text, files, images, structured selection, or context>`
- **Output:** `<Text, code, visualization, task, or tool result>`
- **Transport/backend:** `<Existing approved API or "prompt handoff only">`
- **Grounding:** `<Sources and citations required>`
- **Actions:** `<Copy, retry, stop, approve, reject, or apply>`

## Acceptance criteria

1. The UI uses existing AI Elements instead of implementing competing chat
   primitives.
2. No token, credential, or private source is exposed in client code or logs.
3. Keyboard, screen reader, streaming, error, retry, and stop behavior are
   defined.
4. Source citations and tool status are shown when the workflow uses them.
5. Generated code or mutations are reviewed before being applied.

Run focused verification allowed by `agents.md` and finish with a simple
**TL;DR**.