AI Chatbot Web App with Streaming Responses
Build a chat web app where answers from an AI model appear word by word as they're generated, the way ChatGPT does, instead of after a long wait. The browser talks to your own Node.js and Express server, which keeps the OpenAI API key secret, calls the model with streaming enabled, and passes each piece of text to the browser with Server-Sent Events. The conversation history is kept in the browser and sent with each message, so the model remembers what was said. Users can stop an answer midway or regenerate it, and the server limits how many requests each user can make. You'll learn streaming responses, Server-Sent Events, proxying an AI API securely, managing conversation context, cancelling requests, and handling errors mid-stream.
- Estimate
- ~14h
- Steps
- 7
- Completed by
- 0
- Proposed by
- codeseed.app
Node.js · Express · OpenAI API · Server-Sent Events
Project roadmap
- 01
Build the backend proxy
~2hCreate an Express server with the official openai package. Read the API key from an environment variable, never from the browser, and refuse to start without it. Add POST /api/chat that receives the message history, validates it (roles, maximum number of messages and total length), and calls the chat API without streaming at first. Done when: sending a message with curl returns the model's answer.
- 02
Stream the response
~2.5hEnable streaming in the API call, and send each text piece to the browser as Server-Sent Events: set the text/event-stream headers, write data: lines as pieces arrive, and send a final done event. When the browser disconnects, abort the upstream request with an AbortController so you stop paying for tokens no one will see. Done when: curl -N shows the answer arriving in pieces.
- 03
Build the chat interface
~2.5hBuild a chat page with a message list and an input box (Enter sends, Shift+Enter adds a new line). Read the stream with fetch and a ReadableStream reader (EventSource only supports GET), and append each piece to the current answer bubble as it arrives. Render Markdown safely in answers, and keep the view scrolled to the bottom. Done when: answers appear word by word in the page.
- 04
Manage the conversation history
~1.5hKeep the messages in the browser, including a system message with the assistant's instructions, and send the history with each request. When the conversation gets too long, drop the oldest messages (but keep the system message) to stay within a limit. Save conversations in localStorage and add a New chat button. Done when: the assistant remembers earlier messages, and long chats keep working.
- 05
Add stop and regenerate
~1.5hAdd a Stop button that aborts the fetch (which also stops the server's upstream request) and keeps the partial answer. Add Regenerate on the last answer, which removes it and sends the same history again. Disable sending while an answer is streaming. Done when: stopping works immediately, and regenerating produces a new answer.
- 06
Handle errors and limit usage
~2hAdd rate limiting per IP with express-rate-limit (for example 20 messages per minute). Handle errors before and during streaming: send an error event mid-stream, show it in the chat with a Retry button, and handle 429 and timeouts from the API. Log requests without logging message contents. Done when: rate limits, API errors and network drops all show clear messages in the chat.
- 07
Test it
~2hWrite tests with a fake model client that streams known pieces: the SSE format, aborting when the client disconnects, validation of the history, rate limiting, and an error mid-stream. Test the browser's stream reading with a mocked fetch. Done when: all tests pass without calling the real API.
Ready to build this?
Get a GitHub repo and start building. Your AI reviewer checks each step as you go.
Tech stack