Vibe as a Service
Built at Zero to Agent: Vercel x Deepmind Hackathon SF · Mar 21, 2026 · San Francisco, CA

VibeStreamer — AI-Powered Presentation/Video Co-Host What it does VibeStreamer lets you create, present, and livestream presentations with an AI co-host by your side. You talk to the AI, it builds your presentation — generating images, charts, animations, and a structured plan. When you're ready to present, the AI co-hosts with you in real-time, controlling what appears on screen while you speak naturally. One click takes you live on YouTube. How it works Two AI Agents: - Planner Agent — Have a voice conversation about your topic. The agent creates a structured presentation plan, generates visual assets (images via Gemini, charts via matplotlib, animations via Manim), and stores everything in your project. Assets appear in real-time as they're generated. - Presenter Agent — Co-hosts your presentation live. It guides you through sections, displays images/graphs/videos on screen at the right moments, shows text overlays and bullet points, and responds conversationally to keep the flow natural. You just talk — the AI handles the visuals. YouTube Live Streaming: Link your YouTube channel with one click. When you go live, VibeStreamer captures your presentation via canvas recording, pipes it through a relay server (FFmpeg on Railway), and streams directly to YouTube via RTMP. Live chat messages from viewers are fed to the presenter agent, which can surface them on screen. Camera Mode: Use your webcam as the presentation background with content overlaid on top — like a virtual studio. Tech Stack (Sponsor Technologies) Sponsor: Google Gemini How We Use It: Powers both AI agents (planning intelligence + tool calling), generates images, drives chart/graph creation logic ──────────────────────────────────────── Sponsor: Vercel How We Use It: Hosts the Next.js App Router frontend, AI SDK for agent orchestration with tools (generateText, tool()), Fluid Compute for long-running agent calls ──────────────────────────────────────── Sponsor: Supabase How We Use It: PostgreSQL for all data (projects, presentations, plans, assets, YouTube tokens), Auth (email + Google OAuth), Storage (content-assets bucket for images/videos/graphs), Real-time subscriptions for live asset updates ──────────────────────────────────────── Sponsor: ElevenLabs How We Use It: Conversational voice AI for both agents — low-latency speech with tool calling, natural voice responses during presentations Architecture Browser (Next.js) ├── Voice Agent (ElevenLabs Conversational AI) │ ├── Planner mode: generates assets via Railway API │ └── Presenter mode: controls visuals via client tools ├── Recording (Canvas paint loop at 30fps + MediaRecorder) └── YouTube Live (WebSocket → Railway Relay → FFmpeg → RTMP) (vibe-streamer-api) ├── /api/content-worker — Chart generation (Python/matplotlib) ├── /api/image-generator — Image generation (Gemini) ├── /api/manim-generator — Animation generation (Manim) └── /relay — WebSocket → FFmpeg → RTMP relay for YouTube Live Supabase ├── Database: projects, presentations, plans, assets, YouTube tokens ├── Auth: Google OAuth + email/password ├── Storage: content-assets (images, graphs, animations) └── Realtime: live updates when assets are generated Key Features - Voice-first presentation creation — no typing, no slides - Real-time asset generation (images, charts, manim animations) - AI co-host that controls visuals during live presentations - Multiple presentation themes (dots, lines, light, camera) - YouTube Live streaming with one-click setup - Live chat integration — agent responds to viewer comments - Multi-destination streaming (YouTube + custom RTMP) - Canvas-based recording with mic + agent audio capture