5 AI Interface Patterns
A pattern is a whole screen, not one control — the chat, the research run, the agent loop. Each one is a single React + Tailwind file you copy, assembled from components documented individually on this site.
Component — one control, like the composer or a tool call. Browse 29 →
Pattern — the screen those controls live in, wired together and ready to remix.
The canonical chat interface — sidebar, streaming messages, prompt input with model selector, and sources.
5 components
A research flow that shows search tool calls, reasoning, sources and a cited final answer.
4 components
A coding run with agent status, tool calls, diffs and a human-in-the-loop approval gate.
3 components
A voice-first conversation — live waveform states, a recording input, a spoken transcript and a typed fallback.
5 components
A preferences screen that picks the model, reasoning level and tools, and manages persistent memory.
4 components