Perfect Web Clone

Open Source Agent Co-work System

Claude Code for web cloning. A vertical AI agent with 40+ specialized tools.

English | 中文 | 日本語 | 한국어 | Español | Português | Deutsch | Français | Tiếng Việt

Don't want to self-host? Use the Perfect Web Clone Skill directly in Claude Code.

A true AI agent — not just a wrapper around an LLM. Multi-agent collaboration with real tools, self-correction loops, and a complete sandbox environment to build production-ready code from scratch.

Others guess from screenshots. We extract the real code — DOM, styles, components, interactions. Pixel-perfect cloning that screenshot-based tools simply cannot achieve.

https://github.com/user-attachments/assets/248af639-20d9-45a8-ad0a-660a04a17b68

Open Source Multi-Agent Architecture

This entire multi-agent system is open source. Learn from it, use it, build upon it.

Why Cowork?

Working with a single AI is like asking one coworker to handle everything alone — they get overwhelmed. Traditional single-model approaches hit a wall: - Context window overflow on large pages - Hallucinations when juggling too many responsibilities - Slow, sequential processing

Our solution: A team of specialized agents working together, like coworkers each focused on what they do best. Less back-and-forth, more getting things done.

Why Not Just Use Cursor / Claude Code / Copilot?

vs

We tried. Even with the complete extracted JSON — full DOM tree, all CSS rules, every asset URL — single-model tools struggle:

Challenge		Multi-Agent
50,000+ line DOM tree	❌ Context overflow, truncates critical parts	✅ Task distributed to worker agents
3,000+ CSS rules	❌ Loses specificity, misses variables	✅ Parallel processing by workers
Component detection	❌ Guesses boundaries, creates monoliths	✅ Structured workflow ensures consistency
Responsive breakpoints	❌ Often hardcodes single viewport	✅ Extracts all media queries
Hover/animation states	❌ Cannot see, cannot reproduce	✅ Browser automation captures all
Output quality	❌ "Close enough" approximation	✅ Pixel-perfect, production-ready

The core problem: A 200KB extracted JSON exceeds practical context limits. Even if it fits, a single agent can't maintain coherence when context gets polluted with too much information. The solution isn't smarter agents — it's task distribution with reliable workflows.

Honest limitation: Complex animations are still hard to extract perfectly — but that's a crawler problem, not an agent problem. The multi-agent architecture itself is capable of far more than web cloning. Imagine: automated refactoring, codebase migration, documentation generation, or any task too large for a single agent to handle.

The Agent + Tools + Sandbox Pattern

┌─────────────────────────────────────────────────────────┐
│                    Multi-Agent System                    │
├─────────────────────────────────────────────────────────┤
│                  ┌───────────────┐                      │
│                  │  Main Agent   │                      │
│                  │  (Coordinator)│                      │
│                  └───────┬───────┘                      │
│                          │ distributes tasks            │
│         ┌────────────────┼────────────────┐             │
│         ▼                ▼                ▼             │
│  ┌───────────┐    ┌───────────┐    ┌───────────┐       │
│  │  Worker   │    │  Worker   │    │  Worker   │  ...  │
│  │  Agent 1  │    │  Agent 2  │    │  Agent N  │       │
│  └─────┬─────┘    └─────┬─────┘    └─────┬─────┘       │
│        └────────────────┼────────────────┘              │
│                         ▼                               │
│  ┌─────────────────────────────────────────────────┐   │
│  │                    Tools                         │   │
│  │  • File Operations  • Code Analysis             │   │
│  │  • Browser Control  • API Calls                 │   │
│  └─────────────────────────────────────────────────┘   │
│                         │                               │
│                         ▼                               │
│  ┌─────────────────────────────────────────────────┐   │
│  │              Sandbox (BoxLite)                   │   │
│  │  Isolated execution environment for safe        │   │
│  │  code generation, testing, and preview          │   │
│  └─────────────────────────────────────────────────┘   │
└─────────────────────────────────────────────────────────┘

This pattern — Agent + Tools + Sandbox — is reusable for any AI agent product:

BoxLite: Hardware-level isolated micro-VMs for AI agents. No root access needed, runs OCI containers with true kernel isolation. → github.com/boxlite-ai/boxlite

Connect With Me

Building something with this architecture? Have questions? Reach out:

Table of Contents

• Open Source Multi-Agent Architecture
• Agent Toolkit
• Why Nexting?
• Features
• Demo
• Getting Started
• Architecture
• API Reference
• Tech Stack
• Contributing
• License

Agent Toolkit

Built on Claude Agent SDK — the same foundation as Claude Code. This isn't a chatbot with API calls; it's a real agent that thinks, plans, executes, and self-corrects in an isolated sandbox.

40+ Tools Across 10 Categories

Design Philosophy

┌─────────────────────────────────────────────────────────────────────────────┐
│                         Frontend (localhost:3100)                            │
│  ┌─────────────────┐   ┌─────────────────┐   ┌─────────────────────────┐   │
│  │   Chat Panel    │   │    Code IDE     │   │        Preview          │   │
│  │    (Agent)      │   │    (Monaco)     │   │       <iframe>          │   │
│  └────────┬────────┘   └────────┬────────┘   │  src="https://github.com/ericshang98/Perfect-Web-Clone/raw/main/localhost:8080"   │   │
│           │ Agent              │ User        └────────────┬────────────┘   │
│           │ writes code        │ writes code              │ loads directly │
│           └─────────┬──────────┘                          │                │
│                     ▼                                     │                │
│  ┌──────────────────────────────────────┐                 │                │
│  │           useBoxLite hook            │                 │                │
│  │  writeFile(path, content)            │                 │                │
│  │           ↓                          │                 │                │
│  │  sendMessage({                       │                 │                │
│  │    type: "write_file",               │                 │                │
│  │    payload: { path, content }        │                 │                │
│  │  })                                  │                 │                │
│  └──────────────────┬───────────────────┘                 │                │
└─────────────────────┼─────────────────────────────────────┼────────────────┘
                      │ WebSocket :5100                     │ HTTP :8080
                      ▼                                     │
┌─────────────────────────────────────────────────────────────────────────────┐
│                         Backend (localhost:5100)                             │
│  ┌──────────────────────────────────────┐                 │                │
│  │       BoxLiteSandboxManager          │                 │                │
│  │                                      │                 │                │
│  │  write_file(path, content):          │                 │                │
│  │           ↓                          │    File         │                │
│  │  Writes to disk:                     │    Watcher      │                │
│  │  /tmp/boxlite-sandboxes/             │        ↓        │                │
│  │    {sandbox_id}/                     │                 │                │
│  │      src/App.jsx                     │                 │                │
│  │      src/main.jsx                    │                 │                │
│  │      ...                             │                 │                │
│  └──────────────────┬───────────────────┘                 │                │
│                     │                                     │                │
│                     ▼                                     ▼                │
│  ┌──────────────────────────────────────────────────────────────────────┐  │
│  │                      Vite Dev Server (npm run dev)                    │  │
│  │  - Watches file changes                                              │  │
│  │  - Auto HMR (Hot Module Replacement)                       WebSocket │  │
│  │  - Port: 8080                                                  HMR ──┼──┘
│  └──────────────────────────────────────────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────────────────┘

What makes this different from ChatGPT/Claude chat? - Persistent state: Agent remembers context across the entire session - Tool chaining: Can execute 10+ tools in sequence without human intervention - Self-correction: Detects errors, diagnoses root cause, fixes automatically - *