ai-ui-patternslisted

# AI UI Patterns An LLM feature is an unusually hostile UI problem: responses take seconds instead of milliseconds, arrive incrementally, fail partway through, cost money per attempt, and sometimes contain content that tries to manipulate the surrounding application. A chat box wired to a completion endpoint handles none of that. ## The latency contract Users tolerate slow generation and do not tolerate silence. Show state within 100ms of submit, first token as soon as it exists, and never a spinner with no other signal. Four states, all of which need a design: **pending** (request sent, nothing back yet), **streaming** (tokens arriving), **complete**, **failed or cancelled**. The failure state is the one most implementations skip, and it is the one users hit on flaky connections. ## Streaming Stream by default. A 40-token response feels instant when streamed and slow when buffered, even at identical total latency. ```ts // app/api/chat/route.ts export async function POST(req: Request) { const { messages } = await req.json(); const result = streamText({ model: openai('gpt-4o'), messages }); return result.toDataStreamResponse(); } ``` Three details that separate a demo from production: **Cancellation.** Pass the request's `AbortSignal` through to the provider so a stopped generation stops being billed. Without it, "Stop" hides the output while the tokens keep costing money. **Backpressure.** Rendering on every token thrashes React at high token rates. Batch wit