A live, AI-powered game development environment. Instruct, play, and code your game into existence, all in one canvas.

GenEngine is an interactive web application that revolutionizes game development through natural language instructions. With its intuitive three-panel interface, you can:

1. Director Panel - Enter natural language commands to describe your game
2. Live Canvas - See your game rendered and playable in real-time
3. Blueprint Panel - View and edit the AI-generated source code

The core loop is simple: Instruct → Generate → Interact

• Node.js (v20.17.0 or higher)
• npm or yarn
• A Gemini API key from Google AI Studio
• Cloudflare account (for deployment)

1. Clone the repository

git clone https://github.com/yourusername/genengine.git
cd genengine

2. Set up the Backend

cd backend

# Install dependencies
npm install

# Create your environment file
cp .dev.vars.example .dev.vars
# Edit .dev.vars and add your GEMINI_API_KEY

# Start the backend development server
npm run dev

The backend will run on http://localhost:8787

3. Set up the Frontend (in a new terminal)

cd frontend

# Install dependencies  
npm install

# Create your environment file
cp .env.example .env.local
# The default settings should work for local development

# Start the frontend development server
npm run dev

The frontend will run on http://localhost:5173

1. Open your browser to http://localhost:5173
2. In the Director Panel, type a command like:
   • "Create a red bouncing ball"
   • "Add keyboard controls to move the ball"
   • "Make the ball leave a trail"
3. Click "Generate" and watch your game come to life!
4. Use "Reset to Last" to undo if needed
5. Edit the code directly in the Blueprint Panel for fine control

• Components: Three main panels for user interaction
• Monaco Editor: VS Code's editor for code display
• State Management: React hooks for history and undo functionality

• Edge Computing: Low-latency API responses
• Gemini Integration: Google's AI for code generation
• CORS Enabled: Seamless frontend-backend communication

cd backend

# Add your Gemini API key as a secret
wrangler secret put GEMINI_API_KEY
# Enter your API key when prompted

# Deploy to Cloudflare
npm run deploy

Note your Worker URL (e.g., https://genengine-api.your-subdomain.workers.dev)

cd frontend

# Update .env.production with your Worker URL
echo "VITE_API_URL=https://your-worker-url.workers.dev" > .env.production

# Build the frontend
npm run build

# Deploy using Cloudflare Pages
# 1. Go to Cloudflare Dashboard > Pages
# 2. Create a new project
# 3. Connect your GitHub repository
# 4. Set build command: npm run build
# 5. Set build directory: dist

• Natural language to code generation
• Live canvas rendering
• Code editor with syntax highlighting
• Undo/Reset functionality
• Prompt history
• Manual code editing
• Error handling and display

• User accounts and authentication (Auth0)
• Project persistence (MongoDB Atlas)
• Asset upload (images/audio)
• Multi-file project support
• Collaborative features
• Advanced code intelligence

1. CORS errors: Make sure the backend is running and the API URL is correct in your .env file
2. Canvas not updating: Check the browser console for JavaScript errors
3. API key issues: Ensure your Gemini API key is properly set in .dev.vars

• Google Gemini for AI capabilities
• Cloudflare for edge infrastructure
• Monaco Editor for code editing
• The hackathon organizers and sponsors

Built with ❤️ during the hackathon. Happy coding! 🚀