Relay, AI Support Assistant

The brief and the build

Brief: Build the front end for a streaming assistant. Render markdown and code as it arrives, show tool calls as they run and finish, let the user stop a reply, and keep the conversation readable to a screen reader.

The assistant here is scripted, so the demo runs with no backend or API key, but the front end is built for a real stream: text is appended in chunks and re-rendered through a small markdown renderer that escapes HTML first, so model output can never inject markup.

A tool call shows as a collapsible block that spins while it runs and flips to a check with its arguments and result when it finishes, so users can see why an answer took a moment. The send button becomes Stop during a reply, and stale timers are cancelled by a run id so stopping and re-asking cannot interleave two replies. The log is an ARIA live region.

Light is a conventional sidebar chat. Dark is a focused single-column layout with a left rule on assistant turns. Creative is a sticker-style conversation with offset-shadow bubbles.

Results

• Problem: Support staff and customers could not tell whether an AI reply was still coming or stuck, and could not see when it used a tool.
• Built: A streaming chat UI with markdown rendering, collapsible tool-call blocks, a Stop button and an ARIA live region.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 1.0 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 10.3 KB (4.4 KB gzipped). The script alone is 6.5 KB (2.8 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 100 and 95 for accessibility (100 in the other three categories); the gap is colour contrast.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Token streaming
• Tool-call display
• Stop control
• Markdown and code blocks
• Live region