Domscribe
Domscribe · コーディング
Domscribeは、AIコーディングエージェントに実行中のフロントエンドを見る目を与えるオープンソースのフロントエンドデバッグツールだ。ひとつの役割のために作られたオープンソース開発ツールと考えればいい。その役割とは、コードが語ることとブラウザが実際に描画するものとの隔たりを埋めることだ。ブラウザとソースコードを双方向でつなぐ。DOM要素をクリックして変更内容を説明してもいいし、エージェントがソースファイルに問い合わせてライブのDOMスナップショット、コンポーネントのprops、状態を見てもいい。内部ではビルド時に作られたDOMからソースへの対応づけで動くので、すべての要素が正確なファイルと行を指し返す。任意のMCP対応エージェントと任意のバンドラーで動作し、MITライセンスで公開され、本番ビルドからは計測用のコードをすべて取り除く。有料プランはない。席数制限もない。
Domscribe について
Domscribeとは何か
Domscribeは、AI支援のフロントエンド作業のためのピクセルからコードへの橋渡しだ。コーディングエージェントはソースファイルを読めるが、ブラウザに実際に何が描画されるかは見えない。だからレイアウトやスタイル、コンポーネント構造を推測する。DomscribeはDOMとソースツリーの間に双方向のつながりを築き、この隔たりを埋める。
ツールはビルド時にAST解析を通じて決定的なdata-ds属性を注入する。各対応づけをマニフェストに記録する。実行時にはライブのprops、状態、DOMスナップショットを取得する。そしてエージェントは単純な問いを立てる。この行は何を描画するのか。解釈が必要なスクリーンショットではなく、実の答えが返ってくる。
最大の制約は範囲だ。Domscribeが現在対応するのはReact、Vue、Next.js、Nuxtで、他の構成向けにはカスタムアダプターがある。そのため未対応のスタックではフレームワーク固有の内部構造がきれいに対応づかない。エージェントがMCPを話すことも前提にしており、プレーンテキストのプロンプトしか受け付けないツールは対象外だ。
はじめ方
- パッケージをインストールし、プロジェクトのルートで
npx domscribe initを実行する。 - ビルドツール用のバンドラープラグイン（Vite 5-7、Webpack 5、Turbopack）を加え、ソースファイルに安定した
data-dsIDを注入する。 - Claude Code、GitHub Copilot、Cursor、GeminiなどMCP対応のエージェントをDomscribeのMCPエンドポイントに向ける。
- 開発サーバーを起動し、アプリを開き、任意の要素をクリックして平易な言葉で変更依頼を出す。
- エージェントにソースの位置を問い合わせさせ、編集を行わせ、ライブDOMと照らして結果を確認する。
AIツール情報
Domscribeの料金、対応プラットフォーム、性能を簡単に確認できます。
こんな人におすすめ
このツールが最も力を発揮するユーザー、タスク、シーン。
ユーザー
- フロントエンド開発者
- AIエージェントと組むフルスタックエンジニア
- すでにClaude CodeやCursorを使うチーム
タスク
- レイアウトとスタイルの不具合修正
- コンポーネントのpropsとスタイルの調整
- あるソース行が何を描画するかの確認
シーン
- 機能開発中の素早いUI反復
- 状態駆動の描画のデバッグ
- なじみのないコードベースへの参加
主な機能
ビルド時の安定ID
Domscribeはビルド中に各ソースファイルを解析し、xxhash64で決定的なdata-ds属性を注入し、すべての対応づけをマニフェストに記録する。これらのIDはホットモジュールリプレースメントとファストリフレッシュをまたいで安定し、大半のフロントエンド作業を定義する編集・保存・再読み込みのループを生き延びる。ファイルを編集した瞬間に壊れることはない。実行時の推測はない。どの要素がどれか、と悩むこともない。
DOMとソースの双方向リンク
このツールは双方向に働く。DOM要素をクリックして望む変更を説明すれば、Domscribeはエージェントが編集すべき正確なソース位置に解決する。あるいはソースファイルと行をエージェントに問い合わせさせ、いま何が描画されているかを見る。どちらの向きを使うかはタスク次第だ。どちらの側も相手について推測せずに済む。
深い実行時キャプチャ
生のHTMLを超えて、DomscribeはReactのfiber走査とVueのVNode検査を通じてライブのprops、状態、コンポーネントのメタデータを抽出する。エージェントは描画された要素の背後にある完全なコンポーネントの文脈を得る。マークアップだけではない。これは大きい。なぜその見た目なのかをエージェントが筋道立てて考えられるということだ。
REST層を備えたMCP対応
アノテーションはリポジトリ内の.domscribe/annotations/フォルダにJSONファイルとして置かれ、REST APIを通じて公開され、MCPサーバーがエージェントのアクセス用に包む。DomscribeはMCP経由で12のツールと4つのプロンプトを提供し、Claude Code、GitHub Copilot、Cursor、Gemini、Kiro、その他あらゆるMCPクライアントで動く。すべてローカルに留まり、外部依存はない。
個人情報のマスキング
メール、トークン、機微なパターンは、データがブラウザを出る前に自動で除去される。これは実効的な安全策だ。実ユーザーのデータを扱うアプリに取り組むチームにとって、ステージング環境で走らせられるツールかそうでないかの差になる。
本番への影響ゼロ
data-ds属性、オーバーレイスクリプト、リレー接続はすべて本番ビルドから取り除かれ、CIがそれを強制する。出荷するバンドルはクリーンなままだ。だからバンドルサイズを犠牲にすることも、計測用コードをエンドユーザーに晒すこともない。
メリットとデメリット
メリット
- MITライセンスの無料オープンソースで、有料プランも席数制限もない。
- DOM要素を正確なソース位置に対応づけるので、エージェントが誤ったファイルを編集しなくなる。
- ライブのpropsと状態を取得し、スクリーンショットでは与えられない文脈をエージェントに渡す。
- 対応リストの範囲内でフレームワークに依存せず、あらゆるMCPベースのエージェントと互換だ。
- 個人情報のマスキングと本番での除去により、機微なデータとバンドルサイズを抑えられる。
デメリット
- 対応フレームワーク（React、Vue、Next.js、Nuxt）かカスタムアダプターが必要で、未対応のスタックはきれいに対応づかない。
- MCP対応エージェントでのみ役立ち、プレーンプロンプトのツールでは使えない。
- 設定がバンドラー設定と開発サーバーに触れるため、何かをする前に一手間かかる。
よくある質問
実行中のフロントエンドとAIコーディングエージェントの間に橋を架ける。エージェントはDOM要素へのクリックに応じることも、ソース行に問い合わせてライブのDOM、props、状態を見ることもでき、完全な文脈で編集する。
関連コンテンツ
Domscribeに関連するツール、スキル、記事を探す。
Domscribeの代替ツール
Forefront
Forefront · コーディングForefrontはオープンソースAIで構築するためのウェブプラットフォームだ。主要なオープンソース言語モデルを自分のデータで微調整し、性能を評価し、API経由で実行したり、エクスポートして自分でホストしたりできる。クローズドなプラットフォームの手軽さを求めつつ、モデルとデータの所有権にはこだわる開発者が対象だ。
Startkit
StartKit.AI · コーディングStartkitは、AI SaaSとAIラッパー製品を作るためのボイラープレートだ。面倒な部分をあらかじめ配線済みにしたAIスタートアップボイラープレートと考えればいい。認証、StripeとLemon Squeezyの決済、利用制限、トランザクションメール、そしてOpenAI、Anthropic、Groq、Llamaと通信するAI APIスターターキットが含まれる。リポジトリをクローンして価格を設定し、ユーザーが実際にお金を払う部分に取りかかれる。ReactとTailwind上のNext.jsで作られているため、ボイラープレートコードの多くはすでに見慣れたものだ。
Testim
Tricentis · コーディングTestimは、Web・モバイル・Salesforceアプリ向けにエンドツーエンドテストを構築して実行するAIテスト自動化プラットフォームだ。機械学習を頼りに、インターフェースが変わってもテストを安定させ、チームが壊れたセレクターの修正に費やす時間を減らす。今日から使い始められる自動テストツールとしては悪くない。ブラウザで操作を録画してテストを作り、より細かい制御が必要なときはJavaScriptを足す。忙しいQAチームにとって堅実な選択肢である。