The Compound AI Agent Architecture
Unlike standard presentation tools that generate static text bullets with a one-shot LLM call, Keynox operates as a multi-stage agentic pipeline (compound AI system) where specialized autonomous agents collaborate sequentially to assemble interactive presentation software:
- Stage 1 Analyzer (Research Agent): Inspects the raw topic or syllabus, extracts the core thesis, identifies mathematical formulations, and outlines the structural concept graph.
- Stage 2 Storyboard Director (Visual Planner Agent): Structures the slide narrative flow, enforces invariant layout patterns, and selects optimal interactive component archetypes (logic circuits, sliders, or live runners).
- Stage 3 Creative Generator (Synthesizer Agent): Compiles executable DOM widgets, KaTeX equations, truth tables, and physics simulation code.
- Stage 4 Motion Director (Animation Sequencer Agent): Wires up step-by-step GSAP timelines, animated derivation reveals, and spotlight focuses.
- PipelineOrchestrator (Agent Supervisor): Coordinates SSE stream events, manages state transitions across agent boundaries, and handles mid-pipeline caching so repeat topics load instantaneously.
Engineering Challenges & Solutions
Running four sequential agent passes could introduce prohibitive latency before the user sees the first slide.
Solution: PipelineOrchestrator streams intermediate tokens from the Analyzer and Storyboard Director while warming up the Creative Generator. Incoming SSE tokens are batched on a requestAnimationFrame loop at 60 fps, ensuring zero main-thread lockup while the compound system compiles.
Complex physics sliders, circuit simulators, and 3D WebGL scenes caused massive React re-render thrashing when tied to framework state.
Solution: Mounted all interactive simulation widgets as uncontrolled plain DOM components via ref containers. React controls the 1280×720 canvas layout slot; vanilla JavaScript and GSAP own the 60 fps simulation loops directly.
Generative models often output malformed LaTeX delimiters or broken JS syntax when asked to produce both prose and interactive simulation logic at once.
Solution: Divided responsibilities across specialized agents. The Analyzer first verifies formulas; the Creative Generator receives strict TypeScript schema contracts; and an AST sanitization layer validates syntax before rendering.