# Vibe as a Service

- **Event:** [Zero to Agent: Vercel x Deepmind Hackathon SF](https://cerebralvalley.ai/e/zero-to-agent-sf)
- **When:** Sat, Mar 21 at 9:00 AM – 10:00 PM (PDT)
- **Where:** Shack15, San Francisco, CA
- **Team:** [Mukul Pathak](https://cerebralvalley.ai/u/mukulpathak), [Sapna Sangmitra](https://cerebralvalley.ai/u/sapna)
- **GitHub:** https://github.com/Sapna24Sangmitra/VibeStreamer
- **Demo video:** https://youtu.be/t9nkZsU6Ig8
- **Gallery:** https://cerebralvalley.ai/e/zero-to-agent-sf/hackathon/gallery
- **Page:** https://cerebralvalley.ai/e/zero-to-agent-sf/hackathon/gallery/11

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

---

Markdown version of https://cerebralvalley.ai/e/zero-to-agent-sf/hackathon/gallery/11. Site index for agents: https://cerebralvalley.ai/llms.txt · full text: https://cerebralvalley.ai/llms-full.txt