CodexChaos Engine

💡 Inspiration

Live streaming on Twitch has exploded into a global culture, yet viewer interaction remains largely passive: viewers type in chat while streamers play their game. Existing overlays are static GIFs or pre-baked soundboards. We asked ourselves: What if Twitch chat could literally write code that alters the game stream live?

What if a viewer types !mod bouncing neon ducks with low gravity or !mod retro 80s crt scanlines and glitch bars, and within 1.2 seconds, an AI writes the Canvas/WebGL code, audits it for security, and hot-swaps it into the streamer's OBS broadcast without dropping a single frame? That is CodexChaos Engine.

⚙️ What It Does

1. Twitch Chat & IRC Bridge: Captures live Twitch chat events and parses commands (!mod <prompt>, !revert, !clear). Also features a multi-viewer offline chat simulator for rehearsals.
2. OpenAI Codex Synthesizer: Converts natural language prompts into optimized HTML5 Canvas render functions that execute at 60 FPS.
3. Zero-Trust AST Security Sandbox: Analyzes incoming JavaScript code at the token level, blocking dangerous APIs (fetch, eval, localStorage, document.cookie, process, DOM injection) before execution.
4. Mod Registry & Rollback Engine: Stacks multiple active mods in real time. If a mod is visually disruptive, anyone in chat can type !revert to roll back instantly.
5. Dual-Mode Display:
   • Streamer Studio Mode: Features an interactive dashboard with live retro game simulation, FPS HUD, preset triggers, and live Codex AST compilation logs.
   • OBS Transparent Mode (?view=obs): Zero-UI, completely transparent canvas designed to be added directly as a 1080p Browser Source in OBS Studio over any PC or console game.

🛠️ How We Built It

• Frontend Core: Vanilla JavaScript (ESModules) and HTML5 Canvas for predictable 60 FPS render loops and zero runtime overhead.
• Styling: Custom CSS design system inspired by Twitch Dark Mode, cyberpunk neon accents (#9146ff, #00f0ff, #10b981), and responsive glassmorphism cards.
• AST Security Parser: Custom token scanner with sandboxed function compilation ((ctx, canvas, state, time)) that strictly limits execution scope.
• Cross-Tab Synchronization: BroadcastChannel protocol syncing studio mod actions to the OBS Browser Source window with zero latency.
• Bundling & Testing: Vite for 118ms production builds; Node.js native test runner (node --test) for automated CI testing (5/5 tests passing in 85ms).
• Deployment: Automated CI/CD pipeline via GitHub Actions deploying to GitHub Pages.

🚧 Challenges We Ran Into

• Maintaining 60 FPS Under Continuous Hot-Swapping: Compiling and injecting dynamic JavaScript render loops without dropping frames required isolating mod state into persistent state objects (mod.state) so new code hot-swaps seamlessly without restarting animations.
• Zero-Trust Twitch Chat Security: Anonymous chat users can attempt to inject malicious JavaScript. Building an airtight AST token sanitizer that permits creative visual Canvas rendering while strictly forbidding network requests, cookies, or storage access was critical.

🏅 Accomplishments That We're Proud Of

• Sub-1.2s round-trip latency from Twitch chat command to live on-screen rendering.
• 100% transparent OBS browser source integration requiring zero external software plugins.
• Built-in !revert command giving chat and streamers total safety and control.
• 100% test coverage with 5 automated unit tests verifying the sandbox, state manager, and IRC bridge.

📖 What We Learned

• How to sandbox user-generated canvas code safely without heavy WebAssembly overhead.
• Streamer UX needs: Streamers want maximum visual impact with zero manual intervention during gameplay.

🚀 What's Next for CodexChaos Engine

• Direct Twitch OAuth and EventSub WebSocket connectivity for Twitch Partners and Affiliates.
• Channel Points redemption triggers (e.g. viewers spend 500 Channel Points to trigger a 30-second custom mod).
• WebGL 3D shader support for advanced particle physics and 3D hologram overlays.

Built With

• html5
• javascript
• obs-studio
• openai-codex
• twitch
• vite
• webgl