Safari MCP Server:
Visual Rendering Testing with AI Agents

What Is the Safari MCP Server?

On July 1, 2026, Apple's WebKit team shipped Safari Technology Preview 247 with a surprising addition: the Safari MCP server — a Model Context Protocol server that exposes a full Safari browser window to AI coding agents. It gives your agent the ability to visually verify how code renders in Safari, turning the familiar "write code, check browser, repeat" debugging loop into a single conversational workflow.

Any MCP-compatible client — Claude Code, Codex CLI, VS Code via GitHub Copilot, Cursor, Zed, or Claude Desktop — can connect to the Safari MCP server. Once connected, your agent gains access to 17 browser tools: screenshot capture, DOM navigation, JavaScript evaluation, network request monitoring, console log access, viewport resizing, media emulation, and more.

This is a major shift. Previously, AI coding agents had no direct visual feedback — they could read your code but couldn't see what it produced in a browser. The Safari MCP server closes that loop, and it's one of the most practical additions to the AI coding assistant ecosystem in 2026.

Why It Matters: Closing the Visual Feedback Loop

If you build for the web, you know the debugging dance. You spot a layout bug in the browser. You open Safari's Web Inspector to hunt it down. You click through the Styles panel, find the broken CSS, switch to your editor, fix it, reload, and check again. If the fix didn't work — and it often doesn't on the first try — you repeat the whole cycle.

With AI coding agents, this cycle got a little better: you could take a screenshot, describe the problem, and let the agent suggest a fix. But that still meant manual screenshotting, manual prompting, and manual verification. The loop went: Browser → Screenshot → Prompt → Agent → Code → Browser again.

The Safari MCP server collapses this into a single call. Your agent can:

• Navigate to a URL in Safari and take a screenshot
• Inspect computed styles and the DOM tree automatically
• Evaluate JavaScript to check page state, timing, or network performance
• Interact with the page — click buttons, fill forms, scroll — and verify the result
• Compare expected vs actual rendering without you switching windows once

The result: fewer context switches, faster bug squashing, and a debugging workflow that feels like pairing with a developer who actually has Safari open.

The 17 Tools Available

The Safari MCP server exposes a comprehensive set of browser tools. Here's every tool and what it does:

Setting Up the Safari MCP Server

Prerequisites

You'll need macOS with Safari Technology Preview 247 or later installed. Download it from developer.apple.com/safari/technology-preview/. Once installed:

1. Open Safari Technology Preview
2. Go to Safari Settings → Advanced and enable "Show features for web developers"
3. Go to Safari Settings → Developer and enable "Enable remote automation and external agents"

With Claude Code

Simplest setup — one command from your terminal:

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

This registers the Safari MCP server with Claude Code under the name safari-mcp-stp. You can name it anything — even just safari. Once added, Claude automatically discovers and uses the browser tools when you ask it to check something in Safari.

With Codex CLI

Same command pattern, different client:

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

With VS Code, Cursor, or Zed (Manual Configuration)

For other MCP-compatible editors, add the server configuration to your project's mcp.json or editor-specific MCP settings file:

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

For VS Code: add to .vscode/mcp.json.
For Cursor: add to .cursor/mcp.json under mcpServers.
For Zed: add to ~/.config/zed/mcp.json.

Practical Use Cases

1. Visual Bug Detection

The most compelling use case: your agent finds visual layout bugs automatically. Instead of describing what you see to the agent, the agent opens Safari, takes a screenshot, and identifies the problem:

"Look at my site in Safari and find any rendering issues on the flight booking page"

The agent navigates to the page, takes a screenshot, examines the rendered output, checks console logs for errors, and returns a structured bug report — with specific CSS fixes. This is the workflow Apple demonstrated in their announcement: the agent found two distinct bugs (one layout, one JavaScript) and proposed fixes for both.

2. Cross-Browser Compatibility Testing

Combined with a browser compatibility data tool like the MDN MCP server, you can create a powerful cross-browser testing pipeline:

1. Ask the MDN MCP server: "Which CSS features on my page have Safari-specific issues?"
2. Tell the Safari MCP server: "Open my page, check if feature X renders correctly, and compare against the expected layout"
3. The agent captures screenshots, evaluates JavaScript feature detection, and reports any discrepancies

This workflow catches Safari-specific CSS bugs before they reach production — especially important because Safari's CSS engine differs in subtle ways from Chromium-based browsers. Features like subgrid, :has(), and container queries have had Safari-specific implementation quirks that visual testing catches immediately.

3. Performance Analysis

The Safari MCP server lets your agent evaluate JavaScript to extract real performance data:

// Your agent can extract navigation timing data
const perfData = performance.getEntriesByType('navigation')[0];
console.log(`DOM Content Loaded: ${perfData.domContentLoadedEventEnd}ms`);
console.log(`Load: ${perfData.loadEventEnd}ms`);
console.log(`First Byte: ${perfData.responseStart - perfData.requestStart}ms`);

The agent can also list network requests to find slow resources, identify render-blocking scripts, and check the performance of Safari-specific CSS properties. This is particularly valuable for testing on real Apple hardware — Safari's performance profile differs significantly from Chrome or Firefox on the same machine due to different rendering engines and memory management.

4. Accessibility Auditing

Your agent can check for common accessibility issues directly in Safari:

• Missing form labels and ARIA attributes
• Insufficient color contrast ratios (especially for Safari's specific rendering)
• Focus management and tab order verification
• Screen reader output via aria-live regions
• Keyboard navigation flows through interactive elements

Instead of running a separate accessibility audit tool, you ask your agent: "How accessible is my site in Safari?" — and it runs through the checks automatically.

5. Multi-Step User Flow Verification

Complex user flows — checkout, registration, multi-step forms — benefit enormously from agent-driven testing. Your agent can:

1. Navigate to the start of the flow
2. Fill in form fields via page_interactions
3. Submit and wait for navigation
4. Take a screenshot at each step
5. Verify the page state and compare against expected results

This catches Safari-specific issues that unit tests miss: sticky headers that don't scroll, viewport-dependent layout shifts, and form validation UI that renders differently in WebKit.

Safari MCP vs MDN MCP: Complementary Tools

With the MDN MCP server and the Safari MCP server now available, it's worth understanding how they differ — and how they complement each other:

In practice, I use both together. The MDN server tells me whether a feature has Baseline support across browsers. The Safari server tells me whether it actually renders correctly in Safari. They're not competing — they're complementary.

Privacy and Security

Apple designed the Safari MCP server with privacy in mind. It runs entirely on your local machine and makes no network calls of its own. It does not have access to your personal Safari data — AutoFill, browsing history, saved passwords, or other tabs. When it captures page content, screenshots, or console logs, that data flows directly to your AI agent — not to Apple.

What happens to that data after it reaches your agent depends on the agent and model you're using. As with any tool that gives an agent browser access, only use agents you trust. The safaridriver --mcp process is a standard macOS component with no additional network permissions beyond what your agent already has.

Getting Started

The Safari MCP server is available now in Safari Technology Preview 247. The setup takes about three minutes:

1. Download and install Safari Technology Preview from developer.apple.com
2. Enable Developer features and remote automation in Safari Settings
3. Run claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
4. Ask your agent: "Find bugs on my site in Safari"

The agent takes it from there. No complex prompts, no manual screenshotting, no window hopping. Just a conversational debugging workflow that finally gives your AI the visual feedback it's been missing.

For a deeper exploration of the MCP ecosystem and how it's transforming web development, check out the MDN MCP server guide — together, these two tools cover documentation and visual testing in one unified workflow.

FAQ