AI Chatbot — Streaming React + OpenAI by Joshua KushnirAI Chatbot — Streaming React + OpenAI by Joshua Kushnir

AI Chatbot — Streaming React + OpenAI

Joshua Kushnir

Joshua Kushnir

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.

What it does

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

Technical patterns

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.

Stack

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)

Project layout

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
Like this project

Posted May 20, 2026

A streaming React + OpenAI chatbot with a Vercel Edge function backend.