docs/FRONTEND_SETUP.md

🎨 Frontend Setup Guide

Overview

Beautiful React.js chat interface with gradient design, real-time updates, and full chat memory.

Prerequisites

• Node.js 16+ and npm
• Backend running on port 8000

Installation

Option 1: Using npm (Recommended)

# Navigate to frontend directory
cd frontend

# Install dependencies
npm install

# Start development server
npm start

The app will automatically open at http://localhost:3000

Option 2: Using yarn

cd frontend
yarn install
yarn start

Running Both Backend and Frontend

Terminal 1 - Backend:

cd D:\python_workspace\multi-agent
uv run uvicorn main:app --reload

Terminal 2 - Frontend:

cd D:\python_workspace\multi-agent\frontend
npm start

Features Showcase

1. Chat Interface

• 💬 Modern gradient design
• 📜 Scrollable chat history
• ⚡ Real-time typing indicators
• 🎨 Different colors for user/assistant/error messages

2. File Upload

• 📁 Click folder icon to upload
• ✅ Supported: PDF, TXT, MD, DOCX
• 📎 File badge shows current upload
• 🔍 Ask questions about uploaded documents

3. Example Queries

• 🌤️ "What's the weather in Chennai?"
• 📅 "Schedule a team meeting tomorrow at 2pm"
• 💾 "Show all meetings scheduled tomorrow"
• 📄 "What is the remote work policy?"

4. Chat Memory

• ✅ Full conversation history maintained
• 🗑️ Clear chat button to start fresh
• 📌 System messages for file uploads

Screenshots

┌─────────────────────────────────────────┐
│ 🤖 Multi-Agent AI Assistant             │
│ Weather • Documents • Meetings • SQL    │
└─────────────────────────────────────────┘
│                                         │
│ 🤖 Hello! I'm your Multi-Agent AI...   │
│                                         │
│            What's the weather? 👤        │
│                                         │
│ 🤖 The weather in Chennai is...        │
│                                         │
└─────────────────────────────────────────┘
│ 🌤️ Weather | 📅 Meetings | 💾 SQL      │
└─────────────────────────────────────────┘
│ Type your message...               📤  │
└─────────────────────────────────────────┘

API Integration

The frontend uses axios to communicate with FastAPI:

Chat Endpoint

POST http://localhost:8000/chat
{
  "query": "user question",
  "file_path": "path/to/uploaded/file" // optional
}

Upload Endpoint

POST http://localhost:8000/upload
FormData: { file: File }

Customization

Change Theme Colors

Edit frontend/src/App.css:

.chat-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* Change to your preferred gradient */
.chat-header {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

Add More Example Queries

Edit frontend/src/App.js:

const exampleQueries = [
  '🌤️ What\'s the weather in Chennai?',
  '📅 Schedule a team meeting tomorrow at 2pm',
  // Add your custom queries here
  '🔍 Search for AI trends',
];

Production Deployment

Build for Production

cd frontend
npm run build

Serve Static Build

# Using Python
cd build
python -m http.server 3000

# Or using serve package
npm install -g serve
serve -s build -p 3000

Deploy to Vercel (Free)

npm install -g vercel
cd frontend
vercel

Deploy to Netlify (Free)

1. Push to GitHub
2. Connect repo to Netlify
3. Set build command: npm run build
4. Set publish directory: build

Troubleshooting

"Cannot connect to backend"

Solution:

1. Check backend is running: http://localhost:8000/docs
2. Verify proxy setting in package.json: "proxy": "http://localhost:8000"

"File upload failed"

Reasons:

• File too large (>10MB)
• Unsupported file type
• Backend not running

Solution: Check backend logs and file constraints

"npm install fails"

Solution:

# Clear npm cache
npm cache clean --force

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install

Port 3000 already in use

Solution:

# Use different port
set PORT=3001 && npm start

# Or kill existing process
npx kill-port 3000

Development Tips

Hot Reload

Changes to React components automatically reload in browser

React DevTools

Install React Developer Tools for debugging

API Testing

Use the browser's Network tab to inspect API calls

Architecture

Frontend (React)
├── public/
│   └── index.html          # HTML template
├── src/
│   ├── App.js              # Main chat component
│   ├── App.css             # Styling
│   ├── index.js            # Entry point
│   └── index.css           # Global styles
├── package.json            # Dependencies
└── README.md               # Documentation

Next Steps

1. Start both services:

   • Backend: uv run uvicorn main:app --reload
   • Frontend: cd frontend && npm start

2. Test the interface:

   • Try weather queries
   • Upload a document
   • Schedule a meeting
   • Query the database

3. Customize:

   • Change colors in CSS
   • Add new features
   • Deploy to production

---

Enjoy your beautiful AI chat interface! 🚀