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

Note: IntegraChat also includes a Gradio-based UI (app.py) with interactive visualizations, statistics cards, and Plotly charts. See the root README.md for details on running the Gradio interface.

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 by type (text, PDF, FAQ, link)
• Search interface for semantic search across documents
• Document ingestion with support for:
  • Raw text input
  • URL ingestion (automatic content fetching)
  • PDF file uploads
  • DOCX file uploads
  • TXT and Markdown file uploads
• Document management with tenant isolation:
  • Delete individual documents by ID
  • Delete all documents for a tenant (with confirmation)
  • Real-time document list updates after operations
  • Error handling with clear user feedback

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.