Photo by Steve Johnson on Unsplash
How to Add AI Chat to Your App: UX Patterns That Users Love
How to Add AI Chat to Your App: UX Patterns That Users Love
AI chat is the most common interface for LLM-powered products. But a great chat UX goes beyond a text input and a response. Here are the patterns that make users love your AI chat.
Chat Layout Patterns
Pattern 1: Full-Page Chat (ChatGPT-style)
Chat takes the entire screen. Sidebar for conversation history. Best for products where chat IS the product.
Pattern 2: Side Panel Chat
Chat in a right-side panel alongside the main content. Best for tools where AI assists with a primary task (writing, coding, data analysis).
Pattern 3: Floating Chat Widget
Small chat bubble in the corner that expands on click. Best for customer support or contextual help within an app.
Pattern 4: Inline AI Assistance
AI suggestions appear inline within a form or editor. Best for autocomplete, suggestions, or content enhancement.
Streaming Responses (Essential)
Never make users wait for the complete response. Stream tokens as they're generated.
Why streaming matters:
- Perceived speed is 3-5x faster (users see output immediately)
- Users can stop generation early if it's going in the wrong direction
- Creates a "thinking" feel that builds trust
Implementation: Use the Vercel AI SDK which handles streaming from OpenAI/Anthropic and provides React hooks for displaying streamed text.
UX Elements That Matter
Input Area
- Auto-resizing textarea (grows with content)
- Send button + Enter to submit (Shift+Enter for new line)
- Character/token count (if limits exist)
- Suggested prompts for empty state
Response Display
- Streaming text with cursor/blinking indicator
- Markdown rendering (headings, lists, code blocks)
- Copy button on responses and code blocks
- Regenerate button ("Try again")
- Feedback buttons (thumbs up/down)
Conversation Management
- Conversation history in sidebar
- New conversation button
- Rename conversations
- Delete conversations
- Search across conversations
Loading and Error States
- Typing indicator while AI is processing
- Graceful timeout message ("This is taking longer than usual")
- Rate limit message with retry timer
- Error message with "Try again" button
Context Management
Conversation Memory
Send previous messages in the API call so the AI remembers context. Limit to last 10-20 messages to manage token costs.
System Prompt
Define the AI's persona, capabilities, and constraints. Keep it focused: "You are a [role] that helps users [task]. You should [constraints]."
User Data Context
If your AI needs to reference user data (documents, settings), inject relevant context into the system prompt or use RAG.
Cost Management
| Strategy | Savings | Trade-off |
|---|---|---|
| Limit conversation length | High | Users restart for long tasks |
| Use cheaper models for simple tasks | Medium | Lower quality for some responses |
| Cache common responses | Medium | Stale for dynamic content |
| Set token limits per response | Medium | May cut off long answers |
| Rate limit per user per hour | Low | Frustrates power users |
Building an AI product? Read How to Build an AI SaaS MVP.
Need a boilerplate? Browse on MVPHub.
