AI Chatbot — Streaming React + OpenAI

A clean, fast chatbot built with React + Vite on the frontend and a Vercel serverless function as a secure proxy to the OpenAI API. Tokens stream in as they're generated.

A production-shaped pattern for an LLM chat UI:

API key stays server-side (never shipped to the browser)

Responses stream token-by-token via Server-Sent Events

Conversation state is preserved client-side and sent on each turn

Stop-generating, new-chat, auto-resizing textarea, keyboard shortcuts

Streaming SSE from a Vercel Edge Function. The api/chat.js endpoint proxies OpenAI Chat Completions with stream: true, parses the SSE response, and re-emits it to the client as JSON-delta SSE events. No WebSocket setup, no polling.

Server-side key isolation. The OpenAI API key lives exclusively in the Edge Function environment. The browser never sees it, never sends it, never stores it.

14 Node native tests. Cover error paths, streaming, system-prompt handling, model override, and auth headers. No test framework dependency beyond Node's built-in test runner.

Minimal client JS. React 18 with Vite 6, Tailwind CSS for styling, lucide-react for icons. Auto-resizing textarea, animated typing indicator, stop-generating button, new-chat reset.

React 18 + Vite 6 + Tailwind CSS

Vercel Edge Function (api/chat.js) proxying OpenAI Chat Completions

gpt-4o-mini by default (configurable via env)

14 Node native tests

Vercel hosting (free tier)

ai-chatbot/ ├── api/ │ └── chat.js # Edge function → OpenAI, streams SSE ├── src/ │ ├── components/ │ │ ├── ChatWindow.jsx # message list + streaming reader │ │ ├── ChatInput.jsx # auto-resize textarea + send/stop │ │ └── Message.jsx # bubble with typing indicator │ ├── App.jsx │ ├── main.jsx │ └── index.css # Tailwind + global styling ├── vercel.json ├── vite.config.js └── package.json