AIventure: Vibe Coding Journey

Google for Developers · Beginner ·🌐 Frontend Engineering ·1mo ago

Key Takeaways

Builds AIventure, a retro dungeon crawler using Angular, Phaser.js, and Gemma 4 open weights to teach vibe coding and agentic behaviors

Original Description

Ian Ballantyne, Developer Relations Engineer at Google DeepMind, introduces AIventure, an open source retro dungeon crawler that doubles as a Gen AI masterclass for developers. Built on Angular and Phaser.js and powered by Gemma 4 open weights, the game teaches vibe coding and agentic behaviors through gameplay. What's covered: Prompting a Chicken NPC to vibe code a web app that Gemma 4 writes in HTML, CSS, and JavaScript and renders in an iframe, prompting a Robot NPC that triggers an autonomous thinking loop with tool calls into the Phaser.js engine, and the model-serving options for Gemma 4: fully local with Transformers.js, Ollama, or LM Studio, or routed to the Gemini API or Google Cloud with a config change. Scan the QR code in the video or hit the GitHub repo to explore the full developer solution. AIventure on GitHub / Developer solution writeup / Gemma docs / Gemini API What are you building with Gemma 4? Drop it in the comments. Subscribe to Google for Developers → https://goo.gle/developers #GoogleDeveloperNews Speaker: Ian Ballantyne Products Mentioned: Google AI, Gemma
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Related Reads

📰
React Introduction
Learn the basics of ReactJS and how to build dynamic user interfaces with this popular JavaScript library
Dev.to · Karthick (k)
📰
Why SnapDOM Beats html2canvas for DOM-to-Image Capture
Learn why SnapDOM outperforms html2canvas for DOM-to-image capture and how to use it in your frontend projects
Dev.to · Juan Martin
📰
I built 42 landing page templates as single HTML files (no npm, no build step)
Learn how to create simple landing page templates as single HTML files without relying on npm or build steps, and why this approach matters for efficient web development
Dev.to · Segcam spa
📰
Part 7B — Section 2 — React Event Handling Explained: Forms, Event Object & User Input.
Learn React event handling for forms and user input to improve your frontend skills
Medium · JavaScript
Up next
Elementor Angie Ai Plugin Tutorial
Quick Tips - Web Desiign & Ai Tools
Watch →