You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2.0 KiB

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.