How to implement Streaming AI Responses (Real-time UI) in Typescript

1import OpenAI from 'openai';
2import { Request, Response } from 'express';
3
4const client = new OpenAI({
5  apiKey: process.env.OPENAI_API_KEY,
6});
7
8export async function streamHandler(req: Request, res: Response) {
9  const { message } = req.body;
10
11  res.setHeader('Content-Type', 'text/event-stream');
12  res.setHeader('Cache-Control', 'no-cache');
13  res.setHeader('Connection', 'keep-alive');
14
15  try {
16    const stream = await client.chat.completions.create({
17      model: 'gpt-4o-mini',
18      messages: [
19        {
20          role: 'system',
21          content: 'You are a helpful assistant.',
22        },
23        {
24          role: 'user',
25          content: message,
26        },
27      ],
28      stream: true,
29    });
30
31    for await (const chunk of stream) {
32      if (chunk.choices[0]?.delta?.content) {
33        res.write(
34          `data: ${JSON.stringify({ token: chunk.choices[0].delta.content })}\n\n`
35        );
36      }
37    }
38
39    res.write('data: [DONE]\n\n');
40    res.end();
41  } catch (error) {
42    res.write(`data: ${JSON.stringify({ error: 'Stream failed' })}\n\n`);
43    res.end();
44  }
45}
46
47// Client-side usage
48/*
49const response = await fetch('/api/stream', {
50  method: 'POST',
51  headers: { 'Content-Type': 'application/json' },
52  body: JSON.stringify({ message: 'Hello!' }),
53});
54
55const reader = response.body?.getReader();
56const decoder = new TextDecoder();
57
58while (true) {
59  const { done, value } = await reader.read();
60  if (done) break;
61  const text = decoder.decode(value);
62  const lines = text.split('\n');
63  for (const line of lines) {
64    if (line.startsWith('data: ')) {
65      const json = JSON.parse(line.slice(6));
66      if (json.token) console.log(json.token);
67    }
68  }
69}
70*/