Safari DevTools MCP — real browser debugging with network interception, DOM inspection, and CSS analysis for AI agents on macOS
Setup
Choose your client, copy the config, then fill in any required environment variables.
claude mcp add safari-devtools -- npx -y safari-devtools-mcp~/.codex/config.toml
[mcp_servers.safari-devtools]
command = "npx"
args = ["-y", "safari-devtools-mcp"]
# codex mcp add safari-devtools -- npx -y safari-devtools-mcp~/.cursor/mcp.json
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": [
"-y",
"safari-devtools-mcp"
]
}
}
}.vscode/mcp.json
{
"servers": {
"safari-devtools": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"safari-devtools-mcp"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": [
"-y",
"safari-devtools-mcp"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": [
"-y",
"safari-devtools-mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"safari-devtools": {
"command": "npx",
"args": [
"-y",
"safari-devtools-mcp"
]
}
}
}