sncro.net

公式

AIアシスタント向けのライブブラウザデバッグ — DOM、コンソール、

GitHub

Sncro Net MCPで何ができますか？

デバッグセッションを作成する — AIアシスタントに create_session を呼び出すよう依頼し、ライブブラウザタブをリレーに接続できるようにします。
現在のページを検査する — get_page_snapshot を使用して、接続されたブラウザタブの完全なDOMスナップショットを要求します。
特定の要素をクエリする — アシスタントに query_element を介してDOM要素の詳細を取得するよう依頼します。
コンソール出力をキャプチャする — アシスタントに、agent.js がブラウザからプッシュしたコンソールログとエラーを表示させます。
sncro を FastAPI または Flask アプリに統合する — 提供されたミドルウェアを追加して、ローカル開発サーバーが agent.js を自動的に注入するようにします。

ドキュメント

sncro-relay

sncro のオープンソースコンポーネント — AIコーディングアシスタントが稼働中のブラウザを検査できるようにする、MCPリレー、ブラウザ側エージェント、フレームワークプラグインです。

このリポジトリの内容

パス	内容
`relay/`	MCP サーバーと agent.js 向けロングポールエンドポイントを公開する FastAPI アプリ
`relay/static/agent.js`	ミドルウェアによって注入されるブラウザ側スクリプト。コンソールとDOMデータをリレーにプッシュします
`middleware/sncro_middleware.py`	FastAPI / Starlette プラグイン — FastAPI アプリ向けドロップインミドルウェア
`middleware/sncro_flask.py`	Flask プラグイン — Flask アプリ向けドロップインミドルウェア
`trysncro/`	`try.sncro.net` — sncro をエンドツーエンドでテストするための意図的に壊れたデモアプリ

仕組み

 ┌──────────────┐    MCP     ┌──────────┐   long-poll   ┌─────────────┐
 │ Claude Code  │──tools────▶│  relay   │◀──────────────│  agent.js   │
 │ (or other    │            │ (relay/) │   snapshots   │ (injected   │
 │  MCP client) │◀──results──│          │──────────────▶│  by plugin) │
 └──────────────┘            └──────────┘               └─────────────┘
                                                              ▲
                                                              │ same-origin
                                                              │ cookies
                                                       ┌─────────────┐
                                                       │  your app   │
                                                       │ (plugin is  │
                                                       │  installed) │
                                                       └─────────────┘

Claude が create_session (MCP ツール) を呼び出す → リレーが9桁のセッションキーとURLを返す
ユーザーがアプリの稼働しているブラウザでそのURLにアクセス → 「sncro デバッグを許可しますか？」で確認
プラグインが Cookie を設定し、以降の同一オリジンへの HTML レスポンスに agent.js が注入される
agent.js がベースラインデータ（コンソール、エラー）をプッシュし、オンデマンドクエリ（query_element、get_page_snapshot など）のためにロングポールする

sncro の利用

ほとんどのユーザーはリレーを自分で実行する必要はありません — relay.sncro.net のホスト版は無料枠で利用可能です。sncro.net でプロジェクトを登録し、プロジェクトキーを取得してください。

FastAPI: middleware/sncro_middleware.py をプロジェクトに配置し、次のようにします:

from middleware.sncro_middleware import SncroMiddleware, sncro_routes

app = FastAPI(debug=True)  # sncro only loads when debug=True
if app.debug:
    app.include_router(sncro_routes)
    app.add_middleware(SncroMiddleware, relay_url="https://relay.sncro.net")

Flask: middleware/sncro_flask.py をプロジェクトに配置し、次のようにします:

from sncro_flask import init_sncro

app = Flask(__name__)
if app.debug:
    init_sncro(app, relay_url="https://relay.sncro.net")

どちらのミドルウェアもデバッグモードでのみ有効化され、本番環境ではオーバーヘッドはゼロです。

コントリビューション

新しいフレームワークプラグインを歓迎します。CONTRIBUTING.md には、プラグインが満たすべき完全な仕様（Cookie、ルート、セキュリティヘッダー）とテストテンプレートが記載されています。Django、Rails、Express、Next.js、ASP.NET、Go — すべて歓迎します。

バグ報告とセキュリティ問題については SECURITY.md を参照してください。

ライセンス

MIT。LICENSE を参照してください。

sncro.net のダッシュボード（プロジェクト管理、課金、管理機能）は別のプロプライエタリリポジトリで管理されています。