dittu
The dittu MCP server lets an agent clone, verify, and inspect website frontends generated from live rendered pages.
Clone a website frontend via
clone_website: capture markup, original CSS, fonts, images, and scroll animations into a static preview plus Next.js and Astro projects.Crawl multiple pages with
pages(up to 50), and remove unwanted elements with CSS selectors viaremove.Choose output styling: keep original CSS by default or convert losslessly to Tailwind utilities with
styling: "tailwind".Build and score generated apps with
build: true, producing pixel-diff match scores at desktop and mobile widths.Verify an existing clone via
verify_clone, especially after refactoring generated components, acrosspreview,next, andastrotargets and custom widths.Read clone reports via
read_report: pages, targets, per-width scores, diff image paths, and worst regions.
Click on "Deploy 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., "@dittuClone https://example.com into Next.js and verify the visual match."
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.
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://gole.codes --build
› Capturing https://gole.codes
1,680,755 chars of markup, 6 stylesheets, 33 animations, 13 JS-responsive elements
✓ Static preview → dittu-out/gole.codes/preview
✓ Next.js project → dittu-out/gole.codes/next
✓ Astro project → dittu-out/gole.codes/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://gole.codes 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://gole.codes -y # no questions: preview + Next.js + Astro, scored
npx @manishtamang/dittu clone https://gole.codes -p 5 --build # crawl 5 pages, build and score the apps
npx @manishtamang/dittu clone https://gole.codes -s tailwind # Tailwind classes where lossless, rest stays CSS
npx @manishtamang/dittu verify dittu-out/gole.codes --targets next
npx @manishtamang/dittu serve dittu-out/gole.codesUpdate dittu
npx @manishtamang/dittu@latest setupRelated MCP server: PicassoWeb
How 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 | ✅ |
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 |
gole.codes | 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.
Can I get Tailwind classes instead of CSS? Yes: --styling tailwind. Every
rule that can be expressed exactly becomes Tailwind utilities (sites built with
Tailwind v4 keep their own classes); the rest stays CSS, so scores don't drop.
See Tailwind output.
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.
Related projects
ditto.site by ion-design takes the same capture-what-the-browser-rendered approach as a hosted API and MCP service. dittu differs by running as a local CLI, keeping the site's original CSS by default (Tailwind output is opt-in and only where it renders identically), exporting Astro alongside Next.js, and scoring every clone with pixel-diff verification.
Contributing
See CONTRIBUTING.md. Agents working in this repo: AGENTS.md.
License
Available Tools
3 toolsclone_websiteClone website frontendA
Clone a website's frontend (markup, original CSS, fonts, images, scroll animations) into a static preview plus Next.js and Astro projects, then score it against the original with pixel diffs at desktop and mobile widths. Takes ~1 minute per page (several minutes with build=true). Returns output paths and scores (percent identical).
| Name | Required | Description | Default |
|---|---|---|---|
| url | Yes | Page to clone, e.g. https://gole.codes | |
| build | No | Also npm install + build + score the generated apps (slow, default false) | |
| pages | No | Crawl up to n same-site pages (default 1) | |
| outDir | No | Output directory (default ./dittu-out/<host>) | |
| remove | No | CSS selectors to drop (cookie banners, chat widgets) | |
| verify | No | Score the clone against the original (default true) | |
| waitMs | No | Extra wait after load in ms | |
| styling | No | css keeps the original stylesheet (default); tailwind converts class rules to Tailwind utilities wherever that renders identically and keeps the rest as CSS | |
| frameworks | No | Projects to generate (default next + astro) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Beyond readOnlyHint=false and openWorldHint=true, the description discloses the main cost driver (per-page duration, slower with build=true) and the side effect of writing artifacts to an output location with returned paths and similarity scores. It does not say whether existing output directories are overwritten or what happens on partial failure, so it stops short of full transparency.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Two tightly packed sentences, front-loaded with what is cloned and generated, followed by timing and return values. Nearly every clause earns its place; the desktop/mobile width detail is the only bit that leans toward implementation trivia.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With nine parameters and no output schema, the description carries the return-value burden and does so ('Returns output paths and scores (percent identical)'). Combined with the full schema coverage and cost disclosure, an agent has enough to invoke it correctly; failure modes and overwrite behavior are the remaining gaps.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so every parameter is already documented, which sets the baseline at 3. The description adds modest context by tying throughput to page count and clarifying the desktop/mobile scoring widths, but contributes no new semantics for parameters like remove, waitMs, styling, or frameworks.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a concrete verb and resource ('Clone a website's frontend') and enumerates exactly what is captured (markup, CSS, fonts, images, scroll animations) and what is produced (static preview plus Next.js and Astro projects). It does not differentiate from siblings like verify_clone, and in fact overlaps with them by also scoring the clone, which slightly muddies which tool to pick.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
No explicit when-to-use or when-not-to-use guidance, and no mention of when to prefer verify_clone or read_report. The time estimate ('~1 minute per page (several minutes with build=true)') implies when the expensive path is worth it, but the agent must infer routing between siblings.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
read_reportRead clone reportBRead-only
Manifest and latest scores of a clone: pages, targets, per-width scores, diff image paths, worst regions.
| Name | Required | Description | Default |
|---|---|---|---|
| outDir | Yes | Output directory of a previous clone |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
readOnlyHint=true already establishes the safety profile, and the description adds real value by enumerating the returned payload (manifest, per-width scores, diff image paths, worst regions) — important because there is no output schema. However, it says nothing about failure behavior when outDir is missing or contains no report, so it only partly compensates.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
One dense sentence with no filler, and the most useful content (the return payload) is front-loaded. It is a grammatical fragment with no verb, which slightly weakens its standalone readability.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a single-parameter read tool with readOnlyHint and no output schema, the description covers what comes back, which is the main gap it needed to fill. It omits error/empty-report behavior and any hint that 'latest scores' may reflect a prior verify_clone run, leaving some agent-relevant context unstated.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
There is a single parameter with 100% schema description coverage ('Output directory of a previous clone'), so the baseline is 3. The description does not reference outDir or clarify path format/relative-vs-absolute semantics beyond what the schema states.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description names the resource (a clone's report) and enumerates its contents — pages, targets, per-width scores, diff image paths, worst regions — which is specific enough to separate it from clone_website and verify_clone, which perform actions rather than read a stored artifact. It stops short of an explicit verb ('returns/reads'), framing the purpose as a content list rather than an action.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
There is no statement of when to call this versus clone_website or verify_clone, and no prerequisite that a prior clone must exist (that constraint lives only in the outDir schema description). An agent must infer the usage context entirely from the tool name and sibling list.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
verify_cloneVerify a cloneA
Re-score an existing clone against the original site (e.g. after refactoring the generated components). Use targets ["next"] or ["astro"] to build and score a generated project. A score drop means the refactor changed rendering.
| Name | Required | Description | Default |
|---|---|---|---|
| outDir | Yes | Output directory of a previous clone | |
| widths | No | Viewport widths (default 1440, 390) | |
| targets | No | What to score (default preview) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
Annotations declare readOnlyHint=false and openWorldHint=true, and the description is consistent: 'build and score' signals a real build that writes output and hits the site. It also adds interpretive value by stating 'A score drop means the refactor changed rendering.' It omits practical traits such as cost/time or where results are stored.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
Three short sentences, front-loaded with the core action before the target guidance and the interpretation note. Slightly dense quoting of enum values ('["next"]' / '["astro"]') duplicates schema detail rather than earning its space.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
With no output schema, the description still covers purpose, use case, target meaning, and how to read results. The remaining gap is whether the run produces an artifact consumable by read_report, which an agent would want to know given that sibling.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema coverage is 100%, so the baseline is 3, but the description genuinely clarifies the vague 'targets' field by explaining that 'next'/'astro' build and score a generated project versus the default preview scoring. It says nothing about outDir or widths beyond the schema, so it is a modest but real addition.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
States a specific verb and resource ('Re-score an existing clone against the original site'), which cleanly separates it from the sibling that creates clones and the one that reads reports. The parenthetical use case ('after refactoring the generated components') further pins down intent.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
Gives a concrete trigger for using it ('after refactoring the generated components') and explains the targets choice for building a generated project. It does not explicitly name when not to use it or point at a sibling alternative, so it stops short of a 5.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
Tool Schema Changelog
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
1 tool update
v0.3.0- Changed
clone_website1 field changed- changed
Input schema / properties / url / descriptionPrevious value: -"Page to clone, e.g. https://example.com"New value: +"Page to clone, e.g. https://gole.codes"
1 tool update
v0.2.0- Changed
clone_website1 field changed- added
Input schema / properties / stylingAdded value: +{ + "description": "css keeps the original stylesheet (default); tailwind converts class rules to Tailwind utilities wherever that renders identically and keeps the rest as CSS", + "enum": [ + "css", + "tailwind" + ], + "type": "string" +}
3 tool updates
v0.1.0- First observed
clone_website - First observed
read_report - First observed
verify_clone
TDQS
Scored across 3 tools
clone_website and verify_clone both produce scores, which is a slight overlap, but the descriptions clearly separate creating a new clone from re-scoring an existing one. read_report is cleanly distinct as a read-only manifest lookup.
All three tools follow a consistent verb_noun snake_case pattern: clone_website, read_report, verify_clone. Predictable and easy to scan.
Three tools map precisely onto the create/read/verify workflow of a cloning service. Nothing feels padded and the scope is tight for a specialized pipeline.
The core lifecycle (create clone, inspect report, re-verify after refactor) is fully covered. Minor gaps exist around housekeeping, such as listing or deleting existing clones, but agents can work around these via paths.
Maintenance
Related MCP Connectors
Captured web interfaces, screenshots, flows and structured evidence for AI coding agents.
Website checker for AI coding agents. Measures your site in a real browser, with evidence.
Generate images, GIFs, videos, and PDFs from HTML, URLs, or templates — from your AI agent.
Turn any live website into brand colors, fonts, design tokens, SVGs, Lottie and paste-ready code.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables AI coding agents to visually interact with frontend apps by taking screenshots, clicking elements, reading console logs, and performing visual diffs.4 npm3MIT
- AlicenseAqualityAmaintenanceAnalyzes and extracts design tokens, assets, and layout from live websites to enable AI clients to faithfully replicate them, with tools for screenshotting, component inspection, and pixel-diff verification.146 npm4MIT
- AlicenseAqualityBmaintenanceEnables AI agents to capture screenshots, scrape structured page content, and run automated visual checks on live websites via a headless Chromium browser.3MIT
- AlicenseNot gradedqualityCmaintenanceEnables copying any component from a live web page as clean, self-contained HTML or JSX from inside a coding agent. Renders pages in a real browser to capture computed styles and resolved layout, with configurable styling formats and caching.0MIT