Produktionsreife KI-Chat-App

Kopierbare Prompt-Vorlage

Die technische Vorlage bleibt auf Englisch, damit sie direkt mit den unterstützten Coding-Agenten funktioniert. Erklärung, Auswahlhilfe und Prüfschritte sind lokalisiert.

Build a production-minded AI chat application for [AUDIENCE] that helps them [PRIMARY JOB]. Use [MODEL PROVIDERS] behind one clear product experience.

Start by defining the smallest useful end-to-end workflow, then implement it with realistic sample data and working interactions.

Core experience:
- A responsive thread list with new chat, rename, search, pin, archive, and delete-with-confirmation.
- A conversation view with token-by-token streaming, stop generation, regenerate, edit-and-resend, copy, and branch from a message.
- A composer with multiline input, file attachments, drag and drop, model selection, and three context-aware starter prompts.
- Distinct rendering for markdown, code, tables, citations, uploaded files, tool calls, and recoverable errors.
- A model switcher that explains speed, capability, and cost in plain language without inventing benchmarks.

Trust and control:
- Show when a tool is requested, what data it receives, its current state, and its result.
- Require explicit approval before any tool that writes, purchases, publishes, emails, or deletes.
- Separate cited facts from model interpretation and let users open every source.
- Make privacy, retention, and model-provider boundaries visible near the relevant action.

Product states:
- First use, empty history, uploading, streaming, stopped, rate limited, offline, tool failure, context limit, and successful recovery.
- Persist conversations locally or with [DATA LAYER], and never expose provider keys in client code.
- Preserve the draft and attachments after a failed send.

Visual direction: [VISUAL DIRECTION]. Optimize for long reading sessions, keyboard use, mobile composing, and clear hierarchy. Avoid decorative AI gradients, glowing orbs, and unexplained magic-sparkle icons.

Before finishing, test a normal answer, a cited answer, an attachment, a tool requiring approval, a stopped generation, and a failed request. Verify accessible names, focus order, reduced motion, and narrow-screen behavior.