dittu
Clone any website's frontend into Next.js or Astro and verify it with pixel diffs.
Install
Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).
@manishtamang/dittuclaude mcp add dittu -- npx -y @manishtamang/dittu@0.2.0 mcp{
"mcpServers": {
"dittu": {
"command": "npx",
"args": [
"-y",
"@manishtamang/dittu@0.2.0",
"mcp"
]
}
}
}Documentation
From the project's README on GitHub, refreshed weekly. Links open on GitHub.
Contents
dittu: Clone Any Website
Turn any website into an editable Next.js or Astro project, verified pixel by pixel.
Layout, CSS, fonts, images and scroll animations. Not the backend. One CLI, one MCP server, and skills for your coding agent.
Quick start · How it works · Benchmarks · Docs
$ dittu clone https://dub.co/home --build
› Capturing https://dub.co/home
1,680,755 chars of markup, 6 stylesheets, 33 animations, 13 JS-responsive elements
✓ Static preview → dittu-out/dub.co/preview
✓ Next.js project → dittu-out/dub.co/next
✓ Astro project → dittu-out/dub.co/astro
Visual match (1 − differing pixels / total)
preview /home 1440px 99.95%
next /home 1440px 99.95%
astro /home 1440px 99.95%
preview /home 390px 99.89%
next /home 390px 99.89%
astro /home 390px 99.89%
✓ All checks ≥ 95% (lowest 99.89%)Quick start
Set up your agent
npx @manishtamang/dittu setupRegisters the dittu MCP server and installs the skills for every agent it
finds: Claude Code, Cursor, Gemini CLI, Codex. Check your machine first
with npx @manishtamang/dittu doctor (on Linux/WSL you may need
sudo npx playwright install-deps chromium).
Ask your agent
Clone https://example.com into Next.js and make the pricing cards a reusable component.
The agent calls clone_website, reads the scores, refactors the generated
components, and calls verify_clone to prove nothing visual changed.
Use the terminal
npx @manishtamang/dittu # interactive: banner, then pick URL, frameworks, pages…
npx @manishtamang/dittu clone https://example.com -y # no questions: preview + Next.js + Astro, scored
npx @manishtamang/dittu clone https://example.com -p 5 --build # crawl 5 pages, build and score the apps
npx @manishtamang/dittu verify dittu-out/example.com --targets next
npx @manishtamang/dittu serve dittu-out/example.comUpdate dittu
npx @manishtamang/dittu@latest setupHow dittu works
Most cloners screenshot a page and ask an LLM to redraw it. dittu copies what the browser actually rendered, then checks the result:
- Capture: Chromium loads the page, scrolls it so lazy content and scroll reveals fire, then freezes JS timers so carousels hold still. A second render at 390 px records layout that JS computes per viewport.
- Serialize the live DOM, not the server HTML. Next.js/React sites come out as their final markup without hydration scripts or RSC payloads. Nesting the HTML parser would restructure gets repaired, so React hydrates cleanly.
- Keep the original CSS in cascade order, including CSS-in-JS rules that exist only in the CSSOM. Media queries, hover states and keyframes keep working.
- Download every asset from the same session and rewrite URLs.
- Export to a static preview, a Next.js App Router project (JSX) and an Astro project, split into section components.
- Replay motion: recorded scroll reveals, Framer Motion
animatecalls and loops run again through a 2 KB runtime. - Verify: screenshot original and clone the same way at desktop and mobile
and score them.
--buildscores the built apps, not just the preview.
Details: docs/architecture.md.
What you can clone
| Site type | Support |
|---|---|
| Marketing sites, landing pages, portfolios, docs | ✅ 99%+ typical |
| Next.js / React / Vue / Svelte / Astro builds | ✅ post-hydration DOM |
| Tailwind, CSS modules, styled-components, emotion | ✅ original CSS kept |
| Scroll reveals (AOS, Framer Motion, GSAP, IntersectionObserver) | ✅ recorded and replayed |
| Layout JS computes per viewport | ✅ mobile render → media-query overrides |
| Multi-page sites | ✅ --pages N, internal links rewired, shared header/footer components |
| Canvas / WebGL scenes | ⚠️ still image |
| Carousels, tabs, menus, forms | ⚠️ look is copied, behaviour is not |
| Pages behind login or bot protection | ❌ |
Benchmarks
| Site | Stack | Desktop | Mobile | Built apps |
|---|---|---|---|---|
| dub.co/home | Next.js, heavy animation | 99.95% | 99.89% | Next.js + Astro: same |
| nextjs.org | Next.js | 99.79% | 99.99% | 99.78–99.79% |
| ui.shadcn.com | Next.js + Tailwind | 100.00% | 100.00% | 100.00% |
| astro.build | Astro | 100.00% | 100.00% | |
| manishtamang.com (3 pages) | Next.js | 99.89–99.99% | 99.80–100% | same |
Methodology and limits: docs/fidelity.md.
FAQ
Does it copy the backend? No. Data fetching, auth, APIs and form handling are not copied. You get the frontend, ready to wire to your own logic.
Why is the generated JSX full of {" "}? Whitespace between inline elements
changes layout in HTML but is dropped by JSX. dittu keeps it explicit so the clone
renders identically. Refactor freely, and re-run verify to check.
Why plain CSS instead of Tailwind classes? The original stylesheet is the
only way to get 99%. A Tailwind conversion pass is on the roadmap,
guarded by verify.
Is the 95% score honest? It's raw pixel identity over the full page, including height differences, at desktop and mobile. Diff images are saved next to the scores so you can check.
Can I clone any site I want? Technically mostly yes. Legally, see the disclaimer.
Documentation
Disclaimer
dittu is for learning, prototyping, design references and migrating sites you own. Cloning a site doesn't give you rights to its brand, copy, images or code. Read DISCLAIMER.md.
Contributing
See CONTRIBUTING.md. Agents working in this repo: AGENTS.md.
License
Frequently asked questions
What is dittu?
Clone any website's frontend into Next.js or Astro and verify it with pixel diffs.
How do I install dittu?
It runs on your machine. In Claude Code: claude mcp add dittu -- npx -y @manishtamang/dittu@0.2.0 mcp. For other clients, paste the JSON configuration from this page into their MCP settings.
Does dittu need an API key?
Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.
Is dittu open source?
Yes. Its code is on GitHub under the MIT license.
Who maintains dittu?
It is published by Manish-Tamang. AI.tn lists it but does not maintain or endorse it.
From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.