Part 1: Introduction & Architecture

• Time to complete: 20-25 minutes
• What you’ll build: Understanding of GAIA Code’s architecture and capabilities
• What you’ll learn: How the agent generates Next.js apps from natural language
• Platform: Runs locally on AI PCs with Ryzen AI (NPU/iGPU acceleration)

​

What is GAIA Code?

• Generates full-stack Next.js 15 applications
• Creates SQLite database schemas via Prisma
• Builds REST API endpoints with Zod validation
• Generates React components (list, form, detail views)
• Applies Tailwind CSS styling
• Validates TypeScript and iterates to fix errors

​

Why GAIA Code?

• Database schema design
• API endpoint creation with validation
• React component development
• Styling and theming
• TypeScript configuration
• Error handling and testing

​

Example

gaia code "Build me a movie tracking app in nextjs where I can track the movie title, genre, date watched, and a score out of 10"

• SQLite database with Movie model
• API routes (GET, POST, PUT, DELETE)
• React pages (list, create, detail views)
• Tailwind CSS styling
• TypeScript validation
• No errors, ready to run

​

System Architecture

​

Architecture Layers

​

1. User Interface Layer

• Input: Natural language prompt describing the application
• Output: Complete Next.js project structure

​

2. LLM Analysis Layer

• Local LLM via Lemonade Server analyzes requirements
• MVP Determination: Identifies minimal viable schema
• Contextual Understanding: Interprets user intent

​

3. Code Generation Layer

​

4. Validation & Build Layer

• TypeScript Validation: Checks type safety
• Build Process: Runs Next.js build
• Error Detection: Identifies issues
• Auto-Fix Loop: Iterates until success

​

How It Works: The MVP Approach

​

Schema Determination Process

1. User provides prompt: “Build me a movie tracking app”
2. LLM analyzes requirements: What’s the minimum needed?
3. MVP schema generated: Just title and watched status
4. User can iterate: Add more fields later

​

Example: Movie Tracker Evolution

​

Initial Prompt → MVP Schema

gaia code "Build me a movie tracking app"

model Movie {
  id       Int      @id @default(autoincrement())
  title    String
  watched  Boolean  @default(false)
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
}

​

Specific Prompt → Detailed Schema

gaia code "Build me a movie tracking app in nextjs where I can track the movie title, genre, date watched, and a score out of 10"

model Movie {
  id          Int       @id @default(autoincrement())
  title       String
  genre       String
  dateWatched DateTime
  score       Int
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

​

Technology Stack

​

Frontend

• Next.js 14 with App Router
• React for UI components
• TypeScript for type safety
• Tailwind CSS for styling

​

Backend

• Next.js API Routes (serverless functions)
• Prisma ORM for database access
• SQLite database (file-based, no server needed)
• Zod for runtime validation

​

Development

• Local LLM via Lemonade Server (AMD NPU/iGPU accelerated)
• TypeScript Compiler for validation
• Next.js Build System for optimization

​

Generated Project Structure

your-app/
├── prisma/
│   ├── schema.prisma          # Database models
│   └── dev.db                 # SQLite database file (after setup)
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   └── [resource]/
│   │   │       ├── route.ts        # GET, POST
│   │   │       └── [id]/route.ts   # GET, PUT, DELETE
│   │   ├── [resource]/
│   │   │   ├── page.tsx        # List view
│   │   │   ├── new/page.tsx    # Create form
│   │   │   └── [id]/page.tsx   # Detail view
│   │   ├── layout.tsx          # Root layout
│   │   ├── page.tsx            # Home page
│   │   └── globals.css         # Global styles
│   └── lib/
│       └── prisma.ts           # Database client
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js

​

Key Concepts

​

1. MVP-First Generation

# Simple prompt = minimal schema
gaia code "Build me a workout tracker"
# Likely generates: workout name, date, completed

# Detailed prompt = detailed schema
gaia code "Build me a workout tracking app in nextjs where I can track workout, duration, date, and goal"
# Generates exactly what you specified

​

2. Iterative Error Fixing

1. Generate initial code
2. Run TypeScript validation
3. Found errors? → Fix them
4. Run Next.js build
5. Build failed? → Fix issues
6. Repeat until working

​

3. Full-Stack Integration

• Database models → TypeScript types
• API routes → Zod validators
• React components → API clients
• All type-safe and validated

​

Quick Start

git clone https://github.com/amd/gaia.git
cd gaia
uv pip install -e ".[dev]"

lemonade-server serve --ctx-size 32768

gaia code "Build me a todo tracking app using typescript"

cd todo-tracking-app
npm install
npx prisma generate
npx prisma db push
npm run dev

​

What’s Next?