sncro.net
resmiDebug 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_sessionsehingga 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.jsdari browser. - Integrasikan sncro ke dalam aplikasi FastAPI atau Flask — masukkan middleware yang disediakan sehingga server dev lokal Anda menyuntikkan
agent.jssecara 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
| Jalur | Isi |
|---|---|
relay/ | Aplikasi FastAPI yang mengekspos server MCP beserta endpoint long-poll untuk agent.js |
relay/static/agent.js | Skrip sisi peramban yang disuntikkan oleh middleware; mendorong data konsol + DOM ke relay |
middleware/sncro_middleware.py | Plugin FastAPI / Starlette — middleware siap pakai untuk aplikasi FastAPI |
middleware/sncro_flask.py | Plugin 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) │
└─────────────┘
- Claude memanggil
create_session(alat MCP) → relay mengembalikan kunci sesi 9 digit + URL - Pengguna mengunjungi URL di peramban tempat aplikasi mereka berjalan → mengonfirmasi melalui "Izinkan debugging sncro?"
- Plugin menempatkan cookie, agent.js disuntikkan ke respons HTML berikutnya pada origin tersebut
- 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.