Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

GameForge - Agentic Game Creator

License: MITNode.js 20+

AI-powered game creation platform. Describe your game in plain English, watch an AI agent team build it collaboratively with live preview. Supports 2D games with Phaser 3 and 3D games with Three.js.

GameForge is a learning repo — it demonstrates how to build a multi-agent AI pipeline using the Claude Agent SDK and Google Gemini (Nano Banana for sprites, Lyria for music) to orchestrate a team of specialized AI agents that collaborate to produce working Phaser 3 (2D) and Three.js (3D) games.

What You Can Learn

  • Claude Agent SDK patterns — programmatic agent control, subagents, structured tool use
  • MCP tool servers — building custom Model Context Protocol tools for agent capabilities
  • Multi-agent orchestration — designing pipelines where agents hand off work to each other
  • Google Gemini Nano Banana — generating game sprites and backgrounds from text descriptions
  • Google Lyria — composing background music via the RealTime WebSocket API
  • Phaser 3 + Three.js game development — scaffolding, code generation, and live preview for 2D and 3D games
  • Full-stack TypeScript — Nx monorepo, Next.js, Express, WebSocket, Zustand

How the AI Agent Pipeline Works

When a user describes a game in the chat, the orchestrator runs a sequential pipeline of specialized agents:

User Message
│
▼
┌─────────────┐ Creates a Game Design Document (GDD)
│ Designer │ with mechanics, art direction, and audio specs
└──────┬──────┘
│
▼
┌─────────────┐ Generates sprites and backgrounds via
│ Artist │ Google Gemini Nano Banana (runs if GDD has artDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Composes background music via Google Lyria
│ Musician │ RealTime API (runs if GDD has musicDirection)
└──────┬──────┘
│
▼
┌─────────────┐ Writes Phaser 3 or Three.js TypeScript code
│ Developer │ using the GDD and generated assets via MCP file tools
└──────┬──────┘
│
▼
┌─────────────┐ Launches the game in Playwright, captures
│ QA │ screenshots, reports bugs back to the user
└──────┬──────┘
│
▼
User Feedback → loops back to Designer for iteration

Each agent uses the Claude Agent SDK with custom MCP tool servers. The orchestrator manages conversation context so agents can see prior work and iterate based on QA feedback.

Key Files to Study

FileWhat It Demonstrates
apps/orchestrator/src/agents/teamOrchestrator.tsPipeline orchestration — how agents are sequenced and handed context
apps/orchestrator/src/tools/gameToolServer.tsMCP tool server — custom file tools that agents use to read/write game code
apps/orchestrator/src/agents/prompts/Agent system prompts — how each agent role is defined
apps/orchestrator/src/assets/assetGenerator.tsGemini Nano Banana integration — text-to-image generation for game sprites
apps/orchestrator/src/music/musicGenerator.tsLyria RealTime API — WebSocket streaming for music composition
apps/orchestrator/src/tools/assetToolServer.tsMCP tools for asset generation — generate_asset, get_asset_status
apps/orchestrator/src/tools/musicToolServer.tsMCP tools for music generation — generate_music, get_music_status
docs/research/API research notes — Claude Agent SDK, Gemini Nano Banana, Lyria, Phaser, Three.js

Architecture

apps/
studio/ Next.js 16 frontend (port 4001) — chat + game preview
orchestrator/ Express + WebSocket backend (port 4000) — AI agent pipeline
packages/
shared-types/ TypeScript types shared across apps (messages, sessions, agents)
game-templates/ Phaser 3 and Three.js starter templates for scaffolding
sessions/ Runtime game project data per session (gitignored)

Quick Start

Prerequisites

  • Node.js 20+
  • npm 10+
  • An ANTHROPIC_API_KEY for Claude (required)
  • A GOOGLE_AI_API_KEY for asset/music generation (optional)

Setup

# Install dependencies
npm install
# Copy environment variables
cp .env.example .env.local
# Edit .env.local and set ANTHROPIC_API_KEY (and optionally GOOGLE_AI_API_KEY)# Build shared packages
npx nx run-many -t build --projects=shared-types,game-templates

Development

Run the orchestrator and studio in separate terminals:

# Terminal 1 — Orchestrator backend
npx nx serve orchestrator
# Terminal 2 — Studio frontend
npx nx dev studio

Then open http://localhost:4001 in your browser.

Docker

# Start all services
docker-compose up
# Start with E2E test runner
docker-compose --profile e2e up

Health checks are configured for both services. The studio waits for the orchestrator to be healthy before starting.

Environment Variables

VariableRequiredDescription
ANTHROPIC_API_KEYYesClaude API key for the AI agent pipeline
GOOGLE_AI_API_KEYNoGoogle AI API key — enables Artist (Nano Banana) and Musician (Lyria) agents
ORCHESTRATOR_PORTNoOrchestrator HTTP/WS port (default: 4000)
STUDIO_PORTNoStudio frontend port (default: 4001)
NEXT_PUBLIC_ORCHESTRATOR_URLNoStudio → orchestrator REST URL (default: http://localhost:4000)
NEXT_PUBLIC_ORCHESTRATOR_WS_URLNoStudio → orchestrator WebSocket URL (default: ws://localhost:4000)

Testing

Tests are mandatory for all code. Run them with:

# All tests
npx nx run-many -t test# Single project
npx nx test studio
npx nx test orchestrator
npx nx test shared-types
npx nx test game-templates
# Type checking
npx nx run-many -t typecheck

Building

# Build all projects
npx nx run-many -t build
# Build specific project
npx nx build orchestrator
# View the project dependency graph
npx nx graph

Tech Stack

  • Frontend: Next.js 16 (App Router), Tailwind CSS, Zustand
  • Backend: Node.js, Express, WebSocket (ws), esbuild
  • Game Engines: Phaser 3 (2D), Three.js (3D)
  • AI: Claude Agent SDK (TypeScript), Claude Opus
  • Asset Generation: Google Gemini Nano Banana (sprites, backgrounds)
  • Music Generation: Google Lyria RealTime API (background music)
  • Build: Nx monorepo, Vite (game projects)
  • Testing: Vitest (unit/integration), Playwright (QA + E2E)

Documentation

Build Journey

This project was built iteratively in phases. See tasks/todo.md for the full phase-by-phase development log, and tasks/lessons.md for lessons learned during the build.

License

MIT

About

AI-powered game creation platform — learn how to build multi-agent pipelines with the Claude Agent SDK, MCP tool servers, and Google Gemini (Nano Banana + Lyria)

Topics

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages