design-infraReport a problem or share feedback← Catalog
Template · AI chat
curatedtheme-awarefreeoc/template-ai-chat
Assistant UI at app/chat/page.tsx: conversation sidebar (@oc/app-shell), @oc/chat-thread with tool-call chips, @oc/agent-status while the model works, and @oc/prompt-composer pinned to the bottom. Fake responder included — swap in your streaming call.
$
npx shadcn@latest add @design-infra/template-ai-chatnpm deps: lucide-react
Our notes
Starter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.- Source
- oc
- Kind
- template
- Categories
- ai-chat, agent-ui, sidebar
- Use as
- drop-in — replaces your component
- Applies to
- ai-chatagent-uisidebar
- Motion
- on loop, state · subtle · canvas + css · medium cost
- Tags
- oc, template, oc/app-shell, oc/chat-thread, oc/prompt-composer, oc/agent-status
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Ai Reasoningsmoothui/ai-reasoningCollapsible reasoning trace: the label shimmers 'Thinking' only while isStreaming, then settles to 'Thought for 3.2s' (measured, or pass duration) and auto-collapses — until the user toggles it, after which it stops deciding for them. Muted-foreground chrome, inherits the theme; no shimmer under reduced motion.
- Chat threadoc/chat-threadAI conversation view: user bubbles, assistant turns with markdown-ish text + code blocks, tool-call chips, copy/vote/regenerate actions, @oc/agent-status while pending. Auto-sticks to bottom.
- Sidebar Navbeautifui/sidebar-navCollapsible workspace and chat navigation with gliding hover states. Then add `@import "./beautifui/sidebar-nav.css";` to your app's globals.css.