Detects and auto-injects Bootstrap CDN for cloned websites, preserving Bootstrap-based styles and components.
Detects and auto-injects Bulma CDN for cloned websites, preserving Bulma-based styles and components.
Generates a Next.js project structure for the cloned website, including pages and components.
Produces React components for each section of the cloned website.
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Perfect Web Clone IDE Clone https://stripe.com for me"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
An MCP server that brings pixel-perfect website cloning directly into your IDE.
Clone any website with one command. Get real code, not guesses.
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: Want to understand the full multi-agent architecture? Check out the original project. This IDE version brings that power directly into your coding workflow.
Related MCP server: WebClone MCP Server
Just type in your IDE:
Clone https://stripe.com for me帮我克隆 https://pixso.aiThe AI handles everything—crawling, code extraction, styling, and preview.
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
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 │
└─────────────────────────────────────────────────┘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 |
Python 3.9+
Claude Code CLI (npm install -g @anthropic-ai/claude-code)
Playwright (playwright install chromium)
# 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 chromiumAdd to ~/.claude/settings.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.
Clone https://example.comThe system will:
Crawl the webpage with Playwright
Extract HTML, CSS, JS, assets
Split into logical sections
Process each section in parallel
Assemble into React project
Preview in your browser
~/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 datacd ~/ClonedSites/example.com_20260129_123456/output
npm install && npm run dev┌──────────────────────────────────────────────────────────────┐
│ 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 │ │
│ └────────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘Tool | Description |
| Crawl and split webpage |
| List extracted sections |
| Process single section |
| Parallel processing |
| Assemble and preview |
| Session status |
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
Perfect-Web-Clone: Full multi-agent system with 40+ tools and web UI. See this to understand the complete architecture.
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request
MIT License - see LICENSE for details.
Perfect Web Clone IDE - Extract the real code, not guesses.
Made with ❤️ by Eric Shang
This server cannot be installed
Unclaimed servers have limited discoverability.
If you are the server author, to access and configure the admin panel.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
AI-powered browser automation — navigate, click, fill forms, and extract data from any website.
AI-powered design and management for Webflow Sites
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/ericshang98/Perfect-Web-Clone-IDE'
If you have feedback or need assistance with the MCP directory API, please join our Discord server