Part 11 · 1 chapters · ~12 min

The Frontend of AI Products

How a model changes the interface: streaming for time to first token with block-buffered markdown, cancellation that also stops the server, partial structured output that confirms only when whole, citations and honest uncertainty as trust signals, the nine states a model adds, and feedback that becomes eval cases.

Streaming, stopping and showing your sources

code

// a streamed answer with cancellation and block-buffered rendering
export function useAnswer() {
  const [text, setText] = useState(''); const [status, setStatus] = useState<'idle' | 'streaming' | 'stopped' | 'done' | 'failed'>('idle');
  const ctrl = useRef<AbortController | null>(null);

  async function ask(question: string) {
    ctrl.current?.abort();                                    // a new question cancels the old one
    ctrl.current = new AbortController(); setText(''); setStatus('streaming');
    try {
      const res = await fetch('/api/answer', { method: 'POST', body: JSON.stringify({ question }), signal: ctrl.current.signal });
      const reader = res.body!.pipeThrough(new TextDecoderStream()).getReader();
      let buf = '';
      for (;;) {
        const { value, done } = await reader.read(); if (done) break;
        buf += value;
        const cut = buf.lastIndexOf('\n\n');                  // flush whole blocks only
        if (cut >= 0) { setText(t => t + buf.slice(0, cut + 2)); buf = buf.slice(cut + 2); }
      }
      setText(t => t + buf); setStatus('done');
    } catch (e) { setStatus((e as Error).name === 'AbortError' ? 'stopped' : 'failed'); }
  }
  return { text, status, ask, stop: () => ctrl.current?.abort() };
}

// server side (Node): stop generating when the client goes away
req.on('close', () => upstream.abort());

where frontend staff work meets AI

This is the chapter that joins the AI-native course to everything else in Learna: streams (Browser), state machines (FSD), accessibility (Disciplines), trust signals (Trust) and the eval (part 8). A senior frontend engineer who can design these nine states well is rare, and it is a natural place for your work on M and the transfer-draft mock to show.

THE FRONTEND OF AI PRODUCTS

streaming, cancellation, partial structure, citations and the states a model adds to every screen

swipe the figure sideways, or tap expand for full screen

1/6

streaming

Streaming: the server streams tokens (server-sent events or a streamed fetch body); the client appends them as they arrive. Time to first token matters more than total time. Render streamed markdown carefully: a half-finished code fence or table should not jump the layout on every token, so buffer to block boundaries.