Support App

Why the Interface Matters

The best AI pipeline is useless without a good interface. The chat UI needs to accomplish three things: build customer trust (fast responses, accurate answers), enable agent visibility (classification details, escalation reasons), and handle edge cases gracefully (errors, escalation, handoff).

Key Concepts

SSE Streaming

The chat uses Server-Sent Events (SSE) — the same protocol ChatGPT uses. The server sends events as they happen:

data: {"type":"metadata","intent":"password_reset","confidence":0.9}

data: {"type":"token","content":"I understand "}
data: {"type":"token","content":"you're having "}
data: {"type":"token","content":"trouble..."}

data: [DONE]

Why streaming? Two reasons:

Quick Actions

Pre-written buttons for the 5 most common issues. These serve dual purpose:

Quick actions should cover the issues that represent 60-70% of ticket volume. For most SaaS products: login issues, billing questions, data export, integration problems, cancellation.

Metadata Bar

Below each AI response, a metadata bar shows:

This is primarily for internal use — support agents monitoring the AI's responses. In a customer-facing deployment, you might hide this behind a toggle or only show it to admin users.

The Request Pipeline

Each message goes through the full pipeline:

User message
    │
    ├─ 1. Classify (intent, priority, topic, entities)
    │
    ├─ 2. Search (FAQ fast path → hybrid search)
    │
    ├─ 3. Extract snippet from best result
    │
    ├─ 4. Score confidence (intent + search + diversity)
    │
    ├─ 5. Check escalation rules
    │
    ├─ 6. Select and fill template
    │
    └─ 7. Stream response via SSE

Agent Handoff

When escalation triggers, the UI needs to:

The handoff should feel seamless. The customer shouldn't have to repeat their issue.

Conversation Memory

The chat maintains history between messages so the AI can reference previous context. "You mentioned earlier that you're on the Business plan" makes interactions feel continuous rather than stateless.

History is passed with each API request and used for:

Architecture Pattern

┌──────────────────────────────┐
│  Chat UI (React Client)       │
│  ┌────────────────────────┐  │
│  │ Messages + Metadata     │  │
│  │ Quick Action Buttons    │  │
│  │ Input + Send            │  │
│  │ Escalation Badge        │  │
│  └────────────────────────┘  │
└──────────┬───────────────────┘
           │ POST /api/chat (SSE)
           ▼
┌──────────────────────────────┐
│  API Route (Server)           │
│  classify → search → respond  │
│  → stream via SSE             │
└──────────────────────────────┘

What You'll Build

Glossary