sncro.net

공식

AI 어시스턴트를 위한 실시간 브라우저 디버깅 — MCP를 통한 DOM, 콘솔, 네트워크.

GitHub

Sncro Net MCP(으)로 무엇을 할 수 있나요?

디버깅 세션 생성 — AI 어시스턴트에게 create_session을 호출하도록 요청하여 라이브 브라우저 탭을 릴레이에 연결할 수 있습니다.
현재 페이지 검사 — get_page_snapshot을 사용하여 연결된 브라우저 탭의 전체 DOM 스냅샷을 요청합니다.
특정 요소 쿼리 — 어시스턴트에게 query_element를 통해 DOM 요소에 대한 세부 정보를 검색하도록 요청합니다.
콘솔 출력 캡처 — 어시스턴트가 브라우저에서 agent.js가 푸시한 콘솔 로그와 오류를 표시하도록 합니다.
sncro를 FastAPI 또는 Flask 앱에 통합 — 제공된 미들웨어를 추가하여 로컬 개발 서버가 agent.js를 자동으로 주입하도록 합니다.

문서

sncro-relay

sncro의 오픈소스 구성 요소 — AI 코딩 도우미가 라이브 브라우저를 검사할 수 있게 해주는 MCP 릴레이, 브라우저 측 에이전트, 프레임워크 플러그인입니다.

이 저장소의 내용

경로	설명
`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) │
                                                       └─────────────┘

Claude가 create_session (MCP 도구)를 호출 → 릴레이가 9자리 세션 키 + URL 반환
사용자가 자신의 앱이 실행 중인 브라우저에서 URL 방문 → "sncro 디버깅을 허용하시겠습니까?" 확인
플러그인이 쿠키를 설정하고, 해당 오리진의 이후 HTML 응답에 agent.js가 주입됨
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에 플러그인이 반드시 수행해야 할 작업(쿠키, 라우트, 보안 헤더)에 대한 전체 사양과 테스트 템플릿이 있습니다. Django, Rails, Express, Next.js, ASP.NET, Go — 모두 환영합니다.

버그 신고 및 보안 이슈: SECURITY.md를 참조하세요.

라이선스

MIT. LICENSE를 참조하세요.

sncro.net의 대시보드(프로젝트 관리, 결제, 관리자)는 별도의 독점 저장소에 있습니다.