AIAdvanced11 min read2026-03-01

Building an AI Chatbot with Streaming Responses

Build a modern, streaming AI chatbot in TypeScript using Server-Sent Events (SSE) and OpenAI API.

Prerequisites

TypeScript and React knowledge
OpenAI API key

1. Streaming Endpoint with Server-Sent Events

Stream tokens to the client as they are generated by the LLM.

typescript

import { OpenAI } from 'openai';

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

export async function POST(req: Request) {
  const { messages } = await req.json();

  const stream = await openai.chat.completions.create({
    model: 'gpt-4o',
    messages,
    stream: true,
  });

  const encoder = new TextEncoder();
  const customReadable = new ReadableStream({
    async start(controller) {
      for await (const chunk of stream) {
        const content = chunk.choices[0]?.delta?.content || '';
        controller.enqueue(encoder.encode(content));
      }
      controller.close();
    },
  });

  return new Response(customReadable, {
    headers: { 'Content-Type': 'text/event-stream' },
  });
}

Best Practices & Architecture Advice

Always set server-side rate limits and token budgets to prevent excessive API billing.
Sanitize output before rendering to prevent Markdown XSS injection.

Common Mistakes to Watch Out For

•Exposing private API keys in client-side code instead of proxying through a backend route.

Frequently Asked Questions

Why is streaming preferred over single batch responses?

Streaming reduces perceived latency dramatically: users see the first word within 300ms rather than waiting 5-10 seconds for the entire completion.