AIventure: Vibe Coding Journey

[00:00:03]- Want to learn how to build agentic workflows and integrate vibe coding into your apps?

[00:00:07]Well we built AIventure, an open source retro dungeon crawler that doubles as a Gen AI masterclass for developers.

[00:00:13]Built on an Angular and Phaser.js stack, AIventure is powered by Google's Gemma 4 open weights model.

[00:00:19]First, we'll explore vibe coding.

[00:00:21]You prompt a Chicken NPC to build a web app. Behind the scenes, Gemma 4 writes HTML, CSS, and JavaScript on-the-fly and renders it locally in an iframe to validate the constraints.

[00:00:32]Next, you'll build agentic behaviors.

[00:00:34]When encountering a puzzle you can't physically cross, you must prompt a Robot NPC.

[00:00:39]This triggers an autonomous thinking loop.

[00:00:41]Gemma 4 evaluates the game state, executes specific tool calls to locate a hidden switch, and interacts with a Phaser.js game engine to solve the puzzle.

[00:00:50]The biggest takeaway, you have complete flexibility in how the model is served.

[00:00:53]You can run Gemma 4 entirely locally, with zero ongoing server costs using Transformers.js in the browser, or by plugging into Ollama or LM Studio via their open AI compatible interfaces.

[00:01:04]Need cloud scale, a simple config change route your request to the right Gemini API or Google Cloud.

[00:01:10]Ready to look under the hood?

[00:01:11]Scan the QR code and explore the GitHub repo and read the full developer solution.

[00:01:15]Take on the quest to expand your AI tooling knowledge with AIventure.