3D Web Builder

An AI-powered website builder. Describe a website in natural language — the agent researches, plans, and generates a complete React + Tailwind website with optional 3D assets.

How it works

User prompt → Python Agent → /api/ai/generate → CodeGeneratorV2 → WebContainer → Live Preview

The Python agent acts as a creative director: it researches current trends, builds a creative brief, optionally generates 3D models (Meshy) and skyboxes (Blockade Labs), then drives the existing frontend pipeline to produce the website.

Project structure

3d-web-builder/
├── frontend/   # Next.js app — 3D editor, WebContainer, live preview
└── backend/    # Python agent — research, brief, asset generation

Setup

Prerequisites

• Node.js 18+
• Python 3.11+
• uv — curl -LsSf https://astral.sh/uv/install.sh | sh

Frontend

cd frontend
cp .env.example .env.local   # fill in your keys
npm install
npm run dev                   # http://localhost:3000

Backend

cd backend
cp .env.example .env          # fill in your keys
uv sync                       # installs all deps from uv.lock
uv run uvicorn api.server:app --reload   # http://localhost:8000

Environment variables

Backend (backend/.env)

Variable	Required	Description
GOOGLE_API_KEY	✅	Gemini API key — aistudio.google.com
SEARCH_API_KEY	✅	Tavily search — tavily.com
DEFAULT_MODEL	✅	gemini/gemini-3.1-pro-preview
FAST_MODEL	✅	gemini/gemini-3.1-flash-lite-preview
MESHY_API_KEY	⬜	3D model generation — meshy.ai
BLOCKADE_LABS_API_KEY	⬜	Skybox generation — blockadelabs.com
VERCEL_API_TOKEN	⬜	One-click deploy — vercel.com/account/tokens
FRONTEND_URL	✅	http://localhost:3000

Frontend (frontend/.env.local)

Variable	Required	Description
GOOGLE_GENERATIVE_AI_API_KEY	✅	Same value as GOOGLE_API_KEY
NEXT_PUBLIC_BACKEND_URL	✅	http://localhost:8000
MESHY_API_KEY	⬜	Same as backend
BLOCKADE_LABS_API_KEY	⬜	Same as backend
VERCEL_API_TOKEN	⬜	Same as backend

API

POST http://localhost:8000/build
{ "prompt": "photographer website with dark 3D animation", "session_id": "user1" }

→ { brief, files, assets, reasoning }

Tech stack

Frontend: Next.js, GSAP, WebContainers, Zustand, Tailwind, shadcn/ui

Backend: Python, FastAPI, LiteLLM, Gemini, Tavily, Meshy, Blockade Labs