AI UI Development

Introduction

Building great AI UIs requires more than a chat box. Streaming text, loading states, tool calls, citations, retry buttons, copy/regenerate, file uploads — all need thoughtful UX.

Beginner analogy: Like designing a chat app, but with extra states for 'thinking', 'using a tool', 'citing sources'.

Understanding the topic

Core concepts to understand:

• Streaming text — token-by-token reveal.
• Markdown rendering with code highlighting.
• Tool indicators — 'Searching the web…'
• Citations — show source links inline.
• Stop / regenerate / copy buttons.
• Vercel AI SDK — useChat() hook handles most of this.

Syntax reference

Visual workflow / architecture:

┌─ Chat UI ───────────────────┐
│ User: How does TLS work?    │
│                             │
│ AI: 🔍 Searching docs...    │
│ TLS is a protocol that...   │  ← streaming
│ [1] rfc8446.txt             │  ← citation
│                             │
│ [↻ Regenerate]  [📋 Copy]   │
└─────────────────────────────┘

Real-world use

ChatGPT, Claude.ai, Perplexity and Cursor set the bar — copy their patterns.

Best practices

• Use Vercel AI SDK or assistant-ui for fast scaffolding.
• Always show 'thinking' state immediately.
• Make stop/copy/retry one click away.

Hands-on exercise

Interview preparation — practice these questions:

• Q1. What UX states does an AI chat need?
• Q2. How do you render markdown safely?
• Q3. How do citations work in Perplexity-style UIs?