Safari DevTools MCP

Name: Safari DevTools MCP
Author: HayoDev

by HayoDevversion 1.8.1i★ 3iRuns on your computer

Registry nameio.github.HayoDev/safari-devtools-mcp

How to install

What it does

MCP server for Safari DevTools — browser debugging and automation for AI coding agents

Connects Runs on your computer
Account or key No key needed
Category Developer tools

Install

Pick the AI app you use, then copy the settings.

Passed 2/3 checks · Runs on your computer · ✓ Commands checked Nov 13, 2026

First: which AI do you use?

ClaudeWeb · app · phoneChatGPTWebClaude CodeTerminalCursorCode editorVS CodeCode editorOtherOther apps

Pick your app and the steps appear below.

Works with Claude, with some setup first

Install Node.js on your computer first (one time) · Only the Claude desktop app (Windows or Mac), not the web or phone

Let AI install it

Copy this message into a Claude chat. The AI checks your computer, tells you which file it will change, and waits for your OK every time.

Please install the MCP server Safari DevTools MCP for Claude on this computer, in this order: 1) Check Node.js with node -v. If it is missing, tell me to install it from https://nodejs.org/en/download; do not install it yourself. 2) Use only this config (already checked by PopNx MCP): { "mcpServers": { "safari-devtools": { "command": "npx", "args": [ "-y", "safari-devtools-mcp" ] } } } 3) Tell me the full path of the file you will change, or the command you will run, and wait for my OK. 4) No key is needed. 5) Do what we agreed, then check that the Safari DevTools MCP tools really show up.

This message has no key in it. If a key is needed, the AI will ask you to paste it yourself into the file or the app’s field.

1
Install Node.js (if you don’t have it)
Already installed? Check first · Open Terminal, type this command and press Enter
node -v
- A version number such as v26.13.1 = installed, skip this step
- "command not found" (on Windows: "is not recognized") = not installed yet, or installed but Terminal needs to be closed and reopened
How to open Terminal
Mac: press ⌘ + Space, type Terminal, press Enter
Windows: open Start, type Windows PowerShell, then Open
Not installed: Open the official download page, pick the LTS version and the click-through installer: .pkg on Mac · .msi on Windows. Double-click and follow it to the end. No curl command needed
Open the Node.js download page ↗
When it’s done, close Terminal, open it again and run the same command. You should see a version number: node -v
Install once; it works for everything that needs Node.js
Done
Open the Claude desktop app’s settings file
SettingsDeveloperEdit Config
Done

Paste these settings and save the file

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

Done

Quit Claude and open it again
Done
Try it
Use Safari DevTools MCP and tell me what you can do for me, then show me one thing
✓ If Claude says it is using Safari DevTools MCP or shows a Safari DevTools MCP tool in the answer, you are connected

Menu names checked against Anthropic’s help page on Nov 11, 2026 · your screen may differ slightly by app version

ChatGPT cannot connect Safari DevTools MCP yet

Safari DevTools MCP runs on your computer, but ChatGPT can only connect servers that run on the web

What you can do instead

A · Use an app that can connect Safari DevTools MCP

Steps for Claude →Install Node.js on your computer first (one time) · Only the Claude desktop app (Windows or Mac), not the web or phone
Steps for Claude Code →Install Node.js on your computer first (one time)
Steps for Cursor →Install Node.js on your computer first (one time)
Steps for VS Code →Install Node.js on your computer first (one time)

B · Others in Developer tools that work with ChatGPT

Picked from the most used in the same category, only ones that connect by address with no key

Sentry✓ ChatGPT
Compiler Explorer✓ ChatGPT
GitDiagram✓ ChatGPT

Works with Claude Code, with some setup first

Install Node.js on your computer first (one time)

Let AI install it

Copy this message into a Claude Code chat. The AI checks your computer, tells you which file it will change, and waits for your OK every time.

Please install the MCP server Safari DevTools MCP for Claude Code on this computer, in this order: 1) Check Node.js with node -v. If it is missing, tell me to install it from https://nodejs.org/en/download; do not install it yourself. 2) Use only this config (already checked by PopNx MCP): claude mcp add --scope user safari-devtools -- npx -y safari-devtools-mcp 3) Tell me the full path of the file you will change, or the command you will run, and wait for my OK. 4) No key is needed. 5) Do what we agreed, then check that the Safari DevTools MCP tools really show up.

This message has no key in it. If a key is needed, the AI will ask you to paste it yourself into the file or the app’s field.

1
Install Node.js (if you don’t have it)
Already installed? Check first · Open Terminal, type this command and press Enter
node -v
- A version number such as v26.13.1 = installed, skip this step
- "command not found" (on Windows: "is not recognized") = not installed yet, or installed but Terminal needs to be closed and reopened
How to open Terminal
Mac: press ⌘ + Space, type Terminal, press Enter
Windows: open Start, type Windows PowerShell, then Open
Not installed: Open the official download page, pick the LTS version and the click-through installer: .pkg on Mac · .msi on Windows. Double-click and follow it to the end. No curl command needed
Open the Node.js download page ↗
When it’s done, close Terminal, open it again and run the same command. You should see a version number: node -v
Install once; it works for everything that needs Node.js
Done
Open Terminal
Mac: press Command+Space and type Terminal · Windows: open PowerShell
Done

Paste this command and press Enter

claude mcp add --scope user safari-devtools -- npx -y safari-devtools-mcp

Done

Type /mcp in Claude Code
You should see Safari DevTools MCP listed as connected
Done
Try it
Use Safari DevTools MCP and tell me what you can do for me, then show me one thing
✓ If Claude Code says it is using Safari DevTools MCP or shows a Safari DevTools MCP tool in the answer, you are connected

Menu names checked against Anthropic’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Works with Cursor, with some setup first

Install Node.js on your computer first (one time)

Let AI install it

Copy this message into a Cursor chat. The AI checks your computer, tells you which file it will change, and waits for your OK every time.

Please install the MCP server Safari DevTools MCP for Cursor on this computer, in this order: 1) Check Node.js with node -v. If it is missing, tell me to install it from https://nodejs.org/en/download; do not install it yourself. 2) Use only this config (already checked by PopNx MCP): { "mcpServers": { "safari-devtools": { "command": "npx", "args": [ "-y", "safari-devtools-mcp" ] } } } 3) Tell me the full path of the file you will change, or the command you will run, and wait for my OK. 4) No key is needed. 5) Do what we agreed, then check that the Safari DevTools MCP tools really show up.

This message has no key in it. If a key is needed, the AI will ask you to paste it yourself into the file or the app’s field.

1
Install Node.js (if you don’t have it)
Already installed? Check first · Open Terminal, type this command and press Enter
node -v
- A version number such as v26.13.1 = installed, skip this step
- "command not found" (on Windows: "is not recognized") = not installed yet, or installed but Terminal needs to be closed and reopened
How to open Terminal
Mac: press ⌘ + Space, type Terminal, press Enter
Windows: open Start, type Windows PowerShell, then Open
Not installed: Open the official download page, pick the LTS version and the click-through installer: .pkg on Mac · .msi on Windows. Double-click and follow it to the end. No curl command needed
Open the Node.js download page ↗
When it’s done, close Terminal, open it again and run the same command. You should see a version number: node -v
Install once; it works for everything that needs Node.js
Done
Click this button to open Cursor
Open in Cursor
Cursor asks you to confirm; click Install
Done
Open the AI chat in Cursor in Agent mode
Done
Try it
Use Safari DevTools MCP and tell me what you can do for me, then show me one thing
✓ If Cursor says it is using Safari DevTools MCP or shows a Safari DevTools MCP tool in the answer, you are connected

Menu names checked against Cursor’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Works with VS Code, with some setup first

Install Node.js on your computer first (one time)

Let AI install it

Copy this message into a VS Code chat. The AI checks your computer, tells you which file it will change, and waits for your OK every time.

Please install the MCP server Safari DevTools MCP for VS Code on this computer, in this order: 1) Check Node.js with node -v. If it is missing, tell me to install it from https://nodejs.org/en/download; do not install it yourself. 2) Use only this config (already checked by PopNx MCP): { "servers": { "safari-devtools": { "type": "stdio", "command": "npx", "args": [ "-y", "safari-devtools-mcp" ] } } } 3) Tell me the full path of the file you will change, or the command you will run, and wait for my OK. 4) No key is needed. 5) Do what we agreed, then check that the Safari DevTools MCP tools really show up.

This message has no key in it. If a key is needed, the AI will ask you to paste it yourself into the file or the app’s field.

1
Install Node.js (if you don’t have it)
Already installed? Check first · Open Terminal, type this command and press Enter
node -v
- A version number such as v26.13.1 = installed, skip this step
- "command not found" (on Windows: "is not recognized") = not installed yet, or installed but Terminal needs to be closed and reopened
How to open Terminal
Mac: press ⌘ + Space, type Terminal, press Enter
Windows: open Start, type Windows PowerShell, then Open
Not installed: Open the official download page, pick the LTS version and the click-through installer: .pkg on Mac · .msi on Windows. Double-click and follow it to the end. No curl command needed
Open the Node.js download page ↗
When it’s done, close Terminal, open it again and run the same command. You should see a version number: node -v
Install once; it works for everything that needs Node.js
Done
Click this button to open VS Code
Open in VS Code
VS Code asks you to confirm; click Install
Done
Open the AI chat in VS Code in Agent mode
Done
Try it
Use Safari DevTools MCP and tell me what you can do for me, then show me one thing
✓ If VS Code says it is using Safari DevTools MCP or shows a Safari DevTools MCP tool in the answer, you are connected

Menu names checked against VS Code’s help page on Nov 11, 2026 · your screen may differ slightly by app version

Other apps that use MCP, such as Windsurf, Zed or Gemini CLI, each add servers differently. See how in the app list.

See every app that uses MCP →

JSON settings are under “For developers” below

Stuck? Ask people who use Safari DevTools MCP💬 Discussion →

For developers: Terminal commands and JSON settings

Installed on your computer

Claude Code

claude mcp add --scope user safari-devtools -- npx -y safari-devtools-mcp

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

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

These settings are generated from the maker’s registry entry. If the README says otherwise, follow the README.

At a glance

GitHub stars i: 3
Downloads per weeki: 60/wk
Licence i: MIT
Connection: Runs on your computer
Transport: stdio
Latest versioni: 1.8.1
Categoryi: Developer tools
Published to registryi: Apr 13, 2026
Code last changedi: Apr 13, 2026
Maker: HayoDev
Packages: npm: safari-devtools-mcp
Repo: HayoDev/safari-devtools-mcp
Registry status: Active

Which apps can use it

Based on how this server connects and on each app’s own docs, checked Nov 10, 2026.

Run on your computer in

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

All apps, with pros and cons →

What it can do

Runs on your computer; the tool list appears in your AI app after you install it.

Basic checksi

We check information anyone can see; we have not read the code. Checks that do not apply are left out of the count. · Checked Nov 16, 2026

✓ Pass
Maker matches the repo
The registry name was verified with the GitHub account HayoDev, which owns the repo
! Caution
Still maintained
Code last changed 7 months ago, more than 6 months ago
✓ Pass
Has a licence
Uses MIT
– Not applicable
Endpoint responds
This one runs on your computer; there is no internet endpoint
– Not applicable
Sign-in with OAuth
Runs on your computer and uses local settings instead
… Not checked yet
No hidden instructions in tool descriptions
Runs on your computer; we can only read tool lists from internet endpoints

Published vulnerabilities (OSV.dev)

Not checked yet

What we check → · JSON

Makers: ask for a re-check or report wrong info

Discussion

Ask, share a tip or report that it does not work. Sorted by what people marked helpful.

No posts yet. Be the first to ask or share.

Posts here are written by users, not the PopNx team.

User reviews

No reviews yet

Compared with others in Developer toolsi

More stars than 81% of the other 5926 servers in this category
Published to the registry more recently than 8% of the other 5926 servers in this category
Basic checks equal to or better than 44% of the other 5926 servers in this category

Compared with every active server in this category in the registry. Stars count only when the publisher owns the repo.

Common questions

Is Safari DevTools MCP safe?

It passed 2 of 3 applicable basic checks. We have not read the code. Before adding a key or token, see what access the server asks for and use a key with only the permissions you need.

What keys or codes does it need?

The registry does not list a required key, though some servers ask you to sign in on first use.

Does it run on my computer or in the cloud?

It runs on your computer. Your AI app starts it when needed, and data does not pass through the maker’s servers (unless it calls an online service itself).

Is it still maintained?

The GitHub repo last changed 7 months ago, and the latest version (1.8.1) reached the registry 7 months ago.

Which apps can use it?

Apps that support MCP, such as Claude Desktop, Claude Code, Cursor and VS Code. You also need Node.js on your computer.

What can I use instead?

In the same category: GitDiagram, Appllama, Cloudflare MCP, Omnara, Repowise

Similar alternatives

Same category, other makers, commands already checked. Official ones first, then by stars.

Reading a card:↓ Downloads per weeki★ GitHub starsiThree pillars: reviews · checks · usageiUpdated = latest version published to the registryi

GitDiagram

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

by ahmedkhaleel2004Widely used★ 18.9KUpdated 2 months ago

Runs in the cloud✓ service owner · gitdiagram.comTried by the PopNx team

How to connect

Appllama

Study screens, flows and paywalls from top-earning iOS apps, then build from what wins.

by AppllamaWidely used★ 5.2KUpdated 3 months ago

Runs in the cloud✓ service owner · appllama.io

How to connect

Cloudflare MCP

Cloudflare MCP servers

by cloudflareWidely used★ 4.5KUpdated 14 months ago

Runs in the cloud✓ service owner · mcp.cloudflare.comTried by the PopNx team

How to connect

Omnara

Deploy durable AI agents with Omnara, an open-source managed-agent platform.

by omnara-aiWidely used★ 3.4KUpdated 2 months ago

Runs in the cloud✓ service owner · omnara.com

How to connect

Repowise

Codebase intelligence for AI coding agents: graph, git history, docs, decisions, code health.

by repowise-devWidely used↓ 6.5K/wk★ 8.1K Stars for the whole repoUpdated 3 days ago

Computer or cloud✓ service owner · repowise.dev

Install

GitDiagram — Runs in the cloud, nothing to install · No key needed
Appllama — Runs in the cloud, nothing to install · No key needed
Cloudflare MCP — Runs in the cloud, nothing to install · No key needed · In Claude’s directory
Omnara — Runs in the cloud, nothing to install · No key needed
Repowise — Cloud or install on your computer · No key needed

README from the maker

Open the README

Copied from the maker’s repo as written. PopNx MCP has not reviewed or endorsed it. HTML, images and scripts are removed. Links lead off this site.

Safari DevTools MCP

safari-devtools-mcp lets your coding agent (such as Claude, Cursor, Copilot or Gemini) control and inspect a live Safari browser on macOS. It acts as a Model-Context-Protocol (MCP) server, giving your AI coding assistant access to Safari DevTools for debugging, automation, and testing.

Chrome developers get powerful AI debugging through chrome-devtools-mcp by Google. Safari developers should have something equivalent — this project brings that same experience to Safari, with matching tool names and parameter schemas so you can swap between browsers with minimal friction.

Changelog | Contributing

Note: This server exposes browser content (page data, console logs, network traffic) to MCP clients. Avoid browsing sensitive websites or entering credentials while a session is active.

Why safari-devtools-mcp?

This project uses WebDriver for capabilities that scripting alone cannot provide:

Network request/response body capture — intercepts fetch and XHR calls with full headers, payloads, and timing
DOM snapshots via accessibility tree — stable element UIDs that survive page re-renders, not brittle CSS selectors
CSS computed style inspection — read any computed property from any element
Cookie and storage management — read, write, and delete cookies, localStorage, and sessionStorage
Element-level screenshots — capture individual elements, not just the full viewport
Session auto-recovery — detects dead SafariDriver sessions and reconnects transparently

Key features

Browser debugging: Capture console logs, inspect network requests, and evaluate JavaScript — with stack traces and full request/response details.
Reliable automation: Click, type, fill forms, drag and drop, and press keyboard shortcuts using accessibility-tree snapshots with stable UIDs.
Native macOS integration: Tab management via AppleScript for listing, switching, and controlling Safari tabs across windows

Requirements

macOS (Safari and SafariDriver are Apple-exclusive)
Node.js 18+ (22+ recommended)
Safari with remote automation enabled

Safari setup

Open Safari > Settings > Advanced > check "Show features for web developers"
Develop menu > check "Allow Remote Automation"
Authorize SafariDriver:

   sudo safaridriver --enable

Getting started

Standard MCP config:

"mcpServers": { "safari-devtools": { "command": "npx", "args": ["-y", "safari-devtools-mcp@latest"] } } }

Claude Code

claude mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Or add to your project's .mcp.json using the standard config above.

Claude Desktop

Add the standard config to ~/Library/Application Support/Claude/claude_desktop_config.json.

Cursor

Add the standard config to your Cursor MCP settings.

VS Code

Add the standard config to .vscode/mcp.json.

Copilot CLI

copilot mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Gemini CLI

gemini mcp add safari-devtools -- npx -y safari-devtools-mcp@latest

Or add the standard config to your ~/.gemini/settings.json.

Gemini Code Assist

Add the standard config to your .gemini/settings.json in the project root.

JetBrains AI Assistant & Junie

Add the standard config to your .junie/mcp.json in the project root.

Raycast

Open "Install MCP Server" in Raycast and fill in:

Command: npx
Arguments: -y safari-devtools-mcp@latest

Or copy the standard config JSON above before opening the command — Raycast will auto-fill the form.

Visual Studio

Add the standard config to your .vs/mcp.json in the solution root.

Warp

Add the standard config to your Warp MCP settings file at ~/.warp/mcp.json.

From source

git clone https://github.com/HayoDev/safari-devtools-mcp.git

cd safari-devtools-mcp npm install && npm run build

Then point your MCP client to the built entry point:

"mcpServers": { "safari-devtools": { "command": "node", "args": [ "/path/to/safari-devtools-mcp/build/src/bin/safari-devtools-mcp.js" ] } } }

Your first prompt

Navigate to https://example.com, take a snapshot, and list any console errors.

Slim mode

Use --slim to reduce token usage with shorter tool descriptions. Useful when working with context-limited models or long conversations:

"mcpServers": { "safari-devtools": { "command": "npx", "args": ["-y", "safari-devtools-mcp@latest", "--slim"] } } }

Prompts (skills)

The server exposes guided debugging workflows as MCP prompts. Clients that support prompts (e.g. Claude Desktop, Claude Code) can invoke them by name:

Prompt	Description
`safari-devtools`	Getting started — tool overview, recommended workflow, and Safari-specific notes
`a11y-debugging`	Accessibility audit — a11y tree inspection, axe-core injection, WCAG checks
`safari-specific-debugging`	Debug WebKit quirks — CSS prefixes, JS feature gaps, ITP/CORS issues
`performance-debugging`	Performance analysis — Navigation Timing, Core Web Vitals, resource waterfall

Tools (45)

Debugging

Tool	Description
`list_console_messages`	List console messages with filtering by level (log, warn, error)
`get_console_message`	Get a detailed message including stack trace and arguments
`clear_console`	Clear all captured console messages
`list_network_requests`	Monitor network requests — Fetch, XHR, and resource loads
`get_network_request`	Get full request/response details with headers and body
`clear_network`	Clear all captured network requests
`evaluate_script`	Execute JavaScript in the browser context and return results
`take_screenshot`	Capture a PNG screenshot of the page or a specific element
`take_snapshot`	Accessibility-tree snapshot of the DOM with stable UIDs for element targeting

Page content

Tool	Description
`get_page_content`	Get the page title, URL, and visible text content
`get_html_source`	Get the full HTML source of the page
`extract_links`	Extract all links with their text, href, and rel attributes
`extract_meta`	Extract meta tags (og:, twitter:, description, etc.)

Navigation

Tool	Description
`list_pages`	List all open Safari tabs across windows
`select_page`	Switch to a specific tab
`new_page`	Open a new tab and navigate to a URL
`close_page`	Close a tab
`navigate_page`	Navigate to a URL, go back, forward, or reload
`wait_for`	Wait for specific text to appear on the page
`resize_page`	Resize the browser window
`handle_dialog`	Accept or dismiss browser dialogs (alert, confirm, prompt)

Scroll

Tool	Description
`scroll`	Scroll the page in any direction by a given amount
`scroll_to_element`	Scroll an element into view by its UID

CSS inspection

Tool	Description
`get_computed_style`	Get computed CSS styles for any element by UID

Cookies & storage

Tool	Description
`get_cookies`	Get browser cookies, optionally filtered by name or domain
`set_cookie`	Set a cookie with name, value, and optional attributes
`delete_cookie`	Delete a cookie by name, or delete all cookies
`get_storage`	Read from localStorage or sessionStorage
`set_storage`	Write a key-value pair to localStorage or sessionStorage
`delete_storage`	Delete a key or clear all entries from localStorage/sessionStorage

Input automation

Tool	Description
`click`	Click an element by UID from a snapshot
`click_at`	Click at specific x/y coordinates
`right_click`	Right-click (context menu) on an element
`select_option`	Select an option from a dropdown by value or label
`hover`	Hover over an element
`fill`	Type into an input field or select from a dropdown
`fill_form`	Fill multiple form fields at once
`type_text`	Type text into the currently focused element
`drag`	Drag and drop between elements or coordinates
`press_key`	Press a key or combination (e.g., `Meta+A`, `Enter`)
`upload_file`	Upload a file through a file input

iOS Safari validation

Tool	Description
`inspect_viewport_meta`	Parse the viewport meta tag and validate against iOS best practices (width, zoom, viewport-fit)

| get_safe_area_insets | Read CSS safe-area-inset values and check whether t

Only the beginning is shown; read the rest in the repo

Safari DevTools MCP

What it does

Install

Install Node.js (if you don’t have it)

Open the Claude desktop app’s settings file

Paste these settings and save the file

Quit Claude and open it again

Try it

What you can do instead

Install Node.js (if you don’t have it)

Open Terminal

Paste this command and press Enter

Type /mcp in Claude Code

Try it

Install Node.js (if you don’t have it)

Click this button to open Cursor

Open the AI chat in Cursor in Agent mode

Try it

Install Node.js (if you don’t have it)

Click this button to open VS Code

Open the AI chat in VS Code in Agent mode

Try it

Installed on your computer

At a glance

Which apps can use it

Related guides

What it can do

Basic checksi

Maker matches the repo

Still maintained

Has a licence

Endpoint responds

Sign-in with OAuth

No hidden instructions in tool descriptions

Published vulnerabilities (OSV.dev)

Discussion

User reviews

Compared with others in Developer toolsi

Common questions

Similar alternatives

GitDiagram

Appllama

Cloudflare MCP

Omnara

Repowise

README from the maker

Safari DevTools MCP

Changelog | Contributing

Why safari-devtools-mcp?

Key features

Requirements

Safari setup

Getting started

Your first prompt

Slim mode

Prompts (skills)

Tools (45)

Debugging

Page content

Navigation

Scroll

CSS inspection

Cookies & storage

Input automation

iOS Safari validation