React AI Chatbot Tutorial: Build a Streaming Chat UI with OpenAI and Node.js

# 1) React app
npm create vite@latest react-ai-chat -- --template react-ts
cd react-ai-chat

# 2) Dependencies (frontend + backend)
npm i -D concurrently
npm i openai express cors dotenv

// package.json (scripts)
{
  "scripts": {
    "dev": "concurrently \"npm:dev:client\" \"npm:dev:server\"",
    "dev:client": "vite",
    "dev:server": "node server/index.mjs"
  }
}

# Already installed above, shown here for clarity
npm i openai

# .env (do NOT commit this)
OPENAI_API_KEY=sk-...
PORT=5174

// server/index.mjs
import 'dotenv/config';
import express from 'express';
import cors from 'cors';
import OpenAI from 'openai';

const app = express();
app.use(cors());
app.use(express.json());

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

// Utility: convert simple [{role, content}] into Responses API input
function toInput(messages) {
  return messages.map(m => ({
    role: m.role,
    content: [{ type: 'input_text', text: m.content }]
  }));
}

app.post('/api/chat', async (req, res) => {
  try {
    const { messages, model = 'gpt-4o', temperature = 0.7 } = req.body || {};

    // SSE headers
    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache');
    res.setHeader('Connection', 'keep-alive');

    // Start a streaming response from OpenAI
    const stream = client.responses
      .stream({
        model,
        input: toInput(messages),
        temperature
      })
      .on('response.output_text.delta', (event) => {
        // Send token chunks to the browser
        res.write(`data: ${event.delta}\n\n`);
      })
      .on('response.completed', () => {
        res.write('data: [DONE]\n\n');
        res.end();
      })
      .on('response.error', (event) => {
        res.write(`event: error\n`);
        res.write(`data: ${JSON.stringify(event.error)}\n\n`);
      });

    // If client disconnects early, best-effort cleanup
    req.on('close', () => {
      try { stream.abort?.(); } catch {}
    });
  } catch (err) {
    res.status(500).json({ error: 'Server error', detail: String(err) });
  }
});

const port = Number(process.env.PORT || 5174);
app.listen(port, () => console.log(`API listening on http://localhost:${port}`));

// src/App.tsx
import { useEffect, useRef, useState } from 'react';

type Msg = { role: 'system'|'user'|'assistant'; content: string };

export default function App() {
  const [messages, setMessages] = useState<Msg[]>([
    { role: 'system', content: 'You are a helpful assistant.' }
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const abortRef = useRef<AbortController | null>(null);

  async function send() {
    if (!input.trim() || loading) return;
    const next = [...messages, { role: 'user', content: input }];
    setMessages(next);
    setInput('');
    setLoading(true);

    abortRef.current = new AbortController();

    // Begin streaming
    const resp = await fetch('http://localhost:5174/api/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ messages: next }),
      signal: abortRef.current.signal
    });

    if (!resp.body) { setLoading(false); return; }

    // Add a placeholder assistant message we’ll stream into
    setMessages(curr => [...curr, { role: 'assistant', content: '' }]);

    const reader = resp.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let buffer = '';

    while (true) {
      const { value, done } = await reader.read();
      if (done) break;
      buffer += decoder.decode(value, { stream: true });

      // Parse SSE frames (lines separated by \n\n, each frame starts with `data: `)
      const frames = buffer.split('\n\n');
      buffer = frames.pop() || '';

      for (const frame of frames) {
        if (!frame.startsWith('data: ')) continue;
        const data = frame.slice(6);
        if (data === '[DONE]') { setLoading(false); return; }
        setMessages(curr => {
          const copy = [...curr];
          const last = copy[copy.length - 1];
          if (last?.role === 'assistant') {
            last.content += data; // append streamed tokens
          }
          return copy;
        });
      }
    }
    setLoading(false);
  }

  function stop() {
    abortRef.current?.abort();
    setLoading(false);
  }

  useEffect(() => {
    const el = document.getElementById('end');
    el?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div style={{ maxWidth: 720, margin: '40px auto', padding: 16 }}>
      <h1>React AI Chatbot</h1>
      <div style={{ border: '1px solid #ddd', borderRadius: 8, padding: 16, minHeight: 360 }}>
        {messages.filter(m => m.role !== 'system').map((m, i) => (
          <div key={i} style={{
            margin: '8px 0',
            whiteSpace: 'pre-wrap',
            background: m.role === 'user' ? '#eef6ff' : '#f7f7f7',
            padding: 12, borderRadius: 8
          }}>
            <strong>{m.role === 'user' ? 'You' : 'Assistant'}:</strong> {m.content}
          </div>
        ))}
        <div id="end" />
      </div>

      <form onSubmit={e => { e.preventDefault(); send(); }} style={{ marginTop: 12, display: 'flex', gap: 8 }}>
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          placeholder="Ask anything..."
          style={{ flex: 1, padding: 12, borderRadius: 8, border: '1px solid #ddd' }}
        />
        <button disabled={loading} type="submit">Send</button>
        <button disabled={!loading} type="button" onClick={stop}>Stop</button>
      </form>
    </div>
  );
}

npm run dev
# Open http://localhost:5173 (Vite) — the API listens on 5174

import { OpenAI } from 'openai';
import { z } from 'zod';
import { zodTextFormat } from 'openai/helpers/zod';

const openai = new OpenAI();
const Weather = z.object({ city: z.string(), tempC: z.number() });

const stream = openai.responses
  .stream({
    model: 'gpt-4o',
    input: [{ role: 'user', content: [{ type: 'input_text', text: 'Paris weather now' }] }],
    text: { format: zodTextFormat(Weather, 'weather') }
  })
  .on('response.output_text.delta', e => process.stdout.write(e.delta));

const final = await stream.finalResponse();