A chat interface is six stacked components: message area, input bar, suggested prompts, status indicators, header, and a disclosure surface for sources and context. The first five are the shell every team builds. The sixth is where most AI products quietly fail.
The Core Components
A chat interface has six essential components. The first five are the chat shell most teams already build; the sixth, the disclosure surface, is where most products quietly fail.
- Message area
- The scrollable container showing the conversation history. User messages align right, AI messages align left. Each message has a bubble, optional avatar, and timestamp.
- Input bar
- Where users type their message. Includes a text field, send button, and optionally: file upload, voice input toggle, and character count.
- Suggested prompts
- Clickable chips or buttons showing example queries. These appear in the empty state (to help users start) and after AI responses (as follow-up suggestions).
- Status indicators
- Typing dots, "thinking" spinners, or streaming text that show the AI is processing. Critical for perceived responsiveness.
- Header / toolbar
- Shows the AI's name/avatar, conversation title, and actions (new chat, settings, history).
- Disclosure surface
- The always-visible signals that tell the user what the AI is, what it can see right now, and what it's authorized to do. Identity badge in the header, context indicators in the input bar, and an audit trail under each AI action. Without this surface, users feel surveilled rather than helped, and the product gets pulled.
Message Bubble Design
Message bubbles are the visual backbone of your chat UI. Key decisions:
Alignment: User messages right-aligned, AI messages left-aligned. This is a universal convention - don't break it.
Color: User messages get the primary/accent color (filled). AI messages get a neutral background (white/gray or surface color). This creates instant visual scanning.
Width: Messages should have a max-width (60-75% of container). Full-width messages are hard to read. On mobile, allow up to 85%.
Rich content: AI responses often include code blocks, tables, lists, images, and buttons. Design these as first-class elements within the bubble - not as plain text dumped into a container.
Spacing: 8-12px between messages from the same sender, 16-20px between sender changes. This creates natural visual grouping.
The Empty State
The empty state (first visit, no messages) is the most important screen in your conversational UI. Users who don't know what to type will leave.
Include:
- A welcome message explaining what the AI can do (1-2 sentences, not a paragraph)
- 3-4 suggested prompts relevant to common use cases
- A subtle capability list or examples section
Real-world examples:
- ChatGPT shows "How can I help you?" with prompt suggestions organized by capability
- Claude shows a clean input with suggested starters
- Perplexity shows trending topics and example queries
Don't overload the empty state with features, tutorials, or marketing. Users came to chat - get them typing within 3 seconds of landing on the page.
Designing the First Message
The empty state is the container. The first message is the thing inside it people actually read, and it is where most chat products waste their only chance to explain themselves. "Hi! I'm an AI assistant. How can I help you today?" is the default, and it tells the user nothing they did not already know.
A first message has three jobs, and it should do all three inside two sentences.
- Say what this one is for
- Not "I am an AI assistant" but what this particular assistant does that a general one does not. "I can answer questions about your account, billing and orders" beats "How can I help?" because it draws the boundary the user is about to test anyway.
- Say what it can already see
- If the assistant can see the current page, an uploaded file, or the user's order history, say so in the first message. People who do not know what it can see either under-ask or feel watched. This is the disclosure surface doing its job at message one.
- Show one thing worth trying
- One concrete example beats a capability list. "Try: why was I charged twice in March" gets typed. "I can help with billing questions" gets ignored.
What to Say About Limits, and When
Do not open with limitations. A first message that leads with what the assistant cannot do reads as a disclaimer, and gets skipped along with everything around it.
Name each limit at the moment it becomes relevant instead: when someone asks for something out of scope, when the assistant is about to act rather than answer, or when it is working from information that may be out of date. A limit stated at the point of use gets read. The same limit stated in the greeting does not.
The first message is not a welcome. Treat it as the assistant introducing its job, not greeting a guest. Warmth without information is the most common failure here, and it is why so many chat products feel identical in the first five seconds.