Skip to main content
Glama

sncro-relay

Open-Source-Komponenten von sncro — das MCP-Relay, der browserseitige Agent und die Framework-Plugins, die es KI-Programmierassistenten ermöglichen, einen Live-Browser zu inspizieren.

Was dieses Repo enthält

Pfad

Was

relay/

FastAPI-App, die einen MCP-Server sowie Long-Poll-Endpunkte für agent.js bereitstellt

relay/static/agent.js

Browserseitiges Skript, das durch die Middleware injiziert wird; sendet Konsolen- und DOM-Daten an das Relay

middleware/sncro_middleware.py

FastAPI / Starlette-Plugin — Drop-in-Middleware für FastAPI-Apps

middleware/sncro_flask.py

Flask-Plugin — Drop-in-Middleware für Flask-Apps

trysncro/

try.sncro.net — eine absichtlich fehlerhafte Demo-App zum Testen von sncro von Anfang bis Ende

Related MCP server: agnt

Funktionsweise

 ┌──────────────┐    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 ruft create_session (MCP-Tool) auf → das Relay gibt einen 9-stelligen Sitzungsschlüssel + URL zurück

  2. Der Benutzer besucht die URL im Browser, in dem seine App läuft → bestätigt über "Allow sncro debugging?"

  3. Das Plugin setzt ein Cookie, agent.js wird in nachfolgende HTML-Antworten auf diesem Ursprung injiziert

  4. agent.js sendet Basisdaten (Konsole, Fehler) und führt Long-Polls für On-Demand-Abfragen (query_element, get_page_snapshot usw.) durch

Verwendung von sncro

Die meisten Benutzer müssen das Relay nicht selbst betreiben — die gehostete Version unter relay.sncro.net ist für das kostenlose Kontingent geeignet. Registrieren Sie Ihr Projekt unter sncro.net und holen Sie sich Ihren Projektschlüssel.

FastAPI: Legen Sie middleware/sncro_middleware.py in Ihr Projekt, dann:

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: Legen Sie middleware/sncro_flask.py in Ihr Projekt, dann:

from sncro_flask import init_sncro

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

Beide Middlewares werden nur im Debug-Modus aktiviert — kein Overhead in der Produktion.

Mitwirken

Wir freuen uns über neue Framework-Plugins. CONTRIBUTING.md enthält die vollständige Spezifikation dessen, was ein Plugin tun muss — Cookies, Routen, Sicherheits-Header — sowie die Testvorlage. Django, Rails, Express, Next.js, ASP.NET, Go — alle sind willkommen.

Fehlerberichte und Sicherheitsprobleme: siehe SECURITY.md.

Lizenz

MIT. Siehe LICENSE.

Das Dashboard unter sncro.net (Projektmanagement, Abrechnung, Admin) befindet sich in einem separaten proprietären Repo.

Related MCP Connectors

Related MCP Servers

  • A
    license
    Not graded
    quality
    D
    maintenance
    Enables AI assistants to debug frontend applications by providing direct access to browser DevTools, React state, DOM inspection, and runtime debugging capabilities. Bridges the gap between AI and complex web applications for autonomous debugging and issue resolution.
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    Bridges AI coding agents with the browser to provide visual debugging, real-time error capture, screenshot capabilities, DOM inspection, and interactive wireframing through a reverse proxy with injected developer tools.
    34 npm
    21
    Apache 2.0