deploy: Browser MCP — Playwright Chromium, 28 tools

Dockerfile

@@ -0,0 +1,18 @@
+FROM python:3.11-slim
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    wget ca-certificates curl \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+RUN playwright install --with-deps chromium
+
+WORKDIR /app
+COPY app.py .
+
+EXPOSE 7860
+CMD ["python3", "app.py"]

README.md

@@ -1,10 +1,23 @@
 ---
-title: Browser Mcp
-emoji: 👁
+title: Browser MCP
+emoji: 🌐
 colorFrom: blue
-colorTo: red
+colorTo: green
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Browser MCP — Playwright Chromium
+
+Full browser control via MCP SSE. Register in Claude:
+```
+https://kali-mcp-gateway.alena-rejdova.workers.dev/browser/sse
+```
+
+## Tools
+`navigate`, `screenshot`, `click`, `type_text`, `fill`, `select_option`, `hover`,
+`evaluate` (JS), `wait_for`, `scroll`, `get_text`, `get_html`, `get_links`,
+`find_elements`, `press_key`, `go_back`, `go_forward`, `reload`,
+`get_url`, `get_title`, `new_tab`, `switch_tab`, `close_tab`, `list_tabs`,
+`get_cookies`, `set_cookie`, `clear_cookies`

app.py

@@ -0,0 +1,434 @@
+#!/usr/bin/env python3
+"""Browser MCP — Playwright Chromium controlled via MCP SSE."""
+import asyncio, base64, json, os
+from typing import Optional
+
+import mcp.types as types
+from mcp.server import Server
+from mcp.server.sse import SseServerTransport
+from starlette.applications import Starlette
+from starlette.requests import Request
+from starlette.responses import Response
+from starlette.routing import Mount, Route
+import uvicorn
+from playwright.async_api import async_playwright, Browser, BrowserContext, Page
+
+mcp_server = Server("browser-mcp")
+sse = SseServerTransport("/messages/")
+
+
+class BrowserManager:
+    def __init__(self):
+        self.pw = None
+        self.browser: Optional[Browser] = None
+        self.context: Optional[BrowserContext] = None
+        self.tabs: list[Page] = []
+        self.current: int = 0
+        self.console_msgs: list[str] = []
+
+    async def init(self):
+        self.pw = await async_playwright().start()
+        self.browser = await self.pw.chromium.launch(
+            headless=True,
+            args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu",
+                  "--disable-setuid-sandbox", "--no-zygote"],
+        )
+        self.context = await self.browser.new_context(
+            viewport={"width": 1280, "height": 800},
+            user_agent=(
+                "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 "
+                "(KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36"
+            ),
+        )
+        page = await self.context.new_page()
+        page.on("console", lambda m: self.console_msgs.append(f"[{m.type}] {m.text}"))
+        self.tabs = [page]
+        self.current = 0
+
+    async def page(self) -> Page:
+        if not self.tabs:
+            await self.init()
+        return self.tabs[self.current]
+
+    async def new_tab(self, url: str = "about:blank") -> Page:
+        p = await self.context.new_page()
+        p.on("console", lambda m: self.console_msgs.append(f"[{m.type}] {m.text}"))
+        if url and url != "about:blank":
+            await p.goto(url, timeout=30000)
+        self.tabs.append(p)
+        self.current = len(self.tabs) - 1
+        return p
+
+
+bm = BrowserManager()
+
+
+def ok(t):
+    return [types.TextContent(type="text", text=str(t))]
+
+
+def img(data: bytes):
+    return [types.ImageContent(type="image", data=base64.b64encode(data).decode(), mimeType="image/png")]
+
+
+@mcp_server.list_tools()
+async def list_tools():
+    T = types.Tool
+    return [
+        T(name="navigate",
+          description="Navigate to a URL and wait for page to load.",
+          inputSchema={"type": "object", "properties": {
+              "url": {"type": "string"},
+              "wait_until": {"type": "string", "default": "load",
+                             "enum": ["load", "domcontentloaded", "networkidle"]}
+          }, "required": ["url"]}),
+        T(name="screenshot",
+          description="Take a screenshot of the current page or a specific element. Returns an image.",
+          inputSchema={"type": "object", "properties": {
+              "full_page": {"type": "boolean", "default": False},
+              "selector": {"type": "string", "description": "CSS selector to screenshot just that element"}
+          }, "required": []}),
+        T(name="get_text",
+          description="Get the visible text content of the page or a specific element.",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string", "default": "body"}
+          }, "required": []}),
+        T(name="get_html",
+          description="Get the HTML source of the page or element.",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string", "default": "html"},
+              "outer": {"type": "boolean", "default": True}
+          }, "required": []}),
+        T(name="click",
+          description="Click on an element identified by CSS selector.",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string"},
+              "button": {"type": "string", "default": "left", "enum": ["left", "right", "middle"]},
+              "count": {"type": "integer", "default": 1}
+          }, "required": ["selector"]}),
+        T(name="type_text",
+          description="Type text into an input element (appends by default).",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string"},
+              "text": {"type": "string"},
+              "clear": {"type": "boolean", "default": False, "description": "Clear field first"}
+          }, "required": ["selector", "text"]}),
+        T(name="fill",
+          description="Fill a form field (clears existing value first then sets new one).",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string"},
+              "value": {"type": "string"}
+          }, "required": ["selector", "value"]}),
+        T(name="select_option",
+          description="Select an option in a <select> dropdown element.",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string"},
+              "value": {"type": "string", "description": "Option value attribute"},
+              "label": {"type": "string", "description": "Option visible text"}
+          }, "required": ["selector"]}),
+        T(name="hover",
+          description="Move mouse over an element (triggers hover CSS/JS).",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string"}
+          }, "required": ["selector"]}),
+        T(name="press_key",
+          description="Press a keyboard key (e.g. Enter, Tab, Escape, ArrowDown, F5).",
+          inputSchema={"type": "object", "properties": {
+              "key": {"type": "string"},
+              "selector": {"type": "string", "description": "Focus this element first (optional)"}
+          }, "required": ["key"]}),
+        T(name="evaluate",
+          description="Execute JavaScript in the browser page and return the result.",
+          inputSchema={"type": "object", "properties": {
+              "script": {"type": "string", "description": "JS expression or function body"},
+              "arg": {"type": "string", "description": "JSON argument passed as first param to function"}
+          }, "required": ["script"]}),
+        T(name="wait_for",
+          description="Wait for an element to appear or for a set time.",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string", "description": "CSS selector to wait for"},
+              "ms": {"type": "integer", "description": "Milliseconds to wait"},
+              "state": {"type": "string", "default": "visible",
+                       "enum": ["attached", "detached", "visible", "hidden"]}
+          }, "required": []}),
+        T(name="scroll",
+          description="Scroll the page or scroll a specific element into view.",
+          inputSchema={"type": "object", "properties": {
+              "x": {"type": "integer", "default": 0},
+              "y": {"type": "integer", "default": 500},
+              "selector": {"type": "string", "description": "Scroll this element into view"}
+          }, "required": []}),
+        T(name="go_back",
+          description="Navigate back in browser history.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="go_forward",
+          description="Navigate forward in browser history.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="reload",
+          description="Reload the current page.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="get_url",
+          description="Get the current page URL.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="get_title",
+          description="Get the current page title.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="get_links",
+          description="Get all links on the current page (href + text).",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string", "default": "a"},
+              "limit": {"type": "integer", "default": 50}
+          }, "required": []}),
+        T(name="find_elements",
+          description="Find elements by CSS selector and return their text or a specific attribute.",
+          inputSchema={"type": "object", "properties": {
+              "selector": {"type": "string"},
+              "attribute": {"type": "string", "description": "Return this attribute (e.g. href, src, value)"}
+          }, "required": ["selector"]}),
+        T(name="new_tab",
+          description="Open a new browser tab, optionally navigating to a URL.",
+          inputSchema={"type": "object", "properties": {
+              "url": {"type": "string", "default": "about:blank"}
+          }, "required": []}),
+        T(name="switch_tab",
+          description="Switch to another open tab by its index number.",
+          inputSchema={"type": "object", "properties": {
+              "index": {"type": "integer"}
+          }, "required": ["index"]}),
+        T(name="close_tab",
+          description="Close the current tab. Cannot close the last remaining tab.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="list_tabs",
+          description="List all open browser tabs with their index, URL and title.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="get_cookies",
+          description="Get all cookies for the current browser context.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="set_cookie",
+          description="Set a cookie in the browser.",
+          inputSchema={"type": "object", "properties": {
+              "name": {"type": "string"},
+              "value": {"type": "string"},
+              "url": {"type": "string", "description": "URL for cookie scope (defaults to current page)"}
+          }, "required": ["name", "value"]}),
+        T(name="clear_cookies",
+          description="Clear all cookies from the browser context.",
+          inputSchema={"type": "object", "properties": {}, "required": []}),
+        T(name="get_console",
+          description="Get recent browser console log messages (errors, warnings, logs).",
+          inputSchema={"type": "object", "properties": {
+              "limit": {"type": "integer", "default": 50}
+          }, "required": []}),
+    ]
+
+
+@mcp_server.call_tool()
+async def call_tool(name: str, arguments: dict):
+    try:
+        p = await bm.page()
+
+        if name == "navigate":
+            resp = await p.goto(arguments["url"],
+                                wait_until=arguments.get("wait_until", "load"),
+                                timeout=30000)
+            status = resp.status if resp else "unknown"
+            return ok(f"Navigated → {p.url}  (HTTP {status})")
+
+        if name == "screenshot":
+            sel = arguments.get("selector")
+            full = arguments.get("full_page", False)
+            if sel:
+                el = await p.query_selector(sel)
+                if not el:
+                    return ok(f"Element not found: {sel}")
+                return img(await el.screenshot())
+            return img(await p.screenshot(full_page=full))
+
+        if name == "get_text":
+            sel = arguments.get("selector", "body")
+            el = await p.query_selector(sel)
+            return ok(await el.inner_text() if el else "Element not found")
+
+        if name == "get_html":
+            sel = arguments.get("selector", "html")
+            outer = arguments.get("outer", True)
+            el = await p.query_selector(sel)
+            if not el:
+                return ok("Element not found")
+            return ok(await el.outer_html() if outer else await el.inner_html())
+
+        if name == "click":
+            await p.click(arguments["selector"],
+                          button=arguments.get("button", "left"),
+                          click_count=arguments.get("count", 1))
+            return ok(f"Clicked {arguments['selector']}")
+
+        if name == "type_text":
+            if arguments.get("clear"):
+                await p.fill(arguments["selector"], "")
+            await p.locator(arguments["selector"]).type(arguments["text"])
+            return ok(f"Typed into {arguments['selector']}")
+
+        if name == "fill":
+            await p.fill(arguments["selector"], arguments["value"])
+            return ok(f"Filled {arguments['selector']}")
+
+        if name == "select_option":
+            sel = arguments["selector"]
+            if v := arguments.get("value"):
+                await p.select_option(sel, value=v)
+            elif l := arguments.get("label"):
+                await p.select_option(sel, label=l)
+            else:
+                return ok("Provide value or label")
+            return ok(f"Selected option in {sel}")
+
+        if name == "hover":
+            await p.hover(arguments["selector"])
+            return ok(f"Hovering over {arguments['selector']}")
+
+        if name == "press_key":
+            if sel := arguments.get("selector"):
+                el = await p.query_selector(sel)
+                if el:
+                    await el.press(arguments["key"])
+                    return ok(f"Pressed {arguments['key']} on {sel}")
+            await p.keyboard.press(arguments["key"])
+            return ok(f"Pressed {arguments['key']}")
+
+        if name == "evaluate":
+            arg_raw = arguments.get("arg")
+            arg = json.loads(arg_raw) if arg_raw else None
+            result = await p.evaluate(arguments["script"], arg)
+            return ok(json.dumps(result, ensure_ascii=False, default=str))
+
+        if name == "wait_for":
+            if sel := arguments.get("selector"):
+                await p.wait_for_selector(sel,
+                                          state=arguments.get("state", "visible"),
+                                          timeout=15000)
+                return ok(f"Element {sel} is {arguments.get('state', 'visible')}")
+            if ms := arguments.get("ms"):
+                await asyncio.sleep(ms / 1000)
+                return ok(f"Waited {ms} ms")
+            return ok("Provide selector or ms")
+
+        if name == "scroll":
+            if sel := arguments.get("selector"):
+                el = await p.query_selector(sel)
+                if el:
+                    await el.scroll_into_view_if_needed()
+                    return ok(f"Scrolled {sel} into view")
+            await p.evaluate(f"window.scrollBy({arguments.get('x', 0)}, {arguments.get('y', 500)})")
+            return ok(f"Scrolled by ({arguments.get('x',0)}, {arguments.get('y',500)})")
+
+        if name == "go_back":
+            await p.go_back(timeout=10000)
+            return ok(f"Back → {p.url}")
+
+        if name == "go_forward":
+            await p.go_forward(timeout=10000)
+            return ok(f"Forward → {p.url}")
+
+        if name == "reload":
+            await p.reload()
+            return ok(f"Reloaded → {p.url}")
+
+        if name == "get_url":
+            return ok(p.url)
+
+        if name == "get_title":
+            return ok(await p.title())
+
+        if name == "get_links":
+            limit = arguments.get("limit", 50)
+            sel = arguments.get("selector", "a")
+            links = await p.evaluate(f"""() => Array.from(document.querySelectorAll('{sel}')).slice(0,{limit}).map(a=>{{
+                return {{text: (a.innerText||a.textContent||'').trim().slice(0,100), href: a.href, title: a.title}}
+            }})""")
+            return ok(json.dumps(links, ensure_ascii=False))
+
+        if name == "find_elements":
+            elements = await p.query_selector_all(arguments["selector"])
+            attr = arguments.get("attribute")
+            results = []
+            for el in elements[:50]:
+                if attr:
+                    results.append(await el.get_attribute(attr))
+                else:
+                    results.append((await el.inner_text()).strip())
+            return ok(json.dumps(results, ensure_ascii=False))
+
+        if name == "new_tab":
+            new_page = await bm.new_tab(arguments.get("url", "about:blank"))
+            return ok(f"Opened tab {bm.current}: {new_page.url}")
+
+        if name == "switch_tab":
+            idx = arguments["index"]
+            if 0 <= idx < len(bm.tabs):
+                bm.current = idx
+                return ok(f"Switched to tab {idx}: {bm.tabs[idx].url}")
+            return ok(f"Tab {idx} doesn't exist (have {len(bm.tabs)} tabs)")
+
+        if name == "close_tab":
+            if len(bm.tabs) <= 1:
+                return ok("Cannot close the last tab")
+            await bm.tabs[bm.current].close()
+            bm.tabs.pop(bm.current)
+            bm.current = max(0, bm.current - 1)
+            return ok(f"Closed. Now on tab {bm.current}: {bm.tabs[bm.current].url}")
+
+        if name == "list_tabs":
+            result = []
+            for i, t in enumerate(bm.tabs):
+                result.append({"index": i, "url": t.url, "title": await t.title(), "active": i == bm.current})
+            return ok(json.dumps(result, ensure_ascii=False))
+
+        if name == "get_cookies":
+            cookies = await bm.context.cookies()
+            return ok(json.dumps(cookies, ensure_ascii=False, default=str))
+
+        if name == "set_cookie":
+            await bm.context.add_cookies([{
+                "name": arguments["name"],
+                "value": arguments["value"],
+                "url": arguments.get("url", p.url),
+            }])
+            return ok(f"Set cookie '{arguments['name']}'")
+
+        if name == "clear_cookies":
+            await bm.context.clear_cookies()
+            return ok("All cookies cleared")
+
+        if name == "get_console":
+            limit = arguments.get("limit", 50)
+            msgs = bm.console_msgs[-limit:]
+            return ok("\n".join(msgs) if msgs else "(no console messages yet)")
+
+        return ok(f"Unknown tool: {name}")
+
+    except Exception as e:
+        return ok(f"[ERROR] {type(e).__name__}: {e}")
+
+
+async def handle_sse(request: Request):
+    async with sse.connect_sse(request.scope, request.receive, request._send) as streams:
+        await mcp_server.run(streams[0], streams[1], mcp_server.create_initialization_options())
+
+
+async def handle_health(request: Request):
+    status = f"browser-mcp OK — tabs: {len(bm.tabs)}, current: {bm.current}"
+    return Response(status, media_type="text/plain")
+
+
+app = Starlette(
+    routes=[
+        Route("/sse", endpoint=handle_sse),
+        Route("/health", endpoint=handle_health),
+        Mount("/messages/", app=sse.handle_post_message),
+    ],
+    on_startup=[bm.init],
+)
+
+if __name__ == "__main__":
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,4 @@
+mcp>=1.0.0
+playwright>=1.40.0
+starlette>=0.40.0
+uvicorn[standard]>=0.30.0