Drift

Inspiration

Every AI team running multi-model agent pipelines faces the same blind spot: where is the money going? We've seen teams burn through thousands in LLM API credits with zero visibility into which model handles what, whether cheaper alternatives exist, or when costs spike unexpectedly. Drift was born from a simple question — what if you could see everything, in real time, and automatically route to the best model for every query?

What it does

Drift is a full-stack operations intelligence dashboard for AI agent systems. It provides:

• Real-Time Command Center — Live WebSocket-powered metrics: cost, tokens, active agents, and latency, updating every 5 seconds
• Smart Model Routing — Send any query to multiple LLMs simultaneously (via Groq), compare quality, latency, and cost side-by-side, and get an automatic recommendation for the optimal model
• Cost Intelligence — Multi-provider spend breakdown (OpenAI, Anthropic, Google), model efficiency rankings, 7-day cost forecasting with linear regression, and a savings calculator
• Trace Explorer — End-to-end execution traces for every agent workflow with a waterfall timeline showing each LLM call's model, tokens, cost, and latency
• Anomaly Detection — Automated detection of cost spikes, latency degradation, error bursts, and quality drops with severity classification and resolution tracking

How we built it

Backend: Python FastAPI with async SQLAlchemy + SQLite. A simulation engine generates realistic multi-provider LLM call data, while the routing feature makes real API calls to Groq's hosted models (LLaMA 3.3 70B, LLaMA 3.1 8B, Mixtral 8x7B). WebSocket endpoints stream metrics and traces to the frontend in real time.

Frontend: React 19 + Vite 7 + Tailwind CSS v4 with a custom "Terminal Cloudscape" design system — dark space backgrounds, neon green accents, JetBrains Mono typography, scanline overlays, and glow effects. Charts built with Recharts, the routing flow Sankey diagram with D3.js, and state management with Zustand.

Deployment: Frontend on Vercel, backend on Railway, with CORS and WebSocket proxying configured for production.

Intro Video: Built programmatically with Remotion (React-based video framework) — 15-second animated intro with spring physics, typewriter effects, and procedurally generated background music.

Challenges we ran into

• Tailwind v4 production builds stripped dynamically-constructed CSS classes (e.g., glow-${color}). We had to refactor to static color maps to ensure classes survived tree-shaking.
• Stale closures in React — the Live Router's elapsed timer captured an empty Set in a setInterval callback, causing all model timers to tick forever. Fixed by switching to useRef.
• WebSocket reliability — needed exponential backoff with jitter for reconnection, plus proper cleanup on component unmount to prevent memory leaks.
• Null safety across the UI — template literals like $${value?.toFixed(2)} silently render "$undefined" when the API returns null. Required systematic null guards across 7 components.

What we learned

• Real-time dashboards are deceptively complex — the gap between "data shows up" and "data shows up reliably without memory leaks or stale state" is enormous
• Tailwind v4's CSS-first approach is powerful but requires static class references for production builds
• Groq's inference speed makes real-time multi-model comparison genuinely viable — sub-500ms responses enable a UX that wouldn't work with slower providers
• Programmatic video generation with Remotion is surprisingly effective for hackathon demos

What's next for Drift

• Real LLM provider integrations — plug into actual OpenAI, Anthropic, and Google API keys for production monitoring
• Cost alerting — Slack/email notifications when spend exceeds thresholds
• A/B model testing — statistical comparison of model quality over time
• Team dashboard — multi-user access with role-based permissions

Built With

• d3.js
• fastapi
• groq
• python
• react
• recharts
• remotion
• sqlite
• tailwindcss
• vercel
• vite
• websockets
• zustand