Architecture

Frontend

• Framework: React 18 with TypeScript
• Styling: Tailwind CSS
• State Management: Zustand stores
• Routing: React Router v6
• Icons: Lucide React
• Build: Vite
• Real-time: WebSocket for streaming AI responses and events

Backend Services

• Dev-Server — Code generation, AI chat, project management, file operations
• Management — User accounts, billing, team management, OAuth
• Accounting — Usage tracking, cost analytics, Stripe integration
• Orchestrator — Agent Flow workflow execution

AI Models

• Claude (Anthropic) — Code generation and chat (Sonnet for complex, Haiku for simple tasks)
• Gemini (Google) — Image generation, cost-efficient classification, summarization

Infrastructure

• Workspace containers — One Docker container per workspace (isolated dev server)
• Cloud hosting — AWS ECS (Fargate) for backend services
• Database — PostgreSQL (RDS) for management, Aurora for published app databases
• Storage — S3 for assets, screenshots, published sites
• CDN — CloudFront for frontend delivery
• Cache — Redis for workspace state and node discovery

Key Design Decisions

• Merge only, never rebase — All Git operations use merge strategy
• File-based project storage — Dev-Server stores projects as JSON files on EFS
• Per-user source paths — Each collaborator has isolated file paths
• Smart model routing — Automatic AI model selection based on task complexity
• Auto-commit — AI changes are committed and pushed automatically