🚀 Want to Contribute?
VibeWare is open source! Add your own AI-generated microgame to the collection.
View on GitHub →What is VibeWare?
VibeWare reimagines WarioWare with a twist: every microgame is generated entirely by AI. An AI agent dreams up game concepts, writes all the TypeScript/Phaser 3 code, validates functionality, and delivers endless 3-5 second challenges - all without human coding.
Winner of the Game Changers VIBE CODING HACKATHON, VibeWare exemplifies "vibe coding" - humans set the creative direction while AI handles implementation. Even this blog post was vibe coded!
How Does It Work?
🤖 Idea → Code → Game
AI generates complete games: concept, mechanics, TypeScript code, graphics, physics, and win/lose conditions. Each microgame takes 3-5 seconds to complete.
🔍 Auto-Validation
Games are validated for compilation, framework compliance, and required methods. Failed attempts trigger fresh generation - ensuring only working games go live.
♾️ Infinite Library
New games can be generated on-demand. With AI's creativity and ~$0.05 per game cost, the possibilities are endless.
python generate_microgame.py --auto ✅ Generated: FlickThePickleGame in ~30 seconds!
Technical Deep Dive: The AI Generation Process
The magic behind VibeWare lies in its sophisticated AI-driven game generation pipeline. Here's how our AI agent transforms a simple verb prompt into a fully functional microgame:
📋 Step 1: The BaseMicrogame Template
Every microgame in VibeWare extends a base class that provides the core framework. This ensures consistency across all games while giving the AI a structured template to work with:
export default abstract class BaseMicrogame extends Phaser.Scene {
// Core game state management
protected gameState!: GameState;
protected timeRemaining: number = 5000;
protected hasWon: boolean = false;
// Abstract methods the AI must implement
abstract getPrompt(): string; // e.g., "FLICK!"
abstract getGameDuration(): number; // Usually 3-5 seconds
abstract setupGame(): void; // Create game objects
abstract setupControls(): void; // Handle input
abstract cleanupControls(): void; // Clean up listeners
abstract resetGameState(): void; // Reset for replay
}
🧠 Step 2: AI Analysis & Learning
The AI agent studies the base template and reads through example games to understand the patterns. It learns how successful microgames structure their code, handle physics, manage win/lose conditions, and create engaging visual feedback:
// AI reads examples like FlickThePickleGame
export default class FlickThePickleGame extends BaseMicrogame {
private pickle!: Phaser.GameObjects.Ellipse;
getPrompt(): string { return 'FLICK!'; }
setupGame(): void {
this.createPickle();
// AI learns: games need visual objects
}
setupControls(): void {
this.input.on('pointerdown', this.flickPickle, this);
// AI learns: games need input handling
}
}
💡 Step 3: Creative Brainstorming
Given a verb prompt (like "CATCH", "DODGE", or "SNEEZE"), the AI agent brainstorms a game concept. It considers physics, visual metaphors, and player interactions that match the verb's action:
AI Thought Process: Prompt: "SNEEZE" → Brainstorm: What involves sneezing? → Concept: Player must fake a sneeze by covering their face → Mechanic: Click and hold to cover mouth/nose → Win condition: Successfully "sneeze" before time runs out → Visual: Face sprite, hands, particle effects
⚙️ Step 4: Code Generation
The AI generates complete TypeScript code that extends BaseMicrogame, implementing all required methods while adding game-specific logic. It handles Phaser 3 physics, sprites, tweens, and input:
// AI generates complete game implementation
export default class SneezeGame extends BaseMicrogame {
private face!: Phaser.GameObjects.Image;
private isCoveringFace: boolean = false;
setupGame(): void {
// AI creates all visual elements
this.face = this.add.image(GAME_WIDTH/2, GAME_HEIGHT/2, 'face');
this.createSneezeParticles();
}
setupControls(): void {
// AI implements game mechanics
this.input.on('pointerdown', () => {
this.isCoveringFace = true;
this.showHandsCoveringFace();
});
}
protected onGameUpdate(): void {
// AI adds win/lose logic
if (this.isCoveringFace && this.sneezeProgress >= 100) {
this.setWinState();
this.createSneezeEffect();
}
}
}
✅ Step 5: Validation & Quality Control
Before a game goes live, our validation system rigorously tests the AI's creation:
- Compilation Check: Does the TypeScript code compile without errors?
- Method Implementation: Are all abstract methods from BaseMicrogame implemented?
- Game Loop Integrity: Does the game properly handle win/lose states?
- Resource Management: Are controls cleaned up properly to prevent memory leaks?
- Timing Constraints: Is the game duration between 3-5 seconds?
If validation fails, the AI agent starts fresh with a new concept rather than trying to patch broken code. This ensures only high-quality, fully functional games make it into the game.
🔬 The Secret Sauce: Structured Creativity
What makes VibeWare's approach unique is the balance between structure and creativity. The BaseMicrogame class provides just enough framework to ensure consistency and quality, while leaving massive creative freedom for the AI to explore new mechanics, visual styles, and player interactions.
The AI isn't just copying examples - it's learning patterns and applying them in novel ways. Each game is genuinely unique, with its own personality and gameplay twist. From flicking pickles to shielding sneezes, the AI's creativity is bounded only by the 3-5 second time constraint and the need to be immediately understandable.
Powered by AgentOps
One of the key technologies that made VibeWare possible is AgentOps - a powerful observability platform for AI agents. AgentOps was instrumental in tracking the performance and costs of our game generation system.
That's right - each unique microgame costs approximately 5 cents to generate!
With AgentOps, we could monitor:
- Token usage and API costs per game generation
- Success/failure rates of game validation
- Time taken for each generation attempt
- Retry patterns when games fail validation
AI-Generated Games
A sample of our AI's creativity - each game conceived and coded without human intervention:
The Tech & Philosophy
Vibe Coding in Action: Humans set creative direction, AI handles implementation. Built with TypeScript, Phaser 3, Python, and Vite - all orchestrated by our AI agent.
// AI extends our base framework:
export default class FlickThePickleGame extends BaseMicrogame {
create(): void {
// AI writes all game logic
this.createPickle();
this.setupFlickMechanics();
}
}