Complete Production-Ready AI Chatbot with React Frontend + FastAPI Backend
A modern, responsive, and feature-rich AI chatbot frontend built with React, TypeScript, and Tailwind CSS. Includes user authentication, conversation history, personalized settings, and role-based AI responses.
- User Login/Signup - Secure authentication system
- User Profiles - Personalized user accounts
- Session Persistence - Stay logged in across sessions
- Multiple Conversations - Create and manage unlimited chats
- Conversation History - Access all previous chats
- Auto-save Messages - Never lose your conversations
- Message Timestamps - Track conversation timeline
- Typing Indicator - Visual feedback while AI is responding
- Auto-scroll - Automatically scrolls to new messages
- Clear Chat - Reset individual conversations
- Keyboard Shortcuts - Enter to send, Shift+Enter for new line
- Role-Based Responses - AI adapts to your role (Student, Professional, Developer, etc.)
- Custom Context - Provide additional context for tailored responses
- User Settings - Customize your AI experience
- 6 Predefined Roles - Student, Professional, Developer, Researcher, Creative, General
- Fully Responsive - Works seamlessly on mobile, tablet, and desktop
- Modern UI/UX - Clean, intuitive interface with smooth animations
- Sidebar Navigation - Easy access to all conversations
- Mobile-Optimized - Collapsible sidebar for small screens
- Dark Sidebar - Professional appearance
- Modular Architecture - Well-organized components for easy maintenance
- Optimized Performance - Lightweight bundle (74KB gzipped)
- TypeScript - Full type safety for better development experience
- LocalStorage - Persistent data without backend
- Customizable - Easy to integrate with your own AI backend
src/
├── components/
│ ├── ChatApp.tsx - Main chat application
│ ├── ChatContainer.tsx - Chat messages display
│ ├── ChatHeader.tsx - Header with controls
│ ├── ChatInput.tsx - Message input area
│ ├── ChatMessage.tsx - Individual message bubble
│ ├── EmptyState.tsx - Welcome screen
│ ├── Login.tsx - Authentication page
│ ├── Settings.tsx - User settings modal
│ ├── Sidebar.tsx - Conversation list
│ └── TypingIndicator.tsx - AI typing animation
├── context/
│ └── AuthContext.tsx - Authentication state
├── hooks/
│ ├── useChat.ts - Chat state management
│ └── useConversations.ts - Conversation management
├── types/
│ ├── chat.ts - Chat type definitions
│ └── user.ts - User type definitions
├── config/
│ └── chatConfig.ts - Configuration settings
└── App.tsx - Root component with auth
Custom hook managing all chat logic:
- Message state management
- AI response handling (ready for API integration)
- Error handling
- Loading states
Displays messages with auto-scroll functionality and empty state.
Renders individual messages with user/AI differentiation, avatars, and timestamps.
Textarea with send button, keyboard shortcuts, and disabled state handling.
- Gradient backgrounds - Modern, appealing visual design
- Smooth animations - Fade-in effects for messages
- Custom scrollbar - Styled scrollbar for better aesthetics
- Responsive layout - Adapts to all screen sizes
- Message bubbles - Distinct styling for user vs AI messages
- Avatar system - Visual distinction between user and AI
Replace the generateAIResponse function in src/hooks/useChat.ts:
const generateAIResponse = async (userMessage: string): Promise<string> => {
// Replace with your actual API call
const response = await fetch('YOUR_API_ENDPOINT', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_API_KEY',
},
body: JSON.stringify({
message: userMessage,
// Add other required parameters
}),
});
const data = await response.json();
return data.response;
};const response = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${YOUR_OPENAI_KEY}`,
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [{ role: 'user', content: userMessage }],
}),
});const response = await fetch('/api/chat', {
method: 'POST',
body: JSON.stringify({ message: userMessage }),
});# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build- Mobile: < 640px
- Tablet: 640px - 1024px
- Desktop: > 1024px
- Code splitting - Optimized bundle size
- Memoization - React hooks with useCallback
- Lazy rendering - Only visible messages rendered
- Efficient state updates - Minimal re-renders
- Optimized animations - CSS animations for better performance
When integrating with a real backend:
- Never expose API keys in frontend code
- Use environment variables for sensitive data
- Implement rate limiting
- Sanitize user input
- Use HTTPS for API calls
- Implement proper authentication
Edit the Tailwind classes in components:
- Primary color:
blue-500toblue-600 - AI color:
purple-500topurple-600 - Backgrounds: Gradient combinations
- Message persistence: Add localStorage in useChat hook
- File uploads: Extend ChatInput component
- Voice input: Add Web Speech API
- Message reactions: Add emoji reaction system
- Multi-language: Integrate i18n library
- React 18 - UI library
- TypeScript - Type safety
- Tailwind CSS - Styling
- Vite - Build tool
- Lucide React - Icon library
This project is open source and available for use in your applications.
Feel free to customize and enhance this chatbot for your specific needs!
Built with ❤️ for seamless AI interactions