AI-powered asset + game creation platform — Plan and generate 2D/3D assets, then build a playable Babylon.js game in Hatch Studios.

---

✨ What is Asset Hatch?

Asset Hatch transforms how indie developers create production-ready assets and playable game prototypes. Instead of manual spec docs or brittle prompts, you have a conversation with an AI that understands game development.

Hatch Studios (Game Creation)

Hatch Studios is the game creation extension inside Asset Hatch. It turns natural language into multi-file Babylon.js projects, with a live preview and asset-aware tools.

The Workflow

ASSET HATCH (2D)
🗣️ PLANNING     →  📐 STYLE      →  🎨 GENERATION  →  📦 EXPORT
Chat with AI       Style anchor       Batch generate    Download ZIP
Build asset plan   + references       sprites + sheets  with metadata

ASSET HATCH (3D)
🗣️ PLANNING     →  🧱 GENERATION  →  🧭 PREVIEW    →  📦 EXPORT
Chat with AI       Tripo3D pipeline    Three.js viewer  Download GLB

HATCH STUDIOS (GAME)
📋 PLAN         →  💻 CODE       →  ▶️ PREVIEW    →  📦 EXPORT
Game concept       Multi-file JS       Babylon.js iframe (in progress)
and mechanics      editor + tools      Live playtest

Key Features

• 2D + 3D Asset Creation — Sprites, tiles, props, and GLB models in one workspace

• Style Consistency — Style anchors keep assets visually cohesive

• Image Model Skybox Generation - Generate equirectangular panoramas for your games with Nano Banana!

• Asset Inventory — Approve, catalog, and reuse assets across projects

• Hatch Studios Game Builder — Multi-file Babylon.js projects with live preview

• Shared Context — A multi-file spec sheet, asset inventory, & project brief shared between Assets and Game tabs

• Export Ready — ZIPs for 2D packs and GLB downloads for 3D models

Current Status

• Asset Hatch (2D & 3D): Fully functional. Generate high-quality sprites, tiles, and 3D models with rigging and animations.
• Hatch Studios (Game Engine): [WIP] The multi-file editor and shared context are live, but the Babylon.js game runtime is still being hatched. It's more of a "look but don't touch" situation for now, unless you enjoy debugging iframe race conditions.

---

🚀 Quick Start

Prerequisites

• Bun (recommended) or Node.js 20+
• GitHub Account (for OAuth login)
• OpenRouter API Key (for AI features)

1. Clone & Install

git clone https://github.com/zenchantlive/Asset-Hatch.git
cd Asset-Hatch/src
bun install

2. Configure Environment

# Copy the example environment file
cp .env.example .env.local

# Edit with your credentials
# See "Environment Variables" section below for details

3. Set Up Database

bunx prisma generate
bunx prisma db push

4. Run Development Server

bun dev

Open http://localhost:3000 in your browser.

---

🔧 Environment Variables

Create a .env.local file in the src/ directory:

# ============================================
# REQUIRED - App will not start without these
# ============================================

# Session encryption secret
# Generate with: openssl rand -base64 32
AUTH_SECRET="your-generated-secret-here"

# SQLite database location (local file)
DATABASE_URL="file:./dev.db"

# ============================================
# GITHUB OAUTH - Required for login
# ============================================
# Create OAuth App: https://github.com/settings/developers
# Homepage URL: http://localhost:3000
# Callback URL: http://localhost:3000/api/auth/callback/github

AUTH_GITHUB_ID="your-github-client-id"
AUTH_GITHUB_SECRET="your-github-client-secret"

# ============================================
# OPENROUTER - Required for AI features
# ============================================
# Get your API key: https://openrouter.ai/keys
# Pricing: ~$0.01-0.05 per image generation

OPENROUTER_API_KEY="sk-or-v1-your-key-here"

Getting Your API Keys

1. GitHub OAuth App

   • Go to GitHub Developer Settings
   • Click "New OAuth App"
   • Set Homepage URL: http://localhost:3000
   • Set Callback URL: http://localhost:3000/api/auth/callback/github
   • Copy Client ID and Client Secret

2. OpenRouter API Key

   • Sign up at OpenRouter
   • Go to API Keys
   • Create a new key and copy it

---

📁 Project Structure

Asset-Hatch/
├── src/                      # Main application code
│   ├── app/                  # Next.js App Router pages
│   │   ├── api/              # API routes (chat, generation, auth)
│   │   └── project/          # Project pages (planning, generation)
│   ├── components/           # React components
│   │   ├── planning/         # Chat, plan preview, quality controls
│   │   ├── generation/       # Generation queue, asset cards
│   │   └── ui/               # Shared UI components (shadcn/ui)
│   ├── lib/                  # Utilities and clients
│   │   ├── client-db.ts      # Dexie (IndexedDB) client cache
│   │   ├── prisma.ts         # Prisma (SQLite) server database
│   │   └── flux-client.ts    # OpenRouter image generation
│   ├── memory/               # AI context documentation
│   └── prisma/               # Database schema and migrations
├── docs/                     # Additional documentation
├── blog/                     # Development blog posts
└── .github/                  # GitHub Actions workflows

---

🛠️ Development Commands

# Development
bun dev              # Start dev server (localhost:3000)
bun build            # Build for production
bun start            # Start production server

# Code Quality
bun run typecheck    # TypeScript type checking
bun run lint         # ESLint

# Testing
bun run test         # Run tests in watch mode
bun run test:ci      # Run tests once with coverage

# Database
bunx prisma studio   # Open database GUI
bunx prisma db push  # Push schema changes (development)
bunx prisma migrate dev  # Create migration (production)

---

🧠 Tech Stack

Category	Technology
Framework	Next.js 16.1 (App Router)
Language	TypeScript (strict mode)
Styling	Tailwind CSS v4, shadcn/ui
AI SDK	Vercel AI SDK v6
AI Provider	OpenRouter (Gemini, Flux)
3D Stack	Tripo3D + Three.js (asset preview) + Babylon.js (Hatch Studios)
Database	SQLite (Prisma) + IndexedDB (Dexie)
Auth	Auth.js (NextAuth v5)
Package Manager	Bun

---

📖 How It Works

1. Planning (2D + 3D)

Chat with the AI to describe your game. The AI automatically:

• Extracts quality parameters (art style, resolution, perspective)
• Builds an asset list organized by category
• Generates detailed prompts for each asset

2. Style Anchor (2D)

Upload reference images or describe your desired style. The AI:

• Analyzes visual elements (color palette, texture, lighting)
• Generates a "style anchor" image for consistency
• Uses this anchor to guide all subsequent generations

3. Generation (2D + 3D)

Select assets and generate in batches:

• Preview before approving
• Regenerate with different variations
• Compare multiple versions side-by-side
• Accept/reject individual assets

4. Export (2D + 3D)

Package your approved assets:

• Organized folder structure by category
• Sprite sheet generation (2D)
• JSON metadata for game engines
• GLB download (3D)

5. Hatch Studios (Game Creation)

Build a playable game on top of your assets:

• AI generates multi-file Babylon.js code
• Tabs for Plan, Code, and Preview
• Shared context so the AI remembers your game across tabs

---

🔒 Security

• API Keys: Stored only in your local .env.local file
• OAuth Tokens: Managed by Auth.js, stored in SQLite
• Database: Local SQLite file, not exposed to network
• No Telemetry: No data sent to external analytics services

For security vulnerabilities, please see SECURITY.md.

---

🤝 Contributing

We welcome contributions! See CONTRIBUTING.md for guidelines.

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes with detailed messages
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📜 License

This project is licensed under the GNU General Public License v3.0.

This means:

• ✅ You can use, modify, and distribute this software
• ✅ You must keep it open source if you distribute it
• ✅ You must include the original license and copyright

---

🙏 Acknowledgments

• OpenRouter for AI model access
• Vercel for the AI SDK
• shadcn/ui for beautiful UI components
• Prisma for database tooling

---

📧 Contact

Created by @zenchantlive

Questions? Open an issue or start a discussion.

---

Building in Public — Follow our development journey in the blog/ directory!