# dittu

Clones any public website's frontend into Next.js or Astro components and verifies visual accuracy with pixel diffs.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 42
- Author: Manish-Tamang
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/Manish-Tamang/dittu
- Updated: 2026-10-24
- HTML: https://affpapa.org/en/nevibecode/mcp/dittu

## What it does

Instead of guessing code from images, dittu launches Chromium, triggers scroll reveals by navigating the page, and extracts the post-hydration DOM. It preserves computed CSSOM rules, local assets, and keyframe animations before generating a clean Next.js App Router or Astro project broken down into section components.

Coding agents use tools like `clone_website` and `verify_clone` to pull pages, refactor the generated JSX, and immediately score visual fidelity across 1440px and 390px viewports. Eligible CSS rules can also be translated into Tailwind utility classes.

The tool targets client-side layout exclusively: backend endpoints, authentication flows, and form actions are not copied. Complex interactive widgets such as tabs or carousels retain their visual styling but lose dynamic scripts, and bot-protected pages cannot be processed. On Linux, Playwright Chromium system dependencies must be present before running captures.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add dittu -- npx -y @manishtamang/dittu
```

### Codex

**Platform CLI**
```bash
codex mcp add dittu -- npx -y @manishtamang/dittu
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "dittu": {
            "command": "npx",
            "args": [
                "-y",
                "@manishtamang/dittu"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "dittu": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@manishtamang/dittu"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add dittu npx -y @manishtamang/dittu
```

## When to use it
- replicate a web interface into a Next.js App Router directory
- convert landing page layouts into modular Astro components
- verify markup accuracy using desktop and mobile pixel comparison
- transform extracted page stylesheets into Tailwind CSS utilities

## Example prompts
- Clone https://example.com into Next.js and split the pricing section into a separate component
- Replicate https://example.com using Astro with Tailwind styling and run visual checks

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md