sncro
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 |
| FastAPI-App, die einen MCP-Server sowie Long-Poll-Endpunkte für agent.js bereitstellt |
| Browserseitiges Skript, das durch die Middleware injiziert wird; sendet Konsolen- und DOM-Daten an das Relay |
| FastAPI / Starlette-Plugin — Drop-in-Middleware für FastAPI-Apps |
| Flask-Plugin — Drop-in-Middleware für Flask-Apps |
|
|
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) │
└─────────────┘Claude ruft
create_session(MCP-Tool) auf → das Relay gibt einen 9-stelligen Sitzungsschlüssel + URL zurückDer Benutzer besucht die URL im Browser, in dem seine App läuft → bestätigt über "Allow sncro debugging?"
Das Plugin setzt ein Cookie, agent.js wird in nachfolgende HTML-Antworten auf diesem Ursprung injiziert
agent.js sendet Basisdaten (Konsole, Fehler) und führt Long-Polls für On-Demand-Abfragen (
query_element,get_page_snapshotusw.) 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.
This server cannot be deployed
Maintenance
Related MCP Connectors
Hosted browser for AI agents: screenshots, post-JS DOM, console, WCAG. No install, no API key.
Monitoring + status pages set up by talking to Claude. Auto-detects 30+ SDKs and your URLs.
AI visibility & recommendation monitoring for ChatGPT, Claude, Gemini & Perplexity.
Screenshot, PDF and HTML-to-image rendering API so Claude and Cursor can see any web page.
Related MCP Servers
- AlicenseNot gradedqualityDmaintenanceEnables 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
- AlicenseNot gradedqualityAmaintenanceBridges 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 npm21Apache 2.0
- FlicenseNot gradedqualityCmaintenanceGives AI coding assistants live, structured access to running apps' state and UI elements, enabling real-time verification and interaction across web, mobile, and desktop.36-
- AlicenseNot gradedqualityDmaintenanceEnables AI coding agents to visually interact with frontend apps by taking screenshots, clicking elements, reading console logs, and performing visual diffs.12 npm3MIT