<div align="center">

# Perfect Web Clone IDE

### Pixel-Perfect Website Cloning for Your IDE

[English](#features) · [中文](docs/cn/README.md)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![Python 3.9+](https://img.shields.io/badge/Python-3.9+-blue.svg)](https://www.python.org/downloads/)
[![MCP](https://img.shields.io/badge/MCP-Compatible-green.svg)](https://modelcontextprotocol.io/)
[![Playwright](https://img.shields.io/badge/Playwright-1.40+-purple.svg)](https://playwright.dev/)

*An MCP server that brings pixel-perfect website cloning directly into your IDE.*

**Clone any website with one command. Get real code, not guesses.**

---

</div>

## Why This Tool?

| Screenshot-based Tools | Perfect Web Clone IDE |
|------------------------|----------------------|
| Guesses code from pixels | **Extracts real source code** |
| Approximate CSS | **Exact computed styles** |
| Broken responsive layouts | **Preserved responsiveness** |
| Lost animations | **@keyframes preserved** |
| Complex setup | **One config file** |

> **Inspired by [Perfect-Web-Clone](https://github.com/ericshang98/Perfect-Web-Clone)**: Want to understand the full multi-agent architecture? Check out the original project. This IDE version brings that power directly into your coding workflow.

---

## Features

### One-Command Cloning

Just type in your IDE:

```
Clone https://stripe.com for me
```

```
帮我克隆 https://pixso.ai
```

The AI handles everything—crawling, code extraction, styling, and preview.

### Pixel-Perfect Extraction

- **Real HTML Structure**: Not guessed from screenshots
- **Exact CSS**: Computed styles, variables, @keyframes
- **All Assets**: Images, fonts, videos, SVGs
- **Framework Detection**: Auto-injects Tailwind, Bootstrap, Bulma CDN

### Parallel Processing

Multiple workers process different sections simultaneously:

```
┌─────────────────────────────────────────────────┐
│  "Clone https://example.com"                    │
│                    ↓                            │
│    ┌─────────┐ ┌─────────┐ ┌─────────┐        │
│    │Worker 1 │ │Worker 2 │ │Worker 3 │  ...   │
│    │Section 0│ │Section 1│ │Section 2│        │
│    └────┬────┘ └────┬────┘ └────┬────┘        │
│         └──────────┼───────────┘              │
│                    ↓                            │
│           Assembled Project                     │
│           + Live Preview                        │
└─────────────────────────────────────────────────┘
```

### IDE Integration (MCP)

Works with any MCP-compatible IDE:

| IDE / Tool | Status |
|------------|--------|
| **Claude Code** | Native support |
| **Cursor** | Via MCP plugin |
| **VS Code + Continue** | Via MCP extension |
| **Any MCP Client** | Standard protocol |

---

## Getting Started

### Prerequisites

- Python 3.9+
- Claude Code CLI (`npm install -g @anthropic-ai/claude-code`)
- Playwright (`playwright install chromium`)

### Installation

```bash
# Clone the repository
git clone https://github.com/ericshang98/Perfect-Web-Clone-IDE.git
cd Perfect-Web-Clone-IDE

# Create virtual environment
python -m venv venv
source venv/bin/activate  # Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Install Playwright browser
playwright install chromium
```

### Configure MCP Server

Add to `~/.claude/settings.json`:

```json
{
  "mcpServers": {
    "web-clone": {
      "command": "/path/to/Perfect-Web-Clone-IDE/venv/bin/python",
      "args": ["-m", "cloner"],
      "cwd": "/path/to/Perfect-Web-Clone-IDE"
    }
  }
}
```

Restart your IDE to load the MCP server.

---

## Usage

### Clone a Website

```
Clone https://example.com
```

The system will:
1. **Crawl** the webpage with Playwright
2. **Extract** HTML, CSS, JS, assets
3. **Split** into logical sections
4. **Process** each section in parallel
5. **Assemble** into React project
6. **Preview** in your browser

### Output Structure

```
~/ClonedSites/example.com_20260129_123456/
├── output/
│   ├── preview.html          # Standalone preview
│   ├── src/
│   │   ├── app/
│   │   │   ├── page.tsx      # Next.js page
│   │   │   └── layout.tsx
│   │   └── components/
│   │       └── sections/     # React components
│   ├── package.json
│   └── tailwind.config.js
└── sections/                  # Raw extraction data
```

### Run Full Project

```bash
cd ~/ClonedSites/example.com_20260129_123456/output
npm install && npm run dev
```

---

## Architecture

```
┌──────────────────────────────────────────────────────────────┐
│                     MCP Server                               │
│                                                              │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ clone_webpage(url)                                      │ │
│  │   → Playwright: Full page crawl                         │ │
│  │   → Extract: CSS, JS, computed styles, @keyframes       │ │
│  │   → Detect: Tailwind / Bootstrap / Bulma               │ │
│  │   → Split: Semantic sections                            │ │
│  └────────────────────────────────────────────────────────┘ │
│                            ↓                                 │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ process_sections_batch()                                │ │
│  │                                                          │ │
│  │   ┌─────────┐ ┌─────────┐ ┌─────────┐                  │ │
│  │   │ Claude  │ │ Claude  │ │ Claude  │                  │ │
│  │   │ Worker  │ │ Worker  │ │ Worker  │  (Parallel)      │ │
│  │   └────┬────┘ └────┬────┘ └────┬────┘                  │ │
│  │        ↓           ↓           ↓                        │ │
│  │   Section0.jsx Section1.jsx Section2.jsx               │ │
│  └────────────────────────────────────────────────────────┘ │
│                            ↓                                 │
│  ┌────────────────────────────────────────────────────────┐ │
│  │ assemble_project()                                      │ │
│  │   → Combine components                                  │ │
│  │   → Generate Next.js structure                          │ │
│  │   → Start preview server                                │ │
│  │   → Open browser                                        │ │
│  └────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
```

---

## MCP Tools

| Tool | Description |
|------|-------------|
| `clone_webpage` | Crawl and split webpage |
| `get_sections` | List extracted sections |
| `process_section` | Process single section |
| `process_sections_batch` | Parallel processing |
| `assemble_project` | Assemble and preview |
| `get_status` | Session status |

---

## Limitations

- **Login-required pages**: Cannot clone authenticated pages
- **Heavy SPAs**: Complex client-side rendering may not extract fully
- **Dynamic content**: API-loaded content after page load may be missed

---

## Related Projects

- **[Perfect-Web-Clone](https://github.com/ericshang98/Perfect-Web-Clone)**: Full multi-agent system with 40+ tools and web UI. See this to understand the complete architecture.

---

## Star History

[![Star History Chart](https://api.star-history.com/svg?repos=ericshang98/Perfect-Web-Clone-IDE&type=Date)](https://star-history.com/#ericshang98/Perfect-Web-Clone-IDE&Date)

---

## Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

---

## License

MIT License - see [LICENSE](LICENSE) for details.

---

<div align="center">

**[Perfect Web Clone IDE](https://github.com/ericshang98/Perfect-Web-Clone-IDE)** - Extract the real code, not guesses.

Made with ❤️ by [Eric Shang](https://github.com/ericshang98)

</div>