Note

This project is an attempt to recreate the software architecture of other AI web builders like V0.dev and Bolt.new

Code Interface	Live Preview

WebBuilder.AI is an AI-powered web application builder that allows users to create full-stack web applications using natural language prompts. Code is generated on the backend server and executed in-browser using WebContainer.

Software Architecture

Backend (Node.js + Express)

Core Modules

• Template Engine: Processes and returns boilerplate templates from /template
• AI Generator: Handles prompt analysis and code generation through Gemini AI from /chat

API Endpoints

• POST /template

  • Input: User prompt
  • Output: Template files

• POST /chat

  • Input: User prompt + Template files
  • Output: Generated code (step-based structure)

Frontend (Next.js)

Core Components

• FileExplorer: Renders a tree-view of the project directory.
• CodeEditor: Monaco-based file editor for editing project files.
• Terminal: Displays logs and executed shell commands.
• PreviewFrame: Embeds the live app using WebContainer’s server.

State Management

• React hooks for component state
• Context API for global terminal and container state
• WebContainer API for file system operations, runtime execution, and dependency installation

Tech Stack

Category	Technologies
Frontend	WebContainer API 1.6.1 Next.js 15.3.2 React 19 TailwindCSS v4 TypeScript
Backend	Node.js Express Google Gemini AI TypeScript

Workflow

1. User enters a prompt describing the desired application.
2. The prompt is sent to the backend via the /template endpoint.
3. The backend determines the type of application (For now, only React and Node) and returns relevant template files.
4. The frontend:
   • Receives the templates
   • Initializes the WebContainer
   • Installs dependencies
   • Sends a request to the /chat endpoint with the prompt and templates
5. The backend processes the prompt and template with Gemini AI and returns generated code.
6. The frontend:
   • Parses the response
   • Splits it into steps
   • Updates the project file system
   • Executes corresponding shell commands in the terminal
7. The result is displayed in the live preview section.

Features added till now

• Natural language-based web app generation
• WebContainer based in-browser runtime
• Editable file system with real-time updates
• Live application preview
• Live terminal logs from the WebContainer