Theme · Product · Intermediate

AI Chat Product UI

AI chat UI = a persistent conversation list, a scrolling message thread, and a composer pinned to the bottom.

How to prompt it

Build an AI chat product UI (ChatGPT-style).

STYLE
- Dark sidebar (#0c1220), light thread area (#111827)
- 16px message bubbles, accent color for the user bubble
- Model pill inside the composer (e.g. "Sage-1")

LAYOUT
- Left conversation sidebar (~96px): "New chat" action, a list of past threads with one active, and an "Upgrade to Pro" footer
- Main thread: a greeting bubble, user and assistant messages, pinned composer at the bottom

COMPONENTS
- Conversation list with an active state
- Assistant and user message bubbles (left / right aligned)
- Composer with a placeholder, a model pill, and a round send button

TECHNICAL
- React
- Tailwind CSS
- shadcn/ui

Revise only the message thread of this chat UI. Leave the sidebar and composer untouched.

CHANGES
- Group consecutive messages from the same role under one avatar
- Reveal a copy button on row hover
- Render code blocks with a filename tab and syntax colours

DO NOT
- Do not change the sidebar or the composer
- Do not introduce new accent colours

Build a production AI chat product UI, dark theme, with streaming responses.

STYLE
- Background #0b0d10, panels #15181d, 10px radii, hairline borders
- Message rows have no boxes; the surface appears only on hover
- One accent for the send action, neutrals everywhere else

LAYOUT
- 260px conversation sidebar, resizable, with search and new chat
- Centred thread capped at 768px for a comfortable measure
- Composer pinned to the bottom, growing to six rows before it scrolls

COMPONENTS
- Conversation list, message thread, composer, model selector, icon button
- Streaming: text fades in token by token, stop button replaces send while generating

STATES
- Empty thread offers three prompt starters
- A failed message keeps its text with a retry affordance

TECHNICAL
- React, Tailwind CSS, shadcn/ui
- Enter sends, Shift+Enter inserts a newline, Cmd+K opens search

MOTION
- New message: fade with an 8px rise, 180ms ease-out. History renders with no animation.
- Typing indicator: three dots, 1.2s loop.
- Auto-scroll uses smooth behaviour, not a tweened transform.
- prefers-reduced-motion: no rise on new messages.

Modify prompts change only the target — the rest of your page stays untouched.

Tips

Keep the composer pinned and make the model pill legible — it is the one brand surface users notice.

AI Chat Product UI

Tips

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns