Sncro
About
Give your AI coding assistant live visibility into the user's browser. Claude sees the actual DOM, console errors, and network timing instead of guessing from screenshots. Drop-in middleware for FastAPI + Flask.
Details
- Author
- scottconfusedgorilla
- Downloads
- 282
- Categories
- Developer Tools, Other, Automation, AI
Jump to
- Lightweight MCP relay and framework plugin system
- Drop‑in middleware for FastAPI and Flask
- Debug‑only — zero code in production
- Free tier + hosted relay available
- Self‑host from MIT‑licensed source code
- Community PRs welcome for Django, Express, Next.js, Rails
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
SncroCommand (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
Integrate Sncro as drop-in middleware into your FastAPI or Flask application. Use the free hosted relay at relay.sncro.net, or self‑host from the MIT‑licensed source code.
create_session
Create a new sncro session. Returns a session key and secret. Args: project_key: The project key from CLAUDE.md (registered at sncro.net) git_user: The current git username (for guest access control). If omitted or empty, the call is treated as a guest session — allowed only when the project owner has "Allow guest access" enabled. brief: If True, skip the first-run briefing (tool list, tips, mobile notes) and return a compact response. Pass this on the second and subsequent create_session calls in the same conversation, once you already know how to use the tools. After calling this, tell the user to paste the enable_url in their browser. Then use the returned session_key and session_secret with all other sncro tools. If no project key is available: tell the user to go to https://www.sncro.net/projects to register their project and get a key. It takes 30 seconds — sign in with GitHub, click "+ Add project", enter the domain, and copy the project key into CLAUDE.md.
get_console_logs
Get recent console logs and errors from the browser. Returns the latest console output and any JavaScript errors, including unhandled exceptions and promise rejections. This reads from baseline data that the browser pushes every 5 seconds, so it works even if the browser tab is in the background. If you get a "no data" error, the browser hasn't connected yet — call check_session to diagnose, then retry.
query_element
Query a DOM element by CSS selector. Returns bounding rect, attributes, computed styles, inner text, and child count. Use this to debug layout, positioning, and visibility issues. Requires a connected browser session. If you get BROWSER_NOT_CONNECTED, call check_session first and wait for "connected" status. If you get BROWSER_TIMEOUT, the page may be navigating — wait a moment and retry. Args: key: The sncro session key secret: The session secret from create_session selector: CSS selector (e.g. "#photo-wrap", ".toolbar > button:first-child") styles: Optional list of CSS properties to read (e.g. ["transform", "width", "display"])
query_all
Query all matching DOM elements by CSS selector. Returns a summary of each matching element (tag, id, class, bounding rect, inner text). Useful for checking lists, grids, or multiple instances of a component. Requires a connected browser session. If you get BROWSER_NOT_CONNECTED, call check_session first and wait for "connected" status. Args: key: The sncro session key secret: The session secret from create_session selector: CSS selector limit: Max elements to return (default 20)
get_network_log
Get network performance data from the browser. Returns resource timing entries (URLs, durations, sizes) sorted by duration (slowest first), plus page navigation timing. Use this to find slow API calls, large assets, or overall page load performance. Requires a connected browser session. If you get BROWSER_NOT_CONNECTED, call check_session first and wait for "connected" status. Args: key: The sncro session key secret: The session secret from create_session limit: Max resources to return (default 50) type: Filter by initiator type (e.g. "fetch", "xmlhttprequest", "img", "script", "css")
get_js_value
Read a JavaScript value from the browser by property path. Walks a strict property path — NO expression evaluation, NO function calls, NO arbitrary code. Accepts identifiers, integer indices in brackets, and double-quoted string keys in brackets. Use this to read runtime state that isn't visible in the DOM: - Framework hydration: window.__NEXT_DATA__.props.pageProps - Redux/Zustand/etc stores (if exposed on window): window.__STORE__._currentState - Feature flags stashed on globals: window.APP.flags - Nested config: window["site-config"].features[0] EXPLORATION MODE: pass mode="keys" to get Object.keys() at the path instead of the value. Start with path="window" to discover globals, then drill in. This is how to find exposed state without guessing: get_js_value(path="window", mode="keys") -> ["document", "__NEXT_DATA__", "store", ...] get_js_value(path="window.store", mode="keys") -> ["_currentState", "subscribe", "dispatch", ...] get_js_value(path="window.store._currentState") -> the actual state object LIMITATIONS (intentional — security): - Cannot call functions. "store.getState()" fails. Expose the value as a readable property instead, e.g. window.__STORE__.state. - No arithmetic, comparisons, or expressions. - Path must start with an identifier and walk down via dots/brackets. Responses are cycle-safe, depth-capped, and size-capped. DOM nodes and React fiber trees are summarized rather than traversed. Args: key: Session key secret: Session secret from create_session path: Property path, e.g. "window.__NEXT_DATA__.props.pageProps" or 'window["site-config"].features[0]' or 'window.arr[0].name' mode: "value" (default) returns the serialized value; "keys" returns Object.keys() at the path max_depth: Max traversal depth when serializing (default 6, capped at 10) max_bytes: Max serialized size in bytes (default 20000, capped at 100000) Returns: {path, type, value, truncated, size_bytes} in value mode {path, mode, type, keys} in keys mode {error: "..."} on bad path / function / failure Requires a connected browser session and middleware v0.9.6+ (older middleware works — the relay doesn't care; the browser needs agent.js from relay.sncro.net which auto-updates).
get_page_snapshot
Get a high-level snapshot of the current page. Returns URL, title, viewport dimensions, scroll position, top-level DOM structure, recent console logs, and recent errors. Requires a connected browser session. If you get BROWSER_NOT_CONNECTED, call check_session first and wait for "connected" status.
check_session
Check the connection status of a sncro session. Call this after create_session to confirm the browser has connected before using other tools. If status is "waiting", the user hasn't enabled sncro yet — remind them to click/paste the enable URL, wait a few seconds, and call check_session again. Returns: status: "not_found" | "waiting" | "connected" session_age_seconds: how long since the session was created next_step: what to do based on current status
end_session
Explicitly close a sncro session — "Finished With Engines". Call this when you are done debugging and will not need the sncro tools again in this conversation. After this returns, all sncro tool calls on this key will refuse with a SESSION_CLOSED message — that is your signal to stop trying to use them and not apologise about it. Use it when: - The original problem is solved and the conversation has moved on - The user explicitly says "we're done with sncro for now" - You're entering a long stretch of work that won't need browser visibility The session can't be reopened. If you need browser visibility later, ask the user whether to start a new one with create_session.
get_feedback
Read incoming feedback for THIS session's project. Returns bug reports, feature requests, usability notes, and success stories that other Claude sessions (or the project owner) have submitted via report_issue, filtered to this session's project. Lets Claude review what's coming in without needing the admin dashboard. Scope is strictly "this session's project" — determined by the project_key used at create_session time and stored in the session. You cannot read another project's feedback with this tool. Args: key: Session key secret: Session secret from create_session category: Optional filter — "bug", "feature_request", "usability", "documentation", or "success_story". Empty = all categories. limit: Max rows to return (default 20, capped at 100). Returns: {project_key, count, feedback: [{id, category, description, git_user, created_at, shipped_in_build, published}, ...]} or {error: "..."} on bad auth / missing project.
report_issue
Report an issue, feature request, or success story for sncro. IMPORTANT: ALWAYS ask the user before submitting ANY feedback. Show them exactly what you plan to send and get explicit approval. Never submit feedback without the user's knowledge and consent. For ALL categories: - Draft the text and show it to the user BEFORE submitting - Wait for explicit approval — do NOT submit until they confirm - Keep descriptions GENERAL — no proprietary code, no internal project names, no sensitive data For SUCCESS STORIES (category: success_story): - These WILL be displayed publicly on sncro.net - Ask: "Mind if I share that as a sncro success story?" - Focus on what sncro did, not what the project is Args: project_key: The project key from CLAUDE.md category: One of: bug, feature_request, usability, documentation, success_story description: Clear description of the issue, suggestion, or success story git_user: Your git username
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"sncro": {
"sncro": {
"type": "http",
"url": "https://relay.sncro.net/tools/mcp"
}
}
}
}McpServers
{
"sncro": {
"type": "http",
"url": "https://relay.sncro.net/tools/mcp"
}
}- Create a debugging session— ask your AI assistant to callcreate_sessionso you can connect a live browser tab to the relay.
- Inspect the current page— request a full DOM snapshot of the connected browser tab usingget_page_snapshot.
- Query a specific element— ask the assistant to retrieve details about a DOM element viaquery_element.
- Capture console output— have the assistant surface console logs and errors that agent.js pushed from the browser.
- Integrate sncro into a FastAPI or Flask app— drop in the provided middleware so your local dev server injects agent.js automatically.
Open-source components ofsncro— the MCP relay, the browser-side agent, and the framework plugins that let AI coding assistants inspect a live browser.
Most users don't need to run the relay yourself — the hosted version atrelay.sncro.netis free-tier friendly. Register your project atsncro.netand grab your project key.
FastAPI:dropmiddleware/sncro_middleware.pyinto your project, then:
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:dropmiddleware/sncro_flask.pyinto your project, then:
from sncro_flask import init_sncro app = Flask(__name__) if app.debug: init_sncro(app, relay_url="https://relay.sncro.net")
Both middlewares only activate in debug mode — zero overhead in production.
Bug reports and security issues: seeSECURITY.md.
The dashboard atsncro.net(project management, billing, admin) lives in a separate proprietary repo.
This is a web browser that enables your coding agent, such as Claude Code, to visit websites on your behalf and assist you in identifying bugs or creating UI test cases.
Debug web applications by connecting to Chrome's developer tools via the Chrome DevTools Protocol.
Model Context Protocol server for Firefox DevTools - enables AI assistants to inspect and control Firefox browser through the Remote Debugging Protocol
Official Chrome DevTools MCP server for controlling and inspecting a live Chrome browser from coding agents such as Gemini, Claude, Cursor, and Copilot.
A Playwright-based MCP server that exposes a live browser as a traceable, inspectable, debuggable and controllable execution environment for AI agents.
An MCP server for AI-assisted frontend development using Chrome DevTools. Requires Google Chrome.
Chrome DevTools Session MCP is a paid remote MCP endpoint for AI agent browser DevTools MCP. It exposes structured JSON tools, a public server card, token-based access, usage receipts, and a
AppContext gives your AI coding agent instant visual insight into what you're developing, so it can fix issues, refine UI, and accelerate your development workflow in real time.
About MCP server for native computer use and browser automation.
Browser automation via MCP for Chrome and Firefox
Bring the full power of BrowserStack’s Test Platform to your AI tools, making testing faster and easier for every developer and tester on your team.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
