frontend/README.md

IntegraChat Frontend

Next.js 16 / React 19 app that showcases everything wired up in backend/.
It provides a polished operator console with:

• Hero section + feature overview describing the FastAPI + MCP stack
• Live chat panel that POSTs to POST /agent/message for AI conversations
• Analytics dashboard pulling from GET /analytics/overview with real-time metrics
• Knowledge base management page (/knowledge-base) for document search and ingestion
• Document ingestion UI for uploading PDF, DOCX, TXT files or raw text
• Feature grid showcasing platform capabilities

Running Locally

cd frontend
npm install
npm run dev

Visit http://localhost:3000 for the main landing page, or http://localhost:3000/knowledge-base for document management.

API configuration

The UI calls the FastAPI service through NEXT_PUBLIC_API_URL (default http://localhost:8000).
Update .env.local if your backend runs elsewhere:

NEXT_PUBLIC_API_URL=http://localhost:8000

Features

Main Landing Page (/)

• Hero section with platform introduction
• Feature grid showcasing key capabilities
• Chat panel for real-time AI conversations
• Analytics panel with query metrics and tool usage statistics
• Ingestion card for quick document uploads

Knowledge Base Page (/knowledge-base)

• Document listing with pagination and filtering
• Search interface for semantic search across documents
• Document ingestion with support for:
  • Raw text input
  • PDF file uploads
  • DOCX file uploads
  • TXT file uploads
• Document management with tenant isolation

Components

• chat-panel.tsx - Real-time chat interface with streaming responses
• analytics-panel.tsx - Analytics dashboard with metrics visualization
• knowledge-base-panel.tsx - Document search and ingestion component
• ingestion-card.tsx - Quick document upload card
• hero.tsx - Landing page hero section
• feature-grid.tsx - Feature showcase grid
• footer.tsx - Footer component

Deploy

Deploy like any Next.js app (Vercel, Docker, etc.). Ensure the backend endpoints are reachable from the browser and CORS is enabled (already configured in backend/api/main.py).

Note: Make sure Celery workers are running in production for document ingestion and analytics processing to work properly.