agnt
AIコーディングエージェントにブラウザのスーパーパワーを与えましょう。
👁 Go Version
👁 MCP
👁 npm
👁 PyPI
👁 License
agntとは？
agntは、AI支援開発時代のために設計された新しいツールです。AIコーディングエージェントとブラウザの間の架け橋として機能し、「バイブコーディング（vibe coding）」セッション中に可能なことを拡張します。
Claude Code、Cursor、その他のAIコーディングツールで作業しているとき、agntを使うとエージェントは以下のことが可能になります：
あなたの見ているものを見る - スクリーンショット、DOMインスペクション、視覚的なデバッグ
あなたから直接聞く - ブラウザからエージェントへメッセージを送信
アイデアを一緒にスケッチする - UI上に直接ワイヤーフレームを描画
リアルタイムでデバッグする - エラー、ネットワークトラフィック、パフォーマンスメトリクスのキャプチャ
あらゆるデバイスでテストする - 完全な計測機能を備えたスマートフォンやBrowserStackへのトンネリング
思考ウィンドウを拡張する - 構造化データを使用することで、説明文よりも少ないトークンで情報を伝達
デモ
実行中のアプリに直接ワイヤーフレームを描画し、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/agntpip/uv:
pip install agnt
# or
uv pip install agntソースから:
git clone https://github.com/standardbeagle/agnt.git
cd agnt
make build && make install-localMCPサーバーとして (Claude Code, Cursorなど)
MCP設定に追加します：
{
"mcpServers": {
"agnt": {
"command": "agnt",
"args": ["mcp"]
}
}
}または、Claude Codeプラグインとしてインストールします：
/plugin marketplace add standardbeagle/agnt
/plugin install agnt@agntPTYラッパーとして (拡張ターミナル)
オーバーレイ機能のためにAIツールをラップします：
agnt run claude --dangerously-skip-permissions
agnt run cursor
agnt run aiderこれにより、ターミナルオーバーレイメニュー (Ctrl+P) が追加され、ブラウザからターミナルへのメッセージブリッジが有効になります。
チャネルモード (ベータ版 — 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+Tabで切り替える必要はありません。クリックして送信するだけです。
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"]}vs. 「42行目でTypeErrorが出ていて...」クリックのコンテキスト -
interactions.getLastClickContext()vs. 「ヘッダーの青いボタンをクリックしたんだけど...」DOMの状態 -
inspect('#element')vs. 「ネストされたspanがあるdivがあって...」統合されたスタックトレース - Reactのエラーウォールを処理可能な要約に変換
ステータスの概要 - エージェントが効率的に解析できる構造化JSON
100行ものネストされたReactエラーをコンテキストに投げ込む代わりに、agntは冗長な出力を簡潔で実行可能なデータに統合します。
MCPツール
ツール | 説明 |
| プロジェクトタイプと利用可能なスクリプトを自動検出 |
| スクリプトまたはコマンドを実行 (バックグラウンド/フォアグラウンド) |
| プロセスの管理：ステータス、出力、停止、一覧 |
| リバースプロキシ：開始、停止、実行、ステータス |
| ログのクエリ：http, error, screenshot, sketch, panel_message |
| グループ化されたリソースを含むアクティブなページセッションを表示 |
| トンネル管理：モバイルテスト用のCloudflare/ngrok |
| バックグラウンドデーモンサービスの管理 |
| 開発者のブラウザオーバーレイにメッセージを送信 (チャネルモードのみ) |
ブラウザ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設定
プロジェクトルートに .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 |
| |
Astro |
| |
Jekyll |
| |
Hugo |
|
アーキテクチャ
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 agntMCP設定を更新し、["mcp"] 引数を指定して agnt コマンドを使用するようにしてください。
ライセンス
MIT
貢献
貢献を歓迎します！アーキテクチャの詳細については ドキュメント を参照してください。
This server cannot be installed
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Appeared in Searches
Latest Blog Posts
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/standardbeagle/agnt'
If you have feedback or need assistance with the MCP directory API, please join our Discord server