sncro.net MCP Server

公式

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

GitHub

ドキュメント

sncro-relay

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

このリポジトリの内容

パス内容
relay/MCP サーバーと agent.js 向けロングポールエンドポイントを公開する FastAPI アプリ
relay/static/agent.jsミドルウェアによって注入されるブラウザ側スクリプト。コンソールとDOMデータをリレーにプッシュします
middleware/sncro_middleware.pyFastAPI / Starlette プラグイン — FastAPI アプリ向けドロップインミドルウェア
middleware/sncro_flask.pyFlask プラグイン — 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) │
                                                       └─────────────┘
  1. Claude が create_session (MCP ツール) を呼び出す → リレーが9桁のセッションキーとURLを返す
  2. ユーザーがアプリの稼働しているブラウザでそのURLにアクセス → 「sncro デバッグを許可しますか？」で確認
  3. プラグインが Cookie を設定し、以降の同一オリジンへの HTML レスポンスに agent.js が注入される
  4. 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 のダッシュボード（プロジェクト管理、課金、管理機能）は別のプロプライエタリリポジトリで管理されています。