Safari Browser Automation MCP server

This MCP Safari Server enables AI assistants like Claude to interact with Safari browser on macOS through a standardized protocol. It provides programmatic control for web automation, testing, and debugging by allowing navigation, JavaScript execution, and element interaction.

Installation

To install the MCP Safari Server:

1. Install dependencies:

cd mcp-safari-server
npm install

2. Build the server:

npm run build

Configuration

Add the server to your Claude configuration file (.mcp.json or claude-code-config.json):

{
  "mcpServers": {
    "safari": {
      "command": "node",
      "args": ["/path/to/mcp-safari-server/dist/index.js"],
      "env": {}
    }
  }
}

For development environments:

{
  "mcpServers": {
    "safari": {
      "command": "npx",
      "args": ["tsx", "/path/to/mcp-safari-server/src/index.ts"],
      "env": {}
    }
  }
}

Usage

Once configured, Claude can use the following tools to control Safari:

Basic Navigation

navigate

Use the safari navigate tool to open https://example.com

get_page_info

Use the safari get_page_info tool to see the current URL and title

refresh_page

Use the safari refresh_page tool

go_back / go_forward

Use the safari go_back tool to go to the previous page

JavaScript & Console Interaction

execute_script

Use the safari execute_script tool to run: document.querySelector('h1').textContent

get_console_logs

Use the safari get_console_logs tool to see any console messages

Page Interaction

click_element

Use the safari click_element tool with selector "#submit-button"
Use the safari click_element tool with selector "a.nav-link" and waitForNavigation true

type_text

Use the safari type_text tool with selector "#email" and text "[email protected]"
Use the safari type_text tool with selector "#password" and text "mypassword" and clearFirst false

scroll_to

Use the safari scroll_to tool with selector "#footer"
Use the safari scroll_to tool with y 500 and behavior "smooth"

select_option

Use the safari select_option tool with selector "#country" and value "US"
Use the safari select_option tool with selector "#size" and text "Large"
Use the safari select_option tool with selector "#priority" and index 2

get_element_text

Use the safari get_element_text tool with selector "h1"
Use the safari get_element_text tool with selector ".error-message"

wait_for_element

Use the safari wait_for_element tool with selector "#loading-complete"
Use the safari wait_for_element tool with selector ".modal" and timeout 5000

Visual & Error Monitoring

take_screenshot

Use the safari take_screenshot tool to capture the current page

start_error_monitoring

Use the safari start_error_monitoring tool

Options:

• interval: Check interval in milliseconds (default: 2000)
• autoSendToClaude: Automatically send errors to Claude Code (default: true)

stop_error_monitoring

Use the safari stop_error_monitoring tool

Error Monitoring

The Safari MCP server can automatically monitor JavaScript errors and send them to Claude Code for immediate fixing:

1. Start your development server
2. Navigate to your app in Safari using the navigate tool
3. Start error monitoring with start_error_monitoring
4. As you interact with your app, any JavaScript errors will be captured
5. Claude Code will receive notifications about errors and can help fix them
6. Stop monitoring with stop_error_monitoring when done

Requirements and Troubleshooting

• Requires macOS and Safari browser
• You may need to grant Terminal/your IDE permission to control Safari in System Preferences > Security & Privacy > Privacy > Automation
• Some websites with strict Content Security Policies might block script injection features

How to install this MCP server

For Claude Code

To add this MCP server to Claude Code, run this command in your terminal:

claude mcp add-json "safari" '{"command":"node","args":["/path/to/mcp-safari-server/dist/index.js"],"env":[]}'

See the official Claude Code MCP documentation for more details.

For Cursor

There are two ways to add an MCP server to Cursor. The most common way is to add the server globally in the ~/.cursor/mcp.json file so that it is available in all of your projects.

If you only need the server in a single project, you can add it to the project instead by creating or adding it to the .cursor/mcp.json file.

Adding an MCP server to Cursor globally

To add a global MCP server go to Cursor Settings > Tools & Integrations and click "New MCP Server".

When you click that button the ~/.cursor/mcp.json file will be opened and you can add your server like this:

{
    "mcpServers": {
        "safari": {
            "command": "node",
            "args": [
                "/path/to/mcp-safari-server/dist/index.js"
            ],
            "env": []
        }
    }
}

Adding an MCP server to a project

To add an MCP server to a project you can create a new .cursor/mcp.json file or add it to the existing one. This will look exactly the same as the global MCP server example above.

How to use the MCP server

Once the server is installed, you might need to head back to Settings > MCP and click the refresh button.

The Cursor agent will then be able to see the available tools the added MCP server has available and will call them when it needs to.

You can also explicitly ask the agent to use the tool by mentioning the tool name and describing what the function does.

For Claude Desktop

To add this MCP server to Claude Desktop:

1. Find your configuration file:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json
• Linux: ~/.config/Claude/claude_desktop_config.json

2. Add this to your configuration file:

{
    "mcpServers": {
        "safari": {
            "command": "node",
            "args": [
                "/path/to/mcp-safari-server/dist/index.js"
            ],
            "env": []
        }
    }
}

3. Restart Claude Desktop for the changes to take effect