AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4

Key Concepts

• AIventure: An open-source, offline-capable educational game designed to teach Generative AI (GenAI) principles.
• Vibe-coding: A development approach where AI generates functional code based on natural language prompts, often used here for interactive puzzles.
• Agentic NPCs: Non-Player Characters that use AI to reason, plan, and execute tasks autonomously within the game world.
• Gemma 4 / Gemini 3 Flash: The underlying Large Language Models (LLMs) used for processing prompts and generating game logic.
• Antigravity: An agentic development platform used to explore and manage the game's codebase.
• Event Bus: The architectural mechanism used to facilitate communication between the Angular UI and the PhaserJS game engine.

---

1. Project Overview and Objectives

"AIventure" is an educational game developed by Tom Greenaway and Drew Young (Google) that utilizes gamification to teach users about GenAI. The project demonstrates how to integrate AI into web applications to create interactive learning experiences. It is built using Angular for the UI and PhaserJS for the game engine, allowing for a seamless blend of traditional web development and game design.

2. Core Gameplay Mechanics and AI Integration

The game progresses through three primary levels of complexity:

• Prompt-Based Interaction: Players interact with the environment (e.g., "open the red door") by sending natural language prompts to the model, which interprets the command and triggers the corresponding game action.
• Vibe-Coding Puzzles: Players are tasked with building specific web applications (e.g., a to-do list) via AI prompts. The AI generates the code, which is rendered in an Iframe. The system then uses Gemma to evaluate the output against specific constraints (e.g., the to-do list must only contain "eat" or "sleep" tasks).
• Agentic NPC Loops: Players interact with NPCs to solve environmental obstacles. For example, a robot NPC is given a goal (e.g., "find the switch"). The NPC enters an "agentic thinking loop," where it repeatedly prompts the model to determine its next move (move, search, or interact) until the task is completed.

3. Technical Architecture and Frameworks

The project is designed for flexibility, allowing developers to choose between local or cloud-based AI processing:

• Frontend: Angular manages the UI, while PhaserJS handles the game world. Communication between these two is handled via an Event Bus.
• Model Routing:
  • Local: Gemma 4 can be hosted locally using tools like LLM Studio or Ollama.
  • API-based: The application can call the Gemini API directly from the frontend.
  • Cloud: Requests can be routed to Vertex AI on Google Cloud, which supports both Gemini and cloud-hosted Gemma 4.

4. Development Methodology

The developers emphasize the transition from prototyping with Gemini 3 Flash to utilizing the open-weight Gemma 4 model. The project serves as a practical framework for developers to:

1. Inspect Prompts: Users can examine the specific system prompts used to guide the AI in puzzle-solving and NPC behavior.
2. Modular Design: By separating the game logic from the model backend, the architecture allows for easy swapping of models depending on the user's hardware or cloud access.
3. Agentic Thinking: The NPC logic demonstrates how to structure prompts to create iterative, goal-oriented behavior rather than simple one-off responses.

5. Synthesis and Conclusion

AIventure serves as both a functional game and a technical blueprint for developers interested in GenAI. By combining Angular, PhaserJS, and LLMs, the project demonstrates that modern AI is capable of more than just text generation—it can act as a game engine component, a coding assistant, and an autonomous agent. The project encourages developers to move beyond "enhancing" existing apps with AI and instead "unlock" entirely new categories of interactive, AI-native educational experiences.