Ditto

Dittoは、公開URLをNext.jsまたはViteのコンポーネント化コードに変換するオープンソースのWebサイトクローンツールです。自己ホスト、API、MCP対応。

概要

Dittoは、決定論的なオープンソースのWebサイトクローンツールです。公開URLを受け取り、クリーンでコンポーネント化されたコードベースへ変換します。ホームページとAPIの例では、出力先としてNext.jsとViteが示されています。

この製品は、白紙の状態ではなく、信頼できる出発点を求めるビルダー向けに位置づけられています。サイトでは、Dittoが忠実度を保ち、デザインシステムやその他のUI詳細を抽出でき、自己ホスト型ツール、ホスト型API、またはMCP接続エージェントワークフローとして使用できると説明されています。

主な機能

Webサイトからコードへのクローン

公開URLを受け取り、ページの単なるスクレイピングではなく、コンポーネント化されたコードとしてクローンしたサイトを生成します。

フレームワーク向け出力

Next.jsまたはViteプロジェクトとして出力を再構成し、編集して拡張できる実際のコードベースをユーザーに提供します。

決定論的パイプライン

決定論的と説明されており、サイトではLLMベースの推測との違いが明示されています。

UIとレイアウトの抽出

ホームページの説明に従って、デザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、ページセクションを抽出します。

コンポーネント化されたプロジェクト構成

繰り返しのDOMをコンポーネントに分割し、領域をセクションへまとめ、編集可能なセマンティックコンテンツとプロジェクトファイルを出力します。

複数の実行方法

自己ホスト型オープンソース、ホスト型REST API、エージェント向けMCPサーバーという3つのアクセスモードをサポートします。

実用的なユースケース

既存サイトから新規プロジェクトを立ち上げる
開発者は公開サイトのURLをDittoに送信し、Next.jsまたはViteでUIを再構築・拡張するための出発点となるコードベースを取得できます。
クローンパイプラインを自己ホストする
チームは、パイプラインを確認し、ワークフローを社内で完結させたいときに、オープンソースのクローンツールを自分たちのマシンやインフラ上で実行できます。
APIでWebサイトのクローンを自動化する
アプリケーションはホスト型REST APIを呼び出してクローンジョブをキューに入れ、進捗を監視し、ローカルでインフラを構築せずに完了したプロジェクトを取得できます。
エージェントワークフローにクローン機能を追加する
AIエージェントやビルダーループはMCPサーバーに接続し、反復的なワークフローの中で、対象URLをコードに変換するためのツールとしてDittoを使用できます。
生成されたコードベースを確認して調整する
デザイナーやエンジニアは、生成されたコンポーネント、セクション、コンテンツモデル、抽出されたトークンを、さらなる編集のための構造化された土台としてレビューできます。

Pros and Cons

Pros

オープンソースでMITライセンスのため、コードを確認して自己ホストできます。
決定論的アプローチは、クローン処理におけるLLMの推測を避けるものとして位置づけられています。
ローカルの自己ホスト、ホスト型REST APIアクセス、エージェント向けのMCPサーバー利用という複数のワークフローをサポートします。
出力は、コンポーネント、セクション、トークン、プロジェクトファイルを含む構造化された編集可能なものとして説明されています。
ホームページでは、生成された出力内のNext.js、Vite、Tailwind、TypeScriptの具体例が示されています。

Cons

収集された料金ページは404であり、提供された証拠からは料金やプランの詳細を確認できません。
ソースでは統合やワークフローの詳細が部分的にしか文書化されていないため、収集されたページからは一部のセットアップや出力の制限が見えません。

FAQ

Dittoは何をするものですか？

Dittoは、公開URLを受け取り、コンポーネント化されたコードベースを返すオープンソースのWebサイトクローンツールです。ソースでは、Next.jsまたはViteプロジェクトとして出力でき、自己ホスト型パイプライン、ホスト型REST API、またはMCPサーバー経由で使用できることが示されています。

Dittoはどのように使えますか？

サイトでは、3つの利用方法が示されています。MITライセンスのソースコードを使ってクローンツールを自己ホストする、api.ditto.site のホスト型REST APIにジョブを送信する、またはエージェントワークフロー向けにMCPサーバーへ接続する、という方法です。

どのような出力が生成されますか？

ホームページでは、Dittoはページをクリーンでコンポーネント化されたNext.jsまたはViteコードへ再構成できると説明されています。また、抽出されたデザインシステム、トークン、フォント、インタラクション、モーション、ブレークポイント、セクションについても言及しています。

Dittoは決定論的ですか？

ホームページでは、Dittoは決定論的であり、ページ構造を推測するためにLLMに依存しないと説明されています。製品ページでは、忠実度を保った出力と、バイト単位で安定したコピーも強調されています。

Dittoの料金はいくらですか？

収集された証拠では /pricing の料金ページが404だったため、提供されたスナップショットには確認済みの料金情報はありません。

Quick Facts

カテゴリ: 開発者向けツール
ソースドメイン: ditto.site
ライセンス: MIT
主な出力: コンポーネント化されたNext.jsまたはViteコード
アクセス方法: 自己ホスト、REST API、MCPサーバー
主なワークフロー: 公開URLを指定してクローンされたプロジェクトを生成