dittu — Claude Code MCP server: what it does, how to install
Clones any public website's frontend into Next.js or Astro components and verifies visual accuracy with pixel diffs.
claude mcp add dittu -- npx -y @manishtamang/dittuWhat dittu 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.
What it helps with
- 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 for the agent
- 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
How to install dittu
Platform CLI
claude mcp add dittu -- npx -y @manishtamang/dittuPlatform CLI
codex mcp add dittu -- npx -y @manishtamang/dittuConfig file
{
"mcpServers": {
"dittu": {
"command": "npx",
"args": [
"-y",
"@manishtamang/dittu"
]
}
}
}Config file
{
"servers": {
"dittu": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@manishtamang/dittu"
]
}
}
}Platform CLI
gemini mcp add dittu npx -y @manishtamang/dittuStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about dittu
How do I install dittu in Claude Code?
Run claude mcp add dittu -- npx -y @manishtamang/dittu in your terminal. You can check your machine prerequisites first with npx @manishtamang/dittu doctor.
Does dittu replicate backend logic or databases?
No. It extracts only rendered client DOM nodes, styles, and assets. Authentication, server handlers, and data fetching logic must be written separately.
Why do sliders and dropdown menus stop functioning?
dittu halts timers during page serialization to capture clean styling. The visual layout is kept intact, but client-side JavaScript behaviors like carousel pagination are stripped.
