Hackathon Build Multi-Agent RAG

DocViz AI: Multi-Agent Documentation to Video Generator

A hackathon prototype with four specialist agents, a separate QA step, and a browser-based explainer renderer.

1. Overview

DocViz AI was conceived during AI Hackathon 2026 to make long architecture documents easier to explain to developers and stakeholders.

The prototype accepts Markdown or PDF documentation and builds narrated scenes with animated component diagrams in the browser.

2. The Problem

Monolithic architecture documentation suffers from three major flaws:

  • High Ingestion Barrier: Engineers skim lengthy docs and miss critical system boundary constraints.
  • Static Visuals: Architecture diagrams are static images that fail to communicate dynamic runtime request flow or data transformations.
  • Maintenance Overhead: Manually producing video explanations requires specialized video editing skills and becomes stale the moment APIs evolve.

3. The Solution

Our hackathon team used retrieval and four specialist agents for analysis, narration planning, and storyboard generation. A separate QA step checks the resulting scenes before browser rendering. I worked on the pipeline design, prompt contracts, and client-side animation renderer.

4. Architecture & Workflow

Four specialist agents are followed by a validation step:

Raw Architecture Docs (.md / .pdf) │ ▼ [Agent 1: Vector Retriever (PGVector)] ── extracts relevant section chunks │ ▼ [Agent 2: Document Analyst (Claude 4.5)] ── identifies core entities & flows │ ▼ [Agent 3: Creative Director] ── writes concise narration script per scene │ ▼ [Agent 4: Storyboard Engineer (Zod Schema)] ── compiles layout coordinates & motion │ ▼ [QA validation step] ── checks scene timing & technical claims │ ▼ Browser HTML5 Canvas Engine ──► Client-side MP4 Export

5. Technical Decisions

  • Separate responsibilities: Document analysis and storyboard generation use different prompts and intermediate outputs, making each stage easier to inspect and revise.
  • Strict Zod Schema Enforcement: The storyboard engineer outputs JSON conforming to a deterministic schema defining coordinates, bounding boxes, labels, and animation keyframes.
  • Automated Repair Pipeline: If the model generates a slightly malformed JSON payload, an automatic repair parser fixes syntax anomalies before handing off to the renderer.
  • Browser-Native Canvas Rendering: Avoided expensive server-side video rendering farms by executing frame-by-frame canvas compositions directly on the client machine.

6. Engineering Challenges

The hardest challenge was ensuring frame-perfect synchrony between client-side neural audio narration and dynamic canvas diagram transitions. Because audio durations vary with speech rate, the Storyboard Engineer calculates timestamp offsets dynamically, adjusting canvas transition durations to match spoken sentences.

7. Results & Impact

  • Built and demonstrated as a hackathon prototype for document-to-video explanation.
  • The browser renderer made the storyboard visible without a dedicated server-side rendering service.

Evaluation & limits

The prototype needs a documented comparison against manual explanations and a repeatable check for factual fidelity. Its source documents and generated examples are internal, so this public case study describes the architecture rather than presenting them as independent proof.

A next step is to test the same document set across prompt changes and record failures such as omitted components or incorrect relationships.