Sncro

sncro-relay

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

このリポジトリの内容

パス	内容
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) │
                                                       └─────────────┘

1. Claude が create_session（MCP ツール）を呼び出すと、リレーから9桁のセッションキーと URL が返されます
2. ユーザーがアプリを実行しているブラウザーで URL にアクセスし、「Allow sncro debugging?」で許可します
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 のダッシュボード（プロジェクト管理、請求、管理機能）は、別のプロプライエタリなリポジトリにあります。