This project is a real-time AI chat application built as an assignment to demonstrate backend architecture, API discipline, and real-world streaming logic. The application integrates Google Gemini API on the backend and delivers token-by-token streaming responses to the frontend using WebSockets, providing a smooth and interactive chat experience similar to modern AI products.
The core focus of this assignment is not UI complexity, but clean system design, secure API usage, and efficient real-time communication between frontend and backend.
- Real-time AI response streaming (no waiting for full response)
- Secure backend-based Gemini API integration
- WebSocket-based communication for low-latency updates
- Clean message protocol (
start,chunk,end) - Persistent chat history using browser storage
- Markdown-rendered AI responses
- AI responses are streamed chunk by chunk as they are generated
- Provides a live typing experience instead of delayed full responses
- Google Gemini API key is never exposed to the frontend
- All AI requests are handled on the backend via environment variables
- Persistent WebSocket connection between client and server
- Efficient bidirectional messaging without repeated HTTP calls
- Chat messages are stored in
localStorage - Conversation remains available after page refresh
- User and AI messages are visually separated
- Typing indicator shown while AI is generating a response
- Chat can be cleared manually
- React.js
- WebSocket API (browser)
- React Markdown
- CSS (custom styling)
- Node.js
- Express.js
- WebSocket (
wslibrary) - Google Gemini API (
@google/generative-ai) - Environment-based configuration using
dotenv
The application follows a frontend–backend separation pattern:
- The frontend handles UI, user input, message rendering, and WebSocket events
- The backend manages:
- WebSocket connections
- AI request orchestration
- Streaming responses from Gemini API
- Security and API key protection
This design mirrors real production systems used in AI-powered applications.
The backend sends structured WebSocket messages:
start→ Indicates AI response generation has startedchunk→ Partial response text streamed incrementallyend→ AI response generation completed
This protocol keeps the frontend logic simple and predictable.
This project was intentionally designed to demonstrate:
- Understanding of real-world backend responsibilities
- Proper use of WebSockets over REST where streaming is required
- Secure handling of third-party APIs
- Clean separation of concerns between frontend and backend
- Readable, maintainable, and scalable code structure
- The project avoids unnecessary over-engineering
- Emphasis is placed on logic clarity and system behavior rather than visual polish
- The same architecture can be easily extended for authentication, rate limiting, or multi-user chat
This assignment showcases a practical implementation of a real-time AI chat system, reflecting how modern AI-powered products are built in production environments. The use of WebSockets, secure backend API integration, and streaming responses highlights strong backend fundamentals and thoughtful architectural decisions.
Author:
Asim Mir