DevTool MCP

agnt

AI コーディングエージェントにブラウザーのスーパーパワーを与えます。

agnt とは？

agnt は、AI 支援開発の時代に向けて設計された新しい種類のツールです。AI コーディングエージェントとブラウザーをつなぐ役割を果たし、バイブコーディング中にできることを広げます。

Claude Code、Cursor、その他の AI コーディングツールを使って作業に集中しているとき、agnt を使うとエージェントは次のことができます。

• あなたが見ているものを見る — スクリーンショット、DOM の検査、ビジュアルデバッグ
• あなたから直接情報を受け取る — ブラウザーからエージェントへメッセージを送信
• 一緒にアイデアを描く — UI 上に直接ワイヤーフレームを描画
• リアルタイムでデバッグする — エラー、ネットワークトラフィック、パフォーマンス指標を取得
• あらゆるデバイスでテストする — 完全な計測機能を備えたトンネルで、スマートフォンや BrowserStack に接続
• 思考できる範囲を広げる — 構造化データを使うことで、説明文よりもトークンを節約

デモ

ブラインド状態でのターミナル自動操作を3回繰り返しても、画面の半分が見切れたボタンは修正できません。ライブページを見ながらなら、一度の処理で修正できます — デモ全編（1:40）。

実行中のアプリにワイヤーフレームを直接描き、AI エージェントに送信できます

ビジョン：エージェントの機能を拡張する

従来の AI コーディングアシスタントは、ブラウザー内で起きていることを確認できません。コードは書けますが、次のことはできません。

• 変更による視覚的な結果を見る
• JavaScript エラーの発生を知る
• あなたが直面しているレイアウトの問題を理解する
• あなたが入力せずにフィードバックを受け取る

agnt はこれを変えます。 ブラウザーと AI エージェントの間に双方向の通信経路を作ります。

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   Your Browser  │ ←──► │      agnt       │ ←──► │   AI Agent      │
│                 │      │                 │      │                 │
│  - See changes  │      │  - Proxy traffic│      │  - Receives     │
│  - Send notes   │      │  - Capture errors│     │    context      │
│  - Draw sketches│      │  - Inject tools │      │  - Acts on      │
│  - Click to log │      │  - Route messages│     │    feedback     │
└─────────────────┘      └─────────────────┘      └─────────────────┘

クイックスタート

インストール

npm（推奨）：

npm install -g @standardbeagle/agnt

pip/uv：

pip install agnt
# or
uv pip install agnt

ソースから：

git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-local

MCP サーバーとして使用（Claude Code、Cursor など）

MCP の設定に追加します。

{
  "mcpServers": {
    "agnt": {
      "command": "agnt",
      "args": ["mcp"]
    }
  }
}

または、Claude Code プラグインとしてインストールします。

/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agnt

ワンショット：agnt skills — agnt エージェントスキルをインストールし、MCP サーバーを1つのコマンドで登録します。スキルの取得にはVercel のオープンスキル CLIを使用し、その後 MCP を設定します。

agnt skills                 # install for Claude Code + register the MCP server
agnt skills --agent cursor  # install the skills for a different agent

内部では npx -y skills add standardbeagle-tools/agnt --all -a claude-code を実行し、続いて claude mcp add agnt -s user -- agnt mcp を実行します（他のエージェントの場合は、追加する MCP 設定を表示します）。PATH 上に Node.js（npx）が必要です。

PTY ラッパーとして使用（強化されたターミナル）

AI ツールをラップして、オーバーレイ機能を利用します。

agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aider

これにより、ターミナルのオーバーレイメニュー（Ctrl+P）が追加され、ブラウザーからターミナルへのメッセージブリッジが有効になります。

初回セットアップ（新しいプロジェクトを自動設定）

.agnt.kdl がないプロジェクトで初めて agnt run claude を実行すると、コーディングセッションの前に agnt が一度限りのセットアップ実行を開始します。

cd my-new-project        # no .agnt.kdl yet
agnt run claude

ほとんどのプロジェクトでは、セットアップ段階に進むことはありません。agnt はまず決定的な自動設定を試み、プロジェクトの構成が明確な場合は .agnt.kdl を自動で書き込みます。標準で認識される構成は次のとおりです。

構成	識別マーカー	開発スクリプトとプロキシ
Node ウェブアプリ	package.json に dev／start スクリプトがある	そのスクリプトを実行し、URL 検出によってプロキシを設定
Go（Wails）	wails.json	wails dev
.NET ウェブプロジェクト	ルート、または src/*／*/ の下に Web SDK を使用する *.csproj がある	dotnet watch run（プロジェクトごとに実行し、ポートは launchSettings.json から取得）
docker-compose	compose.yaml／docker-compose.yml	docker compose up を実行し、ホストポートを公開するサービスごとにプロキシを設定
Procfile	Procfile.dev／Procfile	エントリーごとにスクリプトを実行し、web にプロキシを設定
Django	manage.py	python manage.py runserver（8000）
Rails	bin/rails	bin/dev または bin/rails server（3000）
Laravel	artisan	composer run dev または php artisan serve（8000）
Phoenix	:phoenix を含む mix.exs	mix phx.server（4000）
Hugo／Jekyll／mkdocs	hugo.toml と content/、_config.yml と Gemfile、mkdocs.yml	hugo server（1313）、bundle exec jekyll serve（4000）、mkdocs serve（8000）
静的サイト	ルートに index.html がある	標準ライブラリのファイルサーバー（8000）

検出結果は累積されます。たとえば、compose ファイルを含む .NET ソリューションでは、dotnet のテスト／ビルドに加えて compose のトポロジーが設定されます。Go、Node、Python、Ruby、PHP、Elixir、.NET のテスト、lint、ビルドコマンドは、必要に応じて実行するスクリプトとして登録されます。既知のポートは fallback-port として書き込まれるため、最初のリクエストの前からプロキシが利用できます。生成されたファイルは自由に編集できます。変更はすぐに反映されます。

自動設定で判断できない場合に限り、セットアップ段階が実行されます。

1. セットアップ段階 — Claude がセットアップモードで起動し、プロジェクトを設定します。使用する技術スタックを検出し、開発サーバーのスクリプトとリバースプロキシを登録して、.agnt.kdl を書き込みます。agnt:setup-project スキルがインストールされていない場合、Claude が正確なインストール手順（/plugin marketplace add standardbeagle/agnt、続けて /plugin install agnt）を案内します。
2. 再起動 — セットアップが終了すると、agnt は Claude を自動起動が有効な通常のコーディングセッションで再起動し、元の引数を引き継ぎます。開発サーバーとプロキシは自動的に起動します。

# Pass a task through — it's replayed verbatim into the relaunched session:
agnt run claude -- "add a /healthz endpoint"

セットアップを拒否した場合（.agnt.kdl が書き込まれなかった場合）、agnt はタイムスタンプ付きのマーカーを記録し、再通知期間が経過するまで再度案内しません（デフォルトは 7 日間で、.agnt.kdl の setup { renudge-ttl-days 7 } から変更できます）。セットアップが正常に完了すると、その状態は永続的に記録されます。

セットアップはほかのエージェントでも利用できます。各エージェントには、それぞれのスキル／コマンドの仕組みに合わせたインストール手順が表示されます（docs/agent-support-matrix.md を参照）。

agnt init — セッションを起動せずに設定

プロジェクトのセットアップだけを先に行いたい場合は、agnt init を実行してください。セットアップ段階のみを実行し（再起動は行わず）、.agnt.kdl が書き込まれると終了します。

agnt init            # configure with claude
agnt init gemini     # configure with a different agent

agnt init が正常に完了すると、永続的なマーカーも記録されるため、後で agnt run を実行したときは、そのままコーディングセッションに進みます。

チャネルモード（ベータ — Claude Code のみ）

ベータ／実験的機能：チャネルモードを利用するには、フォーク版の MCP SDK と Claude Code の開発用フラグが必要です。動作やスキーマは変更される場合があります。

Claude Code v2.1.80+ は、PTY ラッパーを使わずに、ブラウザーのエラー、診断情報、ユーザー操作をリアルタイムのプッシュイベントとしてコンテキスト内で受信できます。.agnt.kdl に channel { enabled true } を追加し、claude --dangerously-load-development-channels server:agnt を指定して起動してください。スキーマ全体、イベント形式、ブラウザーオーバーレイにメッセージを送信する channel_reply ツールについては、CLAUDE.md のチャネルモードのセクションを参照してください。

主な機能

1. ブラウザーの機能を拡張

プロキシを起動すると、エージェントがブラウザーの状況を把握できるようになります。

proxy {action: "start", id: "app", target_url: "http://localhost:3000"}

エージェントは次の操作ができるようになります。

// Take screenshots
proxy {action: "exec", id: "app", code: "__devtool.screenshot('current-state')"}

// Inspect any element
proxy {action: "exec", id: "app", code: "__devtool.inspect('#submit-button')"}

// Audit accessibility
proxy {action: "exec", id: "app", code: "__devtool.auditAccessibility()"}

// Check what the user clicked
proxy {action: "exec", id: "app", code: "__devtool.interactions.getLastClickContext()"}

2. フローティングインジケーター

プロキシ経由の各ページには、小さな虫のアイコンがフローティング表示されます。クリックすると、次の操作ができます。

• メッセージを送信して、AI エージェントに直接伝えます
• スクリーンショットを撮影して、特定の領域を共有します
• 要素を選択して、その詳細を記録します
• スケッチモードを開くと、ワイヤーフレームを作成できます

見えているものを説明するために、もう Alt キーを押しながらタブを切り替える必要はありません。クリックして送信するだけです。

3. スケッチモード

スケッチボタンを押すと、UI に直接描画できます。

• 長方形、円、矢印、フリーハンド描画
• ワイヤーフレーム要素：ボタン、入力欄、付箋
• ワンクリックで保存してエージェントに送信

「ここにボタンがほしい」や「このレイアウトは違う」といった内容を、一言も入力せずに伝えられます。

4. リアルタイムのエラーキャプチャ

JavaScript のエラーは自動的にキャプチャされ、エージェントが確認できます。

proxylog {proxy_id: "app", types: ["error"]}
→ {message: "TypeError: Cannot read property 'map' of undefined",
   stack: "at ProductList (products.js:42)",
   timestamp: "..."}

エージェントは、あなたがエラーを伝えるのを思い出したときではなく、エラーが発生した時点で確認できます。

5. 思考ウィンドウの拡張

構造化データは、自然言語による説明よりも少ないトークンで情報を伝えられます。

• エラーの要約 - proxylog {types: ["error"]}。 「42 行目で TypeError が発生していて、内容は……」と説明する代わりに使えます
• クリック時のコンテキスト - interactions.getLastClickContext()。 「ヘッダーの青いボタンをクリックしました……」と説明する代わりに使えます
• DOM の状態 - inspect('#element')。 「いくつかの入れ子になった span を含む div があって……」と説明する代わりに使えます
• 統合されたスタックトレース - 事前処理によって、React の冗長なエラー表示を実行可能な要約に変換します
• 一目でわかるステータス - エージェントが効率よく解析できる構造化 JSON

入れ子になった React エラーを 100 行分コンテキストに出力する代わりに、agnt は冗長な出力を簡潔で実行可能なデータに集約します。

6. 誰としてでもサインイン

.agnt.kdl でテストユーザーを宣言すると、agnt はプロキシ上に開発用 OIDC 発行者を用意します。インジケーターのペルソナチップ、ターミナルでの :as admin、またはエージェント用の devauth ツールから、一般ユーザーと管理者を切り替えられます。実際の IdP アカウントは必要ありません。

ループバック経由、tailnet 経由（bind "tailscale" を設定し、tailscale whois から ID を取得します。tailnet が証明書を発行している場合は、ノードの証明書を使って HTTPS で配信します）、およびオリジンで Access が検証される名前付き Cloudflare トンネル経由で動作します。開発用サインインと保護された共有をご覧ください。

MCP ツール

ツール	説明
detect	プロジェクトの種類と利用可能なスクリプトを自動検出します
run	スクリプトまたはコマンドを実行します（バックグラウンド／フォアグラウンド）
proc	プロセスを管理します：ステータス、出力、停止、一覧表示
proxy	リバースプロキシ：起動、停止、実行、ステータス
proxylog	ログを検索します：http、error、screenshot、sketch、panel_message
currentpage	アクティブなページセッションを、グループ化されたリソースとともに表示します
get_incidents	常時アクティブなインシデント受信箱から、正式な情報を取得します
responsive_audit	ビューポートサイズを変えてレスポンシブ監査を実行します（レイアウト／オーバーフロー／アクセシビリティ）
api_audit	API 効率性を監査します：ウォーターフォール、N+1、重複、過剰なリクエスト
loading_audit	読み込み UX を監査します：スピナーの連鎖と並行処理の分断
snapshot	ビジュアルリグレッション：ベースライン／スクリーンショットの比較
tunnel	トンネルを管理します：cloudflare／ngrok（公開）または tailscale（tailnet 内のみ）
devauth	開発用 OIDC ペルソナ：一覧表示、ブラウザーの切り替え、トークンの発行
verify_change	修正後に、セッションで記録された指摘事項を再確認します
daemon	バックグラウンドのデーモンサービスを管理します
watch	agnt monitor 経由でデーモンのイベントをストリーミングします
channel_reply	開発者のブラウザーオーバーレイにメッセージを送信します（チャンネルモードのみ）

ブラウザー API（50 以上の関数）

プロキシは、強力な診断機能を備えた window.__devtool を挿入します。

要素の検査

__devtool.inspect('#element')     // Full element analysis
__devtool.getPosition('#element') // Bounding box and position
__devtool.isVisible('#element')   // Visibility check

ビジュアルデバッグ

__devtool.highlight('.items')           // Highlight elements
__devtool.mutations.highlightRecent()   // Show recent DOM changes
__devtool.screenshot('name')            // Capture screenshot

アクセシビリティ

__devtool.auditAccessibility()    // Full a11y audit with score
__devtool.getContrast('#text')    // Color contrast check
__devtool.getTabOrder()           // Tab navigation order

インタラクション

__devtool.interactions.getLastClick()        // Last click details
__devtool.interactions.getLastClickContext() // Full click context
__devtool.selectElement()                    // Interactive picker

スケッチモード

__devtool.sketch.open()    // Enter sketch mode
__devtool.sketch.save()    // Save and send to agent
__devtool.sketch.toJSON()  // Export sketch data

レスポンシブモード

__devtool.responsive.open()       // Open the interactive width workbench
__devtool.responsive.setWidth(414) // Drive the frame to a width (320–1920)
__devtool.responsive.getState()    // Read current width + detected layout shifts

スコア付き監査

__devtool.auditAll()  // 8 weighted audits: dom, css, perf, security, seo,
                      // a11y, API efficiency, loading/spinner → overall grade

設定

プロジェクトのルートに .agnt.kdl を作成すると、スクリプトとプロキシを自動起動し、ブラウザー通知を設定できます。

// Scripts to run via daemon process manager
scripts {
    dev {
        run "npm run dev"           // Shell command (recommended)
        autostart true
        url-matchers "(Local|Network):\\s*{url}"
    }

    api {
        command "go"                // Or use command + args
        args "run" "./cmd/server"
        autostart true
        env {
            GIN_MODE "debug"
        }
        cwd "./backend"
    }
}

// Reverse proxies with traffic logging
proxies {
    frontend {
        script "dev"               // Link to script for URL auto-detection
    }

    backend {
        target "http://localhost:8080"
        autostart true
        max-log-size 2000
    }
}

// Browser notifications when AI responds
hooks {
    on-response {
        toast true                 // Show toast notification
        indicator true             // Flash bug indicator
        sound false                // Play notification sound
    }
}

// Toast appearance
toast {
    duration 4000
    position "bottom-right"        // top-right, top-left, bottom-right, bottom-left
    max-visible 3
}

Claude Code で /setup-project を実行すると、この設定を対話形式で生成できます。

フレームワーク固有の URL マッチャー：

フレームワーク	url-matchers
Next.js / Vite / React	"(Local|Network):\\s*{url}"
Wails	"DevServer URL:\\s*{url}"
Astro	"Local\\s+{url}"
Jekyll	"Server address:\\s*{url}"
Hugo	"Web Server.*available at {url}"

アーキテクチャ

agnt は、状態を永続化するためにデーモンアーキテクチャを採用しています。

┌─────────────────────┐       ┌─────────────────────────────────────┐
│  AI Agent           │       │              agnt                   │
│  (Claude Code, etc.)│◄─────►│                                     │
│                     │ MCP   │  ┌────────────────┐                 │
└─────────────────────┘       │  │  MCP Server    │                 │
                              │  └───────┬────────┘                 │
                              │          │ socket                   │
                              │          ▼                          │
┌─────────────────────┐       │  ┌────────────────────────────────┐ │
│  Browser            │◄──────┼──│        Daemon                  │ │
│                     │ proxy │  │  ProcessManager │ ProxyManager │ │
│  __devtool API      │       │  └────────────────────────────────┘ │
│  Floating Indicator │       └─────────────────────────────────────┘
│  Sketch Mode        │
└─────────────────────┘

主な設計上の決定：

• sync.Map とアトミック操作によるロックフリーの並行処理
• リングバッファによるメモリ使用量の制限
• クライアントが切断されても、プロセスとプロキシは動作を継続
• 依存関係のないフロントエンド JavaScript

ドキュメント

ドキュメント全文 →

# Run docs locally
cd docs-site
npm install && npm start

ユースケース

• バイブコーディング - エージェントがすべてを把握できる状態で、集中を保ちます
• ビジュアルデバッグ - 説明する代わりに、問題のある箇所をスケッチで示します
• モバイルテスト - Cloudflare/ngrok と BrowserStack の連携を利用して開発サーバーをトンネルし、実機でテストします
• アクセシビリティテスト - 開発中に a11y 監査を自動実行します
• エラー追跡 - ユーザーが遭遇する前にフロントエンドのエラーを検出します
• UI レビュー - ライブアプリ上でデザインに直接注釈を付けます
• リモートコラボレーション - エージェントとビジュアルコンテキストを共有します

要件

• Node.js 18+ または Go 1.24+
• MCP 対応の AI アシスタント

devtool-mcp からの移行

agnt は devtool-mcp の新しい名称です。既存のユーザーは次の手順を実行してください。

# npm
npm uninstall -g @standardbeagle/devtool-mcp
npm install -g @standardbeagle/agnt

# pip
pip uninstall devtool-mcp
pip install agnt

MCP 設定を更新し、["mcp"] args を指定して agnt コマンドを使用してください。

ライセンス

MIT

貢献

貢献を歓迎します！アーキテクチャの詳細については、ドキュメントをご覧ください。