Skip to main content
Glama

sncro-relay

Componentes de código abierto de sncro: el relé MCP, el agente del lado del navegador y los complementos de framework que permiten a los asistentes de programación de IA inspeccionar un navegador en vivo.

Qué contiene este repositorio

Ruta

Qué es

relay/

Aplicación FastAPI que expone un servidor MCP además de endpoints de sondeo largo para agent.js

relay/static/agent.js

Script del lado del navegador inyectado por el middleware; envía datos de consola + DOM al relé

middleware/sncro_middleware.py

Complemento para FastAPI / Starlette: middleware de integración sencilla para aplicaciones FastAPI

middleware/sncro_flask.py

Complemento para Flask: middleware de integración sencilla para aplicaciones Flask

trysncro/

try.sncro.net: una aplicación de demostración deliberadamente rota para probar sncro de principio a fin

Related MCP server: agnt

Cómo funciona

 ┌──────────────┐    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 llama a create_session (herramienta MCP) → el relé devuelve una clave de sesión de 9 dígitos + URL

  2. El usuario visita la URL en el navegador donde se ejecuta su aplicación → confirma mediante "¿Permitir depuración de sncro?"

  3. El complemento coloca una cookie, agent.js se inyecta en las respuestas HTML posteriores en ese origen

  4. agent.js envía datos de referencia (consola, errores) y realiza sondeos largos para consultas bajo demanda (query_element, get_page_snapshot, etc.)

Uso de sncro

La mayoría de los usuarios no necesitan ejecutar el relé por sí mismos; la versión alojada en relay.sncro.net es compatible con el nivel gratuito. Registre su proyecto en sncro.net y obtenga su clave de proyecto.

FastAPI: coloque middleware/sncro_middleware.py en su proyecto, luego:

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: coloque middleware/sncro_flask.py en su proyecto, luego:

from sncro_flask import init_sncro

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

Ambos middlewares solo se activan en modo de depuración: cero sobrecarga en producción.

Contribución

Nos encantan los nuevos complementos de framework. CONTRIBUTING.md tiene la especificación completa de lo que debe hacer un complemento (cookies, rutas, encabezados de seguridad) además de la plantilla de prueba. Django, Rails, Express, Next.js, ASP.NET, Go: todos son bienvenidos.

Informes de errores y problemas de seguridad: consulte SECURITY.md.

Licencia

MIT. Consulte LICENSE.

El panel de control en sncro.net (gestión de proyectos, facturación, administración) reside en un repositorio propietario separado.

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