frontend/README.md

Multi-Agent AI Chat Frontend

Beautiful React.js chat interface for the Multi-Agent AI backend.

Features

✨ Modern UI Design

• Gradient backgrounds and smooth animations
• Responsive layout
• Real-time typing indicators
• Chat history with scrolling

🎯 Core Functionality

• Send queries to multi-agent backend
• Upload documents (PDF, TXT, MD, DOCX)
• Example queries for quick start
• Error handling with visual feedback
• Clear chat option

🤖 Agent Capabilities

• Weather information queries
• Document analysis with RAG
• Meeting scheduling with weather checks
• SQL database queries

Quick Start

1. Install Dependencies

cd frontend
npm install

2. Start Backend

# In the parent directory
cd ..
uv run uvicorn main:app --reload

3. Start Frontend

# In the frontend directory
npm start

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

Usage

Asking Questions

Type your question in the input box and press Enter or click the send button (📤).

Example queries:

• "What's the weather in Chennai?"
• "Schedule a team meeting tomorrow at 2pm"
• "Show all meetings scheduled tomorrow"

Uploading Documents

1. Click the folder icon (📁) in the header
2. Select a PDF, TXT, MD, or DOCX file
3. Ask questions about the uploaded document

Example:

• Upload: company_policy.pdf
• Ask: "What is the remote work equipment policy?"

Example Query Buttons

Click any of the example query buttons to quickly populate the input field:

• 🌤️ Weather queries
• 📅 Meeting scheduling
• 💾 Database queries
• 📄 Document questions

Architecture

┌─────────────────┐
│  React Frontend │
│  (Port 3000)    │
└────────┬────────┘
         │ HTTP
         │ /chat
         │ /upload
         ▼
┌─────────────────┐
│ FastAPI Backend │
│  (Port 8000)    │
└────────┬────────┘
         │
    ┌────┴────┬─────────┬──────────┐
    ▼         ▼         ▼          ▼
[Weather] [Docs+RAG] [Meeting] [SQL]

API Integration

The frontend communicates with the backend using two endpoints:

POST /chat

{
  "query": "What's the weather?",
  "file_path": "/path/to/file.pdf" // optional
}

POST /upload

FormData with 'file' field

Customization

Changing Colors

Edit src/App.css and modify the gradient colors:

background: linear-gradient(135deg, #YOUR_COLOR_1, #YOUR_COLOR_2);

Adding Features

Edit src/App.js to add new functionality:

• Modify the exampleQueries array
• Add new UI components
• Enhance chat message rendering

Troubleshooting

Backend Connection Issues

• Ensure FastAPI backend is running on port 8000
• Check the proxy setting in package.json

File Upload Fails

• Check file size limit (10MB default)
• Verify file type is supported (PDF, TXT, MD, DOCX)

Chat Not Responding

• Check browser console for errors
• Verify backend is running and accessible

Production Build

npm run build

This creates an optimized production build in the build/ directory.

To serve the production build:

npx serve -s build

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

---

Made with ❤️ for seamless AI interactions