Skip to content
Recaply.
Sign inSubmit a tool

LearnTutorials

Safari MCP serverTutorialsOpen Safari MCP server

Debug your website with the Safari MCP server

Connect Claude Code to the Safari MCP server so it finds console errors, failed requests and accessibility bugs on your site in under 20 minutes.

By Recaply EditorsIntermediate17 min5 stepsUpdated

A hand uses tweezers to lift a small beetle off the blank screen of an open laptop

What you need

The server needs Safari 27 on a Mac. On an older Safari, use Safari Technology Preview 247 or newer instead.

  1. Step 1: Turn on Safari's agent setting

    2 min

    Safari blocks outside agents until you allow them, so the server can't connect before this.

    1. In Safari, open Safari > Settings > Advanced and check Show features for web developers.
    2. Open the Developer tab and check Allow remote automation and external agents.

    You should see both boxes checked, and a Develop menu in Safari's menu bar.

    No Developer tab in Settings?

    It only appears after you check Show features for web developers under Advanced. Close Settings and open it again.

  2. Step 2: Add the server to Claude Code

    2 min

    One command registers Safari's own driver as an MCP server for your project.

    1. Open a terminal in your project folder.
    2. Run the command below.
    3. Run claude mcp list to check the connection.
    Run this
    claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

    You should see safari-mcp in the list, marked Connected.

    It says Failed to connect?

    Check that Safari is version 27 or newer and the Developer setting from step 1 is on. Then run claude mcp get safari-mcp and read its Issue: line.

    Using Codex? Run codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp instead. In Safari Technology Preview, the driver sits inside the app, at /Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver.

  3. Step 3: Start your site and open Claude Code

    3 min

    The agent tests what Safari really renders, so your site has to be running first.

    1. Start your dev server, or have your staging URL ready.
    2. Run claude in the same project folder.
    3. Type /mcp and check that safari-mcp is connected.

    You should see safari-mcp in the /mcp list, with its tools ready to use.

    The server is missing from /mcp?

    You added it in another folder. A server added without a scope only works in the folder where you ran the command. Add it here, or add --scope user to use it everywhere.

  4. Step 4: Ask the agent to find bugs

    5 min

    The agent reads the DOM, console and network requests on its own, so you don't copy logs by hand.

    1. Paste the prompt below, with your site's address in place of [YOUR URL].
    2. Approve the Safari tool calls when Claude Code asks.
    3. Read the bug list before you let it change any code.
    Your prompt
    Open [YOUR URL] in Safari and find bugs on my site. Check the console for errors and the network requests for failed loads. Take a screenshot of each page you test. List each bug with its cause and the file to fix. Don't edit any code yet.

    You should see a list of bugs, each with console or network evidence and a likely fix.

    It says it can't reach your site?

    Open the URL in Safari yourself first. For a local server, check that it's still running and that the port in your prompt is right.

  5. Step 5: Check accessibility and speed

    5 min

    The same connection tests labels, contrast and load times, which are easy to miss by eye.

    1. Paste the follow-up prompt below.
    2. Ask it to test a phone layout too. It can set the viewport to a phone's width.
    3. Ask it to fix one bug at a time, then check the page in Safari again.
    Your prompt
    How accessible is my site in Safari? Check for missing labels, wrong ARIA attributes and poor contrast. Then measure how the page performs: navigation timing and the slowest resources to load.

    You should see an accessibility list and a short performance report, each pointing to elements or files.

    A fix looks right in the code but not in Safari?

    Ask the agent to reload the page and take a new screenshot after each fix. It only sees a change once the page loads again.

You get

An agent that tests your site in real Safari and backs each bug with console, network or screenshot evidence

Try next

Install an agent skill in any AI coding agent6 steps · 5 minRun and share coding agents with Omnigent6 steps · 27 minWrite and test an AGENTS.md file with Claude Code6 steps · 45 min

Did this guide work for you?

Sources

0 of 5Next: Turn on Safari's agent setting