dittu

Name: dittu
Author: Manish-Tamang

von Manish-TamangVersion 0.3.0i★ –iLäuft auf deinem Computer

Name in der Registryio.github.Manish-Tamang/dittu

Installieren

Überblick

Beschreibung vom Entwickler (englisches Original)

Clone any website's frontend into Next.js or Astro and verify it with pixel diffs.

Die drei Säulen von PopNx MCP

Diese drei werden nie zu einer Punktzahl zusammengefasst: Meinungen, Messungen und Beliebtheit sind verschiedene Dinge.

Stimmen der NutzeriNoch keine BewertungenBewertungen starten in einem späteren Schritt zusammen mit Benutzerkonten
Unsere Basischecksi1 von 1 bestandenAnhand öffentlicher Informationen geprüft; Code noch nicht gescannt
NutzungiGanz neu↓ 95/Wo. · ★ –

Was du damit machen kannst

Für diesen Server haben wir noch keine Zusammenfassung in einfacher Sprache geschrieben. Unten stehen die Fakten, die wir aus der Registry gelesen haben.

Verbindung: Läuft auf deinem Computer
Transport: stdio
Kategorie: Web & Browser

Installation

Wähle die KI-App, die du nutzt, und kopiere die Einstellungen.

Bevor du installierst

Basischecks: 1 von 1 bestanden
Läuft auf deinem Computer mit den Rechten deines Benutzerkontos (Dateien, Netzwerk, Apps).
Die Registry nennt keinen Schlüssel zum Eintragen.

Du brauchst

npmNode.js installiert (für den Befehl npx)

Welche App nutzt du?

ClaudeClaude CodeCursorVS CodeChatGPT

Wähle oben deine App. Wir merken sie uns, damit der Button beim nächsten Mal „In … installieren“ anzeigt.

Öffne Claude Desktop → Settings → Developer → Edit Config und füge dies in claude_desktop_config.json ein

{
  "mcpServers": {
    "dittu": {
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu",
        "mcp"
      ]
    }
  }
}

Führe das in deinem Terminal aus

claude mcp add dittu -- npx -y @manishtamang/dittu mcp

In Cursor öffnen

Oder kopier die Einstellungen selbst

In .cursor/mcp.json in deinem Projekt oder in ~/.cursor/mcp.json einfügen

{
  "mcpServers": {
    "dittu": {
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu",
        "mcp"
      ]
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

In VS Code öffnen

Oder kopier die Einstellungen selbst

In .vscode/mcp.json in deinem Projekt einfügen

{
  "servers": {
    "dittu": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@manishtamang/dittu",
        "mcp"
      ]
    }
  }
}

Dein Browser fragt, ob er die App öffnen darf, dann zeigt die App die Einstellungen und bittet dich um Bestätigung. Schlüsselwerte bleiben leer, damit du sie selbst einträgst.

Dieser Server läuft auf deinem Computer, und ChatGPT kann sich nur mit Servern im Internet verbinden. Wähle eine andere App.

Deine Auswahl bleibt in einem Cookie auf diesem Gerät; kein Konto nötig.

Diese Einstellungen werden aus dem Registry-Eintrag des Entwicklers erzeugt. Wenn in der README etwas anderes steht, folge der README.

Was er kann

Läuft auf deinem Computer; die Tool-Liste erscheint nach der Installation in deiner KI-App.

Basischecksi

Wir prüfen Informationen, die jeder sehen kann; den Code haben wir nicht gelesen. Checks, die nicht zutreffen, werden nicht mitgezählt. · Geprüft am 8. Nov. 2026

✓ Bestanden
Entwickler passt zum Repo
Der Registry-Name wurde mit dem GitHub-Konto Manish-Tamang bestätigt, dem das Repo gehört
… Noch nicht geprüft
Wird noch gepflegt
Dieses Repo haben wir noch nicht von GitHub gelesen
… Noch nicht geprüft
Hat eine Lizenz
Dieses Repo haben wir noch nicht von GitHub gelesen
– Nicht zutreffend
Endpunkt antwortet
Dieser Server läuft auf deinem Computer; es gibt keinen Endpunkt im Internet
– Nicht zutreffend
Anmeldung mit OAuth
Läuft auf deinem Computer und nutzt stattdessen lokale Einstellungen
… Noch nicht geprüft
Keine versteckten Anweisungen in Tool-Beschreibungen
Läuft auf deinem Computer; Tool-Listen können wir nur von Endpunkten im Internet lesen

Im Vergleich mit anderen in Web & Browseri

Mehr Sterne als 0 % der anderen 1383 Server in dieser Kategorie
Neuer in der Registry veröffentlicht als 76 % der anderen 1383 Server in dieser Kategorie
Basischecks gleich gut wie oder besser als bei 100 % der anderen 1383 Server in dieser Kategorie

Verglichen mit allen aktiven Servern dieser Kategorie in der Registry. Sterne zählen nur, wenn dem Herausgeber das Repo gehört.

Häufige Fragen

Ist dittu sicher?

Er hat 1 von 1 zutreffenden Basischecks bestanden. Den Code haben wir nicht gelesen. Bevor du einen Schlüssel oder Token hinzufügst, sieh nach, welche Zugriffe der Server verlangt, und nutze einen Schlüssel, der nur die Berechtigungen hat, die du brauchst.

Welche Schlüssel oder Codes braucht er?

Die Registry nennt keinen erforderlichen Schlüssel, manche Server bitten dich aber bei der ersten Nutzung, dich anzumelden.

Läuft er auf meinem Computer oder in der Cloud?

Er läuft auf deinem Computer. Deine KI-App startet ihn bei Bedarf, und die Daten laufen nicht über die Server des Entwicklers (außer der Server ruft selbst einen Onlinedienst auf).

Wird er noch gepflegt?

Das GitHub-Repo wurde zuletzt – geändert, und die neueste Version (0.3.0) kam vor 10 Tagen in die Registry.

Welche Apps können ihn nutzen?

Apps, die MCP unterstützen, etwa Claude Desktop, Claude Code, Cursor und VS Code. Außerdem brauchst du Node.js auf deinem Computer.

Was kann ich stattdessen nutzen?

In derselben Kategorie: Browser Use, Chrome DevTools MCP, MCP Server Browser

Alternativen

Server derselben Kategorie von anderen Entwicklern, sortiert nach Sternen.

So liest du eine Karte:↓ Downloads pro Wochei★ GitHub-SterneiDrei Säulen: Bewertungen · Checks · NutzungiAktualisiert = neueste Version in der Registry veröffentlichti

Browser Use

Browser agents and stealth cloud browsers for AI: run web tasks, fill forms, extract data.

von browser-useWeit verbreitet↓ 1,6 Mio./Wo.★ 120.087Aktualisiert vor 19 Tagen

Computer oder Cloud✓ browser-use.com

Installieren

Chrome DevTools MCP

MCP server for Chrome DevTools

von ChromeDevToolsWeit verbreitet↓ 1,9 Mio./Wo.★ 54.821Aktualisiert vor 17 Tagen

Läuft auf deinem Computer

Installieren

MCP Server Browser

MCP server for browser use access

von bytedanceWeit verbreitet↓ 792/Wo.★ 39.550Aktualisiert vor 14 Monaten

Läuft auf deinem Computer

Installieren

README vom Entwickler

README öffnen

Unverändert aus dem Repo des Entwicklers übernommen. PopNx MCP hat den Inhalt weder geprüft noch empfiehlt es ihn. HTML, Bilder und Skripte wurden entfernt. Links führen von dieser Website weg.

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 setup

Registers 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.codes

Update dittu

npx @manishtamang/dittu@latest setup

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 animate calls and loops run again through a 2 KB runtime.
Verify: screenshot original and clone the same way at desktop and mobile and score them. --build scores 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
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

Installation
CLI
MCP server
Architecture
Fidelity and benchmarks
Tailwind output
Testing
Roadmap

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

MIT

dittu

Überblick

Die drei Säulen von PopNx MCP

Was du damit machen kannst

Installation

Bevor du installierst

Was er kann

Basischecksi

Entwickler passt zum Repo

Wird noch gepflegt

Hat eine Lizenz

Endpunkt antwortet

Anmeldung mit OAuth

Keine versteckten Anweisungen in Tool-Beschreibungen

Im Vergleich mit anderen in Web & Browseri

Häufige Fragen

Alternativen

Browser Use

Chrome DevTools MCP

MCP Server Browser

README vom Entwickler

dittu: Clone Any Website

Quick start

Set up your agent

Ask your agent

Use the terminal

Update dittu

How dittu works

What you can clone

Benchmarks

FAQ

Documentation

Disclaimer

Related projects

Contributing

License