sncro.net

resmi

Debug browser langsung untuk asisten AI — DOM, konsol, jaringan melalui MCP.

Apa yang bisa Anda lakukan dengan Sncro Net MCP?

  • Buat sesi debugging — minta asisten AI Anda untuk memanggil create_session sehingga Anda dapat menghubungkan tab browser langsung ke relay.
  • Periksa halaman saat ini — minta snapshot DOM lengkap dari tab browser yang terhubung menggunakan get_page_snapshot.
  • Kueri elemen tertentu — minta asisten untuk mengambil detail tentang elemen DOM melalui query_element.
  • Tangkap output konsol — minta asisten untuk menampilkan log dan error konsol yang dikirim oleh agent.js dari browser.
  • Integrasikan sncro ke dalam aplikasi FastAPI atau Flask — masukkan middleware yang disediakan sehingga server dev lokal Anda menyuntikkan agent.js secara otomatis.

Dokumentasi

sncro-relay

Komponen sumber terbuka dari sncro — relay MCP, agen sisi peramban, dan plugin kerangka kerja yang memungkinkan asisten pengkodean AI memeriksa peramban langsung.

Isi repositori ini

JalurIsi
relay/Aplikasi FastAPI yang mengekspos server MCP beserta endpoint long-poll untuk agent.js
relay/static/agent.jsSkrip sisi peramban yang disuntikkan oleh middleware; mendorong data konsol + DOM ke relay
middleware/sncro_middleware.pyPlugin FastAPI / Starlette — middleware siap pakai untuk aplikasi FastAPI
middleware/sncro_flask.pyPlugin Flask — middleware siap pakai untuk aplikasi Flask
trysncro/try.sncro.net — aplikasi demo yang sengaja dirusak untuk menguji sncro secara end-to-end

Cara kerjanya

 ┌──────────────┐    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 memanggil create_session (alat MCP) → relay mengembalikan kunci sesi 9 digit + URL
  2. Pengguna mengunjungi URL di peramban tempat aplikasi mereka berjalan → mengonfirmasi melalui "Izinkan debugging sncro?"
  3. Plugin menempatkan cookie, agent.js disuntikkan ke respons HTML berikutnya pada origin tersebut
  4. agent.js mendorong data dasar (konsol, kesalahan) dan melakukan long-poll untuk kueri sesuai permintaan (query_element, get_page_snapshot, dll.)

Menggunakan sncro

Sebagian besar pengguna tidak perlu menjalankan relay sendiri — versi yang dihosting di relay.sncro.net ramah untuk tingkat gratis. Daftarkan proyek Anda di sncro.net dan ambil kunci proyek Anda.

FastAPI: letakkan middleware/sncro_middleware.py ke dalam proyek Anda, lalu:

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: letakkan middleware/sncro_flask.py ke dalam proyek Anda, lalu:

from sncro_flask import init_sncro

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

Kedua middleware hanya aktif dalam mode debug — tanpa overhead di produksi.

Berkontribusi

Kami menyukai plugin kerangka kerja baru. CONTRIBUTING.md memiliki spesifikasi lengkap tentang apa yang harus dilakukan plugin — cookie, rute, header keamanan — beserta templat pengujian. Django, Rails, Express, Next.js, ASP.NET, Go — semuanya diterima.

Laporan bug dan masalah keamanan: lihat SECURITY.md.

Lisensi

MIT. Lihat LICENSE.

Dasbor di sncro.net (manajemen proyek, penagihan, admin) berada di repositori proprietary terpisah.