Empowering Web Developers: The Safari MCP Server

Published July 1, 2026, by Saron Yitbarek

With the release of Safari Technology Preview 247, WebKit is introducing the Safari MCP server. This Model Context Protocol (MCP) implementation is designed specifically for web developers to streamline their debugging and development cycles, making them both more potent and efficient.

As AI agents become a staple in the modern coding toolkit, the Safari MCP server bridges the gap between code generation and visual reality. By linking your agent directly to a Safari browser window, the agent can finally "see" how your code is actually rendered.

The Core Value Proposition

Any client that supports the MCP standard can interface with this server. By granting an agent access to a live Safari session, it can emulate the actual end-user experience. This provides the agent with critical autonomous debugging data, including:

The DOM structure
Network traffic and requests
Visual screenshots
Console logs

This integration minimizes the need to constantly switch between your IDE and the browser, allowing you to remain within your terminal and reduce the friction of manual prompting.

Solving the "Debugging Dance"

If you've spent any time in web development, you're familiar with the tedious cycle of fixing bugs.

The Traditional Workflow:

Spot a visual glitch in the browser.

Take a screenshot or copy an error.

Describe the issue to an AI agent.

Apply the suggested fix.

~~Hope it works the first time.~~

Return to the browser to verify.

This process involves far too many clicks and window transitions. The Safari MCP server eliminates this "dance" by allowing the agent to handle the verification and troubleshooting independently.

Workflow Comparison

The shift in efficiency can be represented as: $\text{Efficiency} = \frac{\text{Bugs Fixed}}{\text{Window Switches} \times \text{Prompt Iterations}}$

In the new workflow, as $\text{Window Switches} \to 0$ , the overall efficiency increases significantly.

Key Use Cases

1. Safari-Specific Rendering

Testing in a single browser often leads to "cross-browser blindness." The Safari MCP server allows your agent to:

Open sites specifically in Safari.
Inspect computed styles and layout.
Compare actual rendering against expected design specs without you leaving your editor.

2. Performance Optimization

Your agent can now execute JavaScript directly on the page to extract performance metrics. This includes analyzing navigation timing and resource load times to identify and resolve bottlenecks.

3. Accessibility (a11y) Audits

The server empowers agents to proactively find accessibility hurdles, such as:

Missing labels on form inputs.
Incorrect ARIA attributes.
Insufficient color contrast.

4. Interaction Testing

Agents can now perform complex sequence checks, such as:

Querying elements via selectors.
Verifying the state of a checkout flow.
Testing form interactions and transitions.

Technical Toolkit

The following tools are available to the MCP client:

Tool	Description
`browser_console_messages`	Fetches buffered console logs for a specific or current tab.
`browser_dialogs`	Manages browser dialogs (accept, dismiss, or provide text).
`close_tab`	Shuts down a tab using its unique handle.
`create_tab`	Opens a new tab, with an optional starting URL.
`evaluate_javascript`	Runs JS code on the page and returns the output.
`get_network_request`	Retrieves full details (headers, body, timing) for a specific request.
`get_page_content`	Extracts page text in formats like `markdown`, `HTML`, or `JSON`.
`list_network_requests`	Lists summaries (URL, method, status) of all requests in the tab.
`list_tabs`	Returns a list of all open tabs, their URLs, and handles.
`navigate_to_url`	Goes to a URL and returns the resulting page content.
`page_info`	Provides the current page's title, URL, and loading status.
`page_interactions`	Executes a sequence of DOM actions: `click`, `type`, `scroll`, `hover`, etc.
`screenshot`	Captures the current view as a `.png` file.
`set_emulated_media`	Emulates CSS media types (e.g., `"print"`) for responsive testing.
`set_viewport_size`	Adjusts the browser viewport dimensions in CSS pixels.
`switch_tab`	Changes the active tab via its handle.
`wait_for_navigation`	Pauses until the page finishes loading; returns final title/URL.

Getting Started

Follow these steps to integrate the server into your environment:

Install Safari Technology Preview.
Enable Developer Features: Navigate to Safari Settings $\rightarrow$ Advanced $\rightarrow$ Show features for web developers.
Enable Automation: Navigate to Safari Settings $\rightarrow$ Developer $\rightarrow$ Enable remote automation and external agents.

Configuration

Depending on your agent, use the corresponding command in your terminal:

For Claude:

claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

For Codex:

codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp

For other MCP-compatible agents, add the following to your mcp.json or config.json:

{
  "safari-mcp-stp": {
    "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",
    "args": [
      "--mcp"
    ]
  }
}

Note: You can rename "safari-mcp-stp" to something simpler, like "safari", if you prefer.