Safari MCP

Update: In Safari 27 und Safari Technology Preview 247 führen wir den Safari MCP Server ein – einen Model Context Protocol Server für Webentwickler, der deinen Webentwicklungs- und Debugging-Workflow schneller und leistungsfähiger macht. Wir wissen, dass Agents zunehmend integraler Bestandteil des Codierungsprozesses sind, und der Safari MCP Server gibt deinem Agenten die Fähigkeit zu erkennen, wie dein Code tatsächlich im Browser gerendert wird, indem er ihn mit einem Safari-Browserfenster verbindet.

Jeder MCP-kompatible Client kann sich mit dem Safari MCP Server verbinden. Indem du deinen Agenten mit einem Safari-Browserfenster verbindest, kann dein Agent nachahmen, was deine Benutzer erleben, und erhält die Informationen, die er für autonomeres Debugging benötigt, wie Zugriff auf das DOM, Netzwerkanfragen, Screenshots und Konsolenausgaben.

Es beschleunigt deinen Debugging-Prozess und ermöglicht es dir, in der Komfortzone deines Terminals zu bleiben, was weniger Runden von Fensterwechseln und Tippen von Eingabeaufforderungen zum Debuggen deines Codes bedeutet.

Die Anwendungsfälle

Wenn du für das Web entwickelst, kennst du den Debugging-Tanz. Er läuft normalerweise so ab:

Du siehst etwas falsch auf deiner Website im Browser. Du öffnest die Konsole, um es zu finden. Du klickst in den Stile-Tab. Du siehst, was kaputt ist. Du gehst zurück zu deinem Code, um es zu beheben. Oder du machst vielleicht einen Screenshot, beschreibst das Problem deinem Agenten und lässt es von ihm beheben. Hoffentlich macht er es richtig, der Fehler ist behoben, und du kannst weitermachen.

Aber wenn es nicht behoben ist, durchläufst du den Workflow erneut – Browser. Eingabeaufforderung. Agent.

Und immer wieder, bis du den Fehler schließlich ausmerzt.

Unabhängig vom Browser oder den Tools, die du verwendest, ist der Debugging-Workflow eine Menge Klicks, Tools und Fensterwechsel für eine einzige Korrektur, aber das muss nicht so sein. Wenn du bereits Agents in deinem Entwicklungs-Workflow verwendest, macht der Safari MCP Server dein Debugging schneller und effizienter.

Der Safari MCP Server ermöglicht es deinem Agenten, mehr Debugging und Fehlerbehebung eigenständig durchzuführen. Hier sind nur einige Beispiele, wobei er helfen kann:

Webentwicklung in Safari. Beim nächsten Mal, wenn du in Safari entwickelst, profitierst du von einem verbesserten Workflow. Dein Agent hilft dir bereits mit deinem Code, jetzt kann er noch mehr tun, indem er überprüft, wie dein Code tatsächlich in Safari gerendert wird.

Verbessere die Kompatibilität mit Safari. Das Testen in nur einem Browser bedeutet, potenzielle Fehler in einem anderen zu übersehen, was diesen Benutzern eine suboptimale Erfahrung beschert. Mit dem Safari MCP Server kann dein Agent deine Website in Safari öffnen, berechnete Stile überprüfen, das Layout prüfen und es mit dem vergleichen, was du erwartest, ohne Fenster zu wechseln.

Analysiere die Leistung. Sieh, welche Teile deiner Website Dinge verlangsamen. Der Safari MCP Server ermöglicht es deinem Agenten, JavaScript auf der Seite auszuwerten, um Leistungsmetriken wie Navigationszeiten und Ressourcenladezeiten sichtbar zu machen, damit er genau bestimmen kann, was deine Website verlangsamt, und an der richtigen Lösung arbeiten kann.

Prüfe auf Barrierefreiheit. Der Safari MCP Server ermöglicht es deinem Agenten, auf häufige Barrierefreiheitsprobleme wie fehlende Beschriftungen, falsche ARIA-Attribute und schlechten Kontrast zu prüfen, damit du Probleme erkennen kannst, die deine Benutzer betreffen.

Verifiziere jeden Benutzerzustand. Wisse, dass die Seite funktioniert und so aussieht, wie sie sollte. Dein Agent kann den Zustand des Formulars überprüfen, ein Element mit einem Selektor abfragen, bestimmte Interaktionen bestätigen, verschiedene Zustände eines Checkout-Ablaufs anzeigen und mehr. Verbringe weniger Zeit mit diesen manuellen Überprüfungen und befähige den Agenten, es für dich zu tun.

Dies sind nur einige der Anwendungsfälle. Wie auch immer du dich entscheidest, es zu implementieren, der Safari MCP Server hilft deinem Agenten, mehr für dich zu tun und das ganze Hin und Her zu reduzieren, das die Webentwicklung oft erfordert. Ein einfacherer Workflow bedeutet mehr ausgemerzte Fehler, zufriedenere Benutzer und ein besseres Produkt.

Die Tools

Hier sind die verfügbaren Tools und was sie tun:

Tool	Beschreibung
browser_console_messages	Gibt gepufferte Konsolenprotokolle für den aktuellen oder angegebenen Tab zurück
browser_dialogs	Listet Browserdialoge auf und reagiert darauf (akzeptieren, ablehnen oder Text für JS-Eingabeaufforderungen eingeben)
close_tab	Schließt einen Browser-Tab anhand seines Handles
create_tab	Erstellt einen neuen Browser-Tab, optional mit Laden einer URL
evaluate_javascript	Führt JavaScript-Code innerhalb der Seite aus und gibt das Ergebnis zurück
get_network_request	Ruft vollständige Details für eine einzelne aufgezeichnete Netzwerkanfrage ab (Header, Body, Timing)
get_page_content	Extrahiert Textinhalt einer Seite in verschiedenen Formaten (Markdown, HTML, JSON usw.)
list_network_requests	Listet Netzwerkanfrage-Zusammenfassungen (URL, Methode, Status, Timing) für den aktuellen Tab auf
list_tabs	Listet alle offenen Browser-Tabs mit ihren Handles und URLs auf
navigate_to_url	Navigiert zu einer URL und gibt den Inhalt der geladenen Seite zurück
page_info	Ruft Informationen über die aktuelle Seite ab: URL, Titel und Ladestatus
page_interactions	Führt DOM-Interaktionen in Sequenz durch: Klicken, Tippen, Scrollen, Hover, Tastendruck usw.
screenshot	Erfasst einen Screenshot der aktuellen Seite als PNG
set_emulated_media	Emuliert einen CSS-Medientyp (z. B. „print“) für Responsive-Design-Tests
set_viewport_size	Setzt die Browser-Viewport-Größe in CSS-Pixeln
switch_tab	Wechselt zu einem anderen Browser-Tab anhand seines Handles
wait_for_navigation	Wartet, bis die aktuelle Seite fertig geladen ist; gibt die endgültige URL und den Titel zurück

Mit dem Safari MCP Server musst du nicht mehr die perfekte Eingabeaufforderung schreiben, die deinem Agenten sorgfältig beschreibt, was du im Browser erlebst. Du kannst deinem Agenten die Fähigkeit geben, es selbst herauszufinden.

So legst du los

Safari 27

Zuerst musst du Safari 27 installieren. Nach der Installation stelle sicher, dass du Webentwicklerfunktionen und Remote-Automatisierung aktivierst. Um Funktionen für Webentwickler zu aktivieren, wähle Safari > Einstellungen > Erweitert > aktiviere das Kontrollkästchen „Funktionen für Webentwickler anzeigen“. Gehe dann zu Safari > Einstellungen > Entwickler > aktiviere „Remote-Automatisierung und externe Agents erlauben“.

Wenn du Claude verwendest, kannst du den folgenden Befehl in deinem Terminal verwenden:

claude mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

Wenn du Codex verwendest, kannst du den folgenden Befehl in deinem Terminal verwenden:

codex mcp add safari-mcp -- "/usr/bin/safaridriver" --mcp

Für andere Agents kannst du Folgendes in deine mcp.json- oder config.json-Datei einfügen.

{
  "mcpServers": {
    "safari-mcp": {
      "command": "/usr/bin/safaridriver",
      "args": ["--mcp"]
    }
  }
}

Safari Technology Preview

Zuerst musst du Safari Technology Preview installieren. Nach der Installation stelle sicher, dass du Safari-Einstellungen > Erweitert > Funktionen für Webentwickler anzeigen aktivierst. Gehe dann zu Safari-Einstellungen > Entwickler > Remote-Automatisierung und externe Agents aktivieren.

Wenn du Claude verwendest, kannst du den folgenden Befehl in deinem Terminal verwenden:

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

Wenn du Codex verwendest, kannst du den folgenden Befehl in deinem Terminal verwenden:

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

Für andere Agents kannst du Folgendes in deine mcp.json oder config.json einfügen:

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

Beachte, dass der obige Code den Server safari-mcp-stp nennt, du kannst ihn jedoch beliebig benennen, sogar einfach safari. Sobald du den Safari MCP Server installiert hast, probiere eine der folgenden Eingabeaufforderungen aus:

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

Während jeder Agent etwas anders funktioniert, sollte er nicht explizit angewiesen werden müssen, den Safari MCP Server zu verwenden – er wird es von selbst herausfinden. Einfache Eingabeaufforderungen wie die obigen reichen aus, um den MCP anzustoßen.

So könnte ein Gespräch mit einem Agenten, der den Safari MCP Server verwendet, ablaufen:

Du: Habe einen Fehlerbericht – etwas ist in Safari auf der Flugseite kaputt. Kannst du herausfinden, was los ist?

Agent: Sicher, lass mich einen Blick darauf werfen.

Agent: Ich habe zwei eindeutige Fehler auf der Flugseite in Safari gefunden. Soll ich beide beheben?

Du: Ja. Gibt es noch etwas anderes hier, das Probleme für Safari-Benutzer verursachen könnte?

Agent: Ja, zwei weitere Dinge sind erwähnenswert. Die Ergebnisse-Enthüllungsanimation ist still kaputt und das API-Server-Startprotokoll ist falsch. Soll ich mich auch um beide kümmern?

Alles, was du brauchst, ist eine anfängliche Anfrage, um loszulegen, und mit Hilfe des Safari MCP Servers kann dein Agent von dort aus weitermachen.

Der Safari MCP Server läuft vollständig auf deinem lokalen Rechner und tätigt selbst keine Netzwerkaufrufe. Er hat auch keinen Zugriff auf deine persönlichen Informationen in Safari (z. B. AutoFill oder andere Browseraktivitäten). Wenn er Seiteninhalte, Screenshots oder Konsolenprotokolle erfasst, gehen diese Daten direkt an den Agenten, den du ausführst – nicht an Apple. Was mit diesen Daten von dort aus passiert, hängt vom Agenten und Modell ab, das du verwendest. Wie bei jedem Agenten, dem du Zugriff auf deinen Browser gewährst, verwende nur solche, denen du vertraust.

Warum wir das gebaut haben

Es gibt viele Möglichkeiten, für das Web zu entwickeln, sowohl mit als auch ohne KI. Wenn KI Teil deines Workflows ist, denken wir, dass dieses Tool dazu beitragen wird, ihn noch produktiver zu machen. Und wenn nicht, ist das auch in Ordnung.

Mit der Erstellung dieser Ressource hoffen wir, das Testen und Debuggen in Safari einfacher denn je zu machen, indem wir deinem Agenten helfen zu verstehen, wie Dinge im Browser aussehen und funktionieren.

Wenn du es ausprobierst oder wenn dies dein erstes Mal mit einem MCP Server ist, lass uns wissen, was du denkst.

Finde uns online: Saron Yitbarek auf Bluesky, Jen Simmons auf Bluesky / Mastodon und Jon Davis auf Bluesky / Mastodon. Wenn du auf Probleme stößt, reiche einen WebKit-Fehlerbericht ein. Das Einreichen von Problemen macht wirklich einen Unterschied.