Frontend Developer Assignment
Real-Time AI Chatbot with Streaming
Assignment Overview
Build a Real-Time AI Chatbot with streaming responses using WebSockets. This assignment
evaluates your ability to work with React, TypeScript, real-time communication, and GenAI APIs
in a time-constrained environment.
Focus: Core functionality over polish
Core Features to Implement
1. Chat Interface
Build a simple, functional chat UI with:
Message Display:
● Chat message list showing user and AI messages
● Auto-scroll to latest message
● Distinguish between user/AI messages visually
● Display timestamps
Input Area:
● Text input field with send button
● Enter key to send message
● Disable input while AI is responding
● Character limit indicator (optional)
Basic Styling:
● Clean, readable layout
● Responsive design (mobile-friendly)
● Use Tailwind CSS for quick styling
2. WebSocket Connection
Implement real-time communication:
Connection Management:
● Establish WebSocket connection on component mount
● Handle connection/disconnection states
● Display connection status indicator
● Basic reconnection logic
Message Flow:
● Send user messages via WebSocket
● Receive streaming AI responses
● Handle connection errors gracefully
3. Streaming AI Responses
Integrate GenAI with streaming:
Real-Time Display:
● Display AI response as it streams (token by token or chunk by chunk)
● Show typing indicator while waiting for first chunk
● Handle streaming completion
LLM Integration:
● Use any LLM API that supports streaming (OpenAI, Anthropic Claude, Google Gemini,
Groq, Hugging Face, or any other)
4. Basic State Management
Manage chat state:
Message History:
● Store conversation messages
● Maintain message order
● Handle loading states
UI States:
● Loading indicator
● Error states
● Connection status
● Input disabled state
Technical Requirements
Technology Stack
You are free to use any technology stack you're comfortable with (please don’t use Python for
frontend :) ), but the following are recommended:
Frontend Framework:
● React 18+ (functional components with hooks)
● [Link] 14+ (with App Router or Pages Router)
Language:
● TypeScript (preferred)
● JavaScript (acceptable)
Styling:
● Tailwind CSS (preferred)
● CSS Modules, Styled Components, or any other styling solution
Real-Time Communication:
● WebSocket (native browser API)
● [Link]
● Server-Sent Events (SSE)
● Or any other real-time communication approach
GenAI Integration:
● Any LLM API with streaming support (OpenAI, Anthropic Claude, Google Gemini, Groq,
Hugging Face, or others)
Code Quality
● Clean, modular component architecture
● Reusable components where applicable
● Meaningful variable and function names
● Basic error handling
● Type safety (if using TypeScript)
Deliverables
1. GitHub Repository ✅
Repository Must Include:
● Clean, organized source code
● [Link] with comprehensive documentation
● .[Link] file with required environment variables
● [Link] with all dependencies
[Link] Must Include:
● Project title and brief description
● Setup instructions (step-by-step)
● Environment variables needed
● Commands to run the project
● Tech stack and libraries used
● Features implemented (checklist format)
● Time spent on the assignment
● Link to demo video
2. Video Walkthrough (3-5 minutes) 🎥
Record a screen demo covering:
Live Demonstration (1-2 min):
● Send messages and show streaming responses
● Demonstrate error handling
● Show connection status
Code Walkthrough (1-2 min):
● Explain WebSocket/streaming implementation
● Show key components and logic
● Explain state management approach
Technical Discussion (1 min):
● Challenges faced and solutions
● Decisions made and trade-offs
Platform: YouTube (unlisted), Loom, or any video sharing platform
Bonus Points (Optional)
If you have extra time, consider adding (each worth +2 points, max +10 total):
● [ ] Message persistence (localStorage or database)
● [ ] Clear chat functionality
● [ ] Copy message to clipboard
● [ ] Markdown rendering in AI responses
● [ ] Typing indicator animation
● [ ] Dark/light theme toggle
Submission Checklist
● [ ] GitHub repository is public and accessible
● [ ] [Link] is complete with all required sections
● [ ] .[Link] file is included
● [ ] Demo video is recorded and link works
● [ ] Video link is in README
● [ ] All code runs without errors
● [ ] No API keys or sensitive data in repository
Good luck!