--- title: AIventure: Learning about vibe-coding, agents and Gen AI... description: AIventure is an open-source educational web game built with Angular, Phaser.js, and Gemma 4 (or Gemini) that teaches players about generative AI concepts... canonical: https://daily.dev/posts/aiventure-learning-about-vibe-coding-agents-and-gen-ai-with-gemma-4-8mmsxrik9 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4 | daily.dev og:description: AIventure is an open-source educational web game built with Angular, Phaser.js, and Gemma 4 (or Gemini) that teaches players about generative AI concepts... og:url: https://daily.dev/posts/aiventure-learning-about-vibe-coding-agents-and-gen-ai-with-gemma-4-8mmsxrik9 og:image: https://api.daily.dev/og/posts/8mmsXRiK9.png og:image:alt: AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4 og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4 **[Google for Developers](https://daily.dev/sources/googledevelopers)** · 6 min read · 2 upvotes · 0 comments ## Summary AIventure is an open-source educational web game built with Angular, Phaser.js, and Gemma 4 (or Gemini) that teaches players about generative AI concepts through interactive puzzles. The game features three core mechanics: prompt-based door opening, vibe coding challenges where players build mini web apps via AI prompts, and agentic NPCs that use a looping prompt-execute cycle to navigate the game world. It supports multiple AI backends including locally hosted Gemma 4 via LM Studio or Ollama, direct Gemini API calls, or Vertex AI on Google Cloud. The project demonstrates how Angular and Phaser.js can be integrated via an event bus, and serves as a reference for building AI-powered gamified learning experiences. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Similar posts on daily.dev - [Hacking with multimodal Gemma 4 in AI Studio](https://daily.dev/posts/hacking-with-multimodal-gemma-4-in-ai-studio-udqmc51go) · DEV · 2 upvotes · 0 comments --- Tags: [#genai](https://daily.dev/tags/genai), [#angular](https://daily.dev/tags/angular), [#ai-agents](https://daily.dev/tags/ai-agents), [#vibe-coding](https://daily.dev/tags/vibe-coding), [#gemma](https://daily.dev/tags/gemma) [View this post on daily.dev](https://daily.dev/posts/aiventure-learning-about-vibe-coding-agents-and-gen-ai-with-gemma-4-8mmsxrik9) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4","url":"https://daily.dev/posts/aiventure-learning-about-vibe-coding-agents-and-gen-ai-with-gemma-4-8mmsxrik9","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/aiventure-learning-about-vibe-coding-agents-and-gen-ai-with-gemma-4-8mmsxrik9"},"datePublished":"2026-04-02T19:18:59.127Z","dateModified":"2026-04-02T19:19:20.554Z","description":"AIventure is an open-source educational web game built with Angular, Phaser.js, and Gemma 4 (or Gemini) that teaches players about generative AI concepts...","image":"https://i.ytimg.com/vi/6yjJ7Prt-RI/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/6yjJ7Prt-RI/sddefault.jpg","isAccessibleForFree":true,"articleSection":"Google for Developers","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Google for Developers","logo":"https://media.daily.dev/image/upload/s--jj3nxRoG--/f_auto/v1725035497/logos/googledevelopers","url":"https://daily.dev/sources/googledevelopers"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/aiventure-learning-about-vibe-coding-agents-and-gen-ai-with-gemma-4-8mmsxrik9","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"genai,angular,ai-agents,vibe-coding,gemma","timeRequired":"PT6M","video":{"@type":"VideoObject","name":"AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4","description":"AIventure is an open-source educational web game built with Angular, Phaser.js, and Gemma 4 (or Gemini) that teaches players about generative AI concepts...","thumbnailUrl":"https://i.ytimg.com/vi/6yjJ7Prt-RI/sddefault.jpg","uploadDate":"2026-04-02T19:18:59.127Z","duration":"PT6M","url":"https://api.daily.dev/r/8mmsXRiK9","embedUrl":"https://www.youtube.com/embed/6yjJ7Prt-RI"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Google for Developers","item":"https://daily.dev/sources/googledevelopers"},{"@type":"ListItem","position":3,"name":"AIventure: Learning about vibe-coding, agents and Gen AI with Gemma 4"}]} ```