Sncro
@scottconfusedgorilla
关于 Sncro
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.
基本信息
配置
使用下面的配置,将此服务器添加到你的 MCP 客户端。
{
"mcpServers": {
"sncro": {
"type": "http",
"url": "https://relay.sncro.net/tools/mcp"
}
}
}工具
11Create 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 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 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 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 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")
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 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 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
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.
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 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
概览
What is Sncro?
Sncro is a lightweight MCP relay and framework plugin system that lets AI coding assistants (Claude Code, Cursor, Copilot) inspect a live browser during development. It provides tools to query the DOM, read console logs, check network timing, or pull a page snapshot against your actual running app.
How to use Sncro?
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.
Key features of Sncro
- 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
Use cases of Sncro
- AI assistant inspects DOM elements during live development
- Read browser console logs without asking for screenshots
- Check network timing of resources in real time
- Pull a page snapshot while coding with Claude Code or Cursor
FAQ from Sncro
What does Sncro do that alternatives don’t?
Sncro works against your actual running app during development, so the AI can inspect the live browser state without you taking screenshots.
Which frameworks does Sncro support out of the box?
Drop‑in middleware is available for FastAPI and Flask. Support for Django, Express, Next.js, and Rails is planned via community contributions.
Is Sncro safe to use in production?
No—Sncro is debug‑only and designed to have zero code in production.
How do I host the relay myself?
The source code is MIT‑licensed; you can self‑host the relay from the provided repository.
Where does the data go when using the hosted relay?
Data is sent to relay.sncro.net under the free tier; details on data retention or privacy are not specified in the README.
AI 与智能体 分类下的更多 MCP 服务器
Model Context Protocol for Unreal Engine
chongdashuEnable AI assistant clients like Cursor, Windsurf and Claude Desktop to control Unreal Engine through natural language using the Model Context Protocol (MCP).
21st.dev Magic AI Agent
21st-devIt's like v0 but in your Cursor/WindSurf/Cline. 21st dev Magic MCP server for working with your frontend like Magic
Sequential Thinking Multi-Agent System (MAS)
FradSerAn advanced sequential thinking process using a Multi-Agent System (MAS) built with the Agno framework and served via MCP.
Just Prompt - A lightweight MCP server for LLM providers
dislerjust-prompt is an MCP server that provides a unified interface to top LLM providers (OpenAI, Anthropic, Google Gemini, Groq, DeepSeek, and Ollama)
Solon Ai
opensolonJava AI application development framework (supports LLM-tool,skill; RAG; MCP; Agent-ReAct,Team-Agent). Compatible with java8 ~ java25. It can also be embedded in SpringBoot, jFinal, Vert.x, Quarkus, and other frameworks.
评论