🦁 Safari MCP

The browser for your coding agent.

Your real Safari, logged in — no Chrome, no heat, no headless.

80 tools · No Chrome/Puppeteer/Playwright needed · ~5ms per command · 60% less CPU than Chrome

Quick Start · All 80 Tools · Examples · Why Safari MCP? · Architecture · Changelog

❌ Without Safari MCP

Your AI agent needs to browse. So it either:

• Spins up Chromium via Playwright — with no logins, no cookies, no sessions
• Uses Chrome DevTools MCP — and melts your fan running a second browser
• Relies on headless scrapers — blocked by Cloudflare, reCAPTCHA, and bot detection

✅ With Safari MCP

Your AI drives the Safari you're already logged into — Gmail, GitHub, Ahrefs, Slack, banking.

Native WebKit. ~60% less CPU. Background operation. 80 tools. One npx command. macOS only.

📰 Featured on freeCodeCamp: How to Connect Your AI Coding Agent to a Browser on macOS · HackerNoon: Reverse-Engineering React, Shadow DOM, and CSP

Highlights

• 80 tools — navigation, clicks, forms, screenshots, network, storage, accessibility, and more
• Zero heat — native WebKit on Apple Silicon, ~60% less CPU than Chrome
• Your real browser — keeps all logins, cookies, sessions (Gmail, GitHub, Ahrefs, etc.)
• Background operation — Safari stays in the background, no window stealing
• No browser dependencies — no Puppeteer, no Playwright, no WebDriver, no Chrome
• Persistent process — reuses a single osascript process (~5ms per command vs ~80ms)
• Framework-compatible — React, Vue, Angular, Svelte form filling via native setters

Quick Start

Prerequisites

• macOS (any version with Safari)
• Node.js 18+
• Safari → Settings → Advanced → Show features for web developers ✓
• Safari → Develop → Allow JavaScript from Apple Events ✓

Install (one command)

npx safari-mcp

That's it — no global install needed. Or install permanently:

npm install -g safari-mcp

Configure your MCP client

All clients run Safari MCP the same way — npx safari-mcp. Pick your editor:

claude mcp add safari -- npx safari-mcp

Or edit ~/.mcp.json:

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["safari-mcp"]
    }
  }
}

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["safari-mcp"]
    }
  }
}

Restart Claude Desktop after saving.

One-click: Install in Cursor

Or edit .cursor/mcp.json in your project:

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["safari-mcp"]
    }
  }
}

One-click: Install in VS Code

Or edit .vscode/mcp.json:

{
  "servers": {
    "safari": {
      "type": "stdio",
      "command": "npx",
      "args": ["safari-mcp"]
    }
  }
}

Edit .windsurf/mcp.json in your project (or ~/.codeium/windsurf/mcp_config.json globally):

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["safari-mcp"]
    }
  }
}

Open Cline in VS Code → click the MCP icon → Edit MCP Settings → add:

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["safari-mcp"]
    }
  }
}

Edit ~/.continue/config.yaml (or .continue/config.yaml in workspace):

mcpServers:
  - name: safari
    command: npx
    args:
      - safari-mcp

Edit ~/.config/goose/config.yaml:

extensions:
  safari:
    name: safari
    type: stdio
    cmd: npx
    args:
      - safari-mcp
    enabled: true

Open LM Studio → Settings → MCP Servers → Add Server:

• Name: safari
• Command: npx
• Args: safari-mcp

Open Zed → Settings → search for "Context Servers" and add:

{
  "context_servers": {
    "safari": {
      "command": {
        "path": "npx",
        "args": ["safari-mcp"]
      }
    }
  }
}

brew install achiya-automation/tap/safari-mcp

git clone https://github.com/achiya-automation/safari-mcp.git
cd safari-mcp && npm install

Usage Workflow

The recommended pattern for AI agents using Safari MCP:

1. safari_snapshot        → Get page state (accessibility tree)
2. safari_click/fill/...  → Interact with elements by ref
3. safari_snapshot        → Verify the result

Element targeting — tools accept multiple targeting strategies:

| Strategy | Example | Best for | |----------|---------|----------| | CSS selector | #login-btn, .submit | Unique elements | | Visible text | "Sign In", "Submit" | Buttons, links | | Coordinates | x: 100, y: 200 | Canvas, custom widgets | | Ref from snapshot | ref: "e42" | Any element from accessibility tree |

Tip: Start with safari_snapshot to get element refs, then use refs for precise targeting. This is faster and more reliable than CSS selectors.

Tools (80)

Navigation (4)

| Tool | Description | |------|-------------| | safari_navigate | Navigate to URL (auto HTTPS, wait for load) | | safari_go_back | Go back in history | | safari_go_forward | Go forward in history | | safari_reload | Reload page (optional hard reload) |

Page Reading (3)

| Tool | Description | |------|-------------| | safari_read_page | Get title, URL, and text content | | safari_get_source | Get full HTML source | | safari_navigate_and_read | Navigate + read in one call |

Click & Interaction (5)

| Tool | Description | |------|-------------| | safari_click | Click by CSS selector, visible text, or coordinates | | safari_double_click | Double-click (select word, etc.) | | safari_right_click | Right-click (context menu) | | safari_hover | Hover over element | | safari_click_and_wait | Click + wait for navigation |

Form Input (7)

| Tool | Description | |------|-------------| | safari_fill | Fill input (React/Vue/Angular compatible) | | safari_clear_field | Clear input field | | safari_select_option | Select dropdown option | | safari_fill_form | Batch fill multiple fields | | safari_fill_and_submit | Fill form + submit in one call | | safari_type_text | Type real keystrokes (JS-based, no System Events) | | safari_press_key | Press key with modifiers |

Screenshots & PDF (3)

| Tool | Description | |------|-------------| | safari_screenshot | Screenshot as PNG (viewport or full page) | | `sa