VidSage — Multi-Agent AI Platform

A React frontend that hosts multiple AI agents behind one consistent UI. The first agent is YouTube RAG — paste a YouTube URL and ask any question about the video.

Built so you can drop new agents (PDF RAG, Web RAG, Code RAG, …) into the registry and they appear across the sidebar, home grid, and dashboard automatically.

Tech stack

• Vite + React 18 — fast dev server, HMR, mobile-friendly (host: true)
• React Router v6 — multi-route shell, parameterized /chat/:id so any agent gets its own page
• Tailwind CSS — utility-first, dark mode via class
• Recharts — dashboard charts
• Axios — backend client (auto-disabled when no API base is set; mocks take over)
• lucide-react — icons

Run it

cd vidsage
npm install
npm run dev

Vite prints a Local and a Network URL — open the Network URL on your phone (same Wi-Fi).

Build for production

npm run build
npm run preview   # serves on 0.0.0.0 so phones can reach it too

Folder architecture

vidsage/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/                  # static images (currently empty — favicon lives in public/)
│   ├── components/
│   │   ├── layout/              # Layout, Header, Sidebar, MobileNav
│   │   ├── chat/                # ChatWindow, Message, ChatInput, VideoCard
│   │   ├── dashboard/           # StatCard, UsageTrendChart, AgentShareChart,
│   │   │                        # LatencyHistogram, TopVideosTable,
│   │   │                        # ActivityFeed, ErrorBreakdown
│   │   └── ui/                  # Button, Card, Input, Loader, Modal, Badge
│   ├── pages/                   # Home, Chat, Dashboard, Agents, Settings
│   ├── services/
│   │   ├── api.js               # real-or-mock HTTP layer
│   │   └── mockData.js          # the data the dashboard shows when no backend
│   ├── hooks/                   # useChat, useTheme, useResponsive
│   ├── utils/                   # agents.js (registry), formatters, constants
│   ├── styles/globals.css       # tailwind layers + a few small tweaks
│   ├── App.jsx                  # router
│   └── main.jsx                 # entry
├── tailwind.config.js
├── postcss.config.js
├── vite.config.js               # host:true so the dev server is LAN-reachable
├── index.html
└── package.json

Adding a new agent

1. Register it in src/utils/agents.js (id, name, icon, status, path).
2. Wire its chat route in src/App.jsx — already done: /chat/:id matches every agent.
3. Add an API call in src/services/api.js (e.g. askPdfAgent).
4. Hook up useChat to call your new function.

That's it — sidebar, home grid, agents page, and dashboard charts pick it up automatically.

Wiring to your Python backend

Copy .env.example to .env and fill in your values:

cp .env.example .env

The only required frontend variable is the API base:

VITE_API_BASE=http://localhost:8000

Endpoints the frontend expects (FastAPI-style — adapt as needed):

Method	Path	Purpose
GET	/admin/kpis	KPI tiles
GET	/admin/usage?days=30	daily usage by agent
GET	/admin/latency	latency histogram
GET	/admin/agents	agent share donut
GET	/admin/youtube/top	top indexed videos
GET	/admin/activity	recent activity feed
GET	/admin/errors	24h error breakdown
POST	/rag/youtube	{ url, question, history } → { answer, citations, latencyMs, videoId }

Without VITE_API_BASE, the dashboard shows realistic mock data and chat returns a stubbed answer so the UI is demoable end-to-end.

Responsive

• ≥ 1024 px — persistent sidebar, two-column dashboard, side panel in chat.
• 768 – 1023 px — same dashboard; chat side panel hides; sidebar still visible.
• < 768 px — sidebar collapses behind a hamburger; layout stacks to one column; touch-friendly hit targets (h-10+).

Notes on the charts

The dashboard palette (src/utils/constants.js) is a fixed categorical order — adding a 7th series folds it into "Other." Each chart direct-labels its lines and pairs every color with a text label so identity is never color-alone.

License

MIT — see LICENSE.