Safari MCP

Vorstellung des Safari MCP-Servers für Webentwickler

1. Juli 2026

von Saron Yitbarek

In der Safari Technology Preview 247 stellen wir den Safari MCP-Server vor – einen Model Context Protocol-Server für Webentwickler, der Ihren Workflow bei der Webentwicklung und Fehlersuche schneller und leistungsfähiger macht. Wir wissen, dass Agents zunehmend integraler Bestandteil des Programmierprozesses sind, und der Safari MCP-Server gibt Ihrem Agent die Möglichkeit zu erfahren, wie Ihr Code tatsächlich im Browser gerendert wird, indem er ihn mit einem Safari-Browserfenster verbindet.

Jeder MCP-kompatible Client kann eine Verbindung zum Safari MCP-Server herstellen. Indem Sie Ihren Agent mit einem Safari-Browserfenster verbinden, kann Ihr Agent nachbilden, was Ihre Benutzer erleben, und erhält so die Informationen, die er für eine autonomere Fehlersuche benötigt, wie z. B. Zugriff auf das DOM, Netzwerkanfragen, Screenshots und die Konsolenausgabe.

Es beschleunigt Ihren Debugging-Prozess und ermöglicht es Ihnen, in der gewohnten Umgebung Ihres Terminals zu bleiben, was weniger Fensterwechsel und Eingabeaufforderungen zur Fehlerbehebung in Ihrem Code bedeutet.

Die Anwendungsfälle

Wenn Sie für das Web entwickeln, dann kennen Sie den Debugging-Tanz. Er läuft normalerweise ungefähr so ab:

Sie sehen, dass etwas mit Ihrer Website im Browser nicht stimmt. Sie öffnen die Konsole, um dem Problem auf die Spur zu kommen. Sie klicken auf den Tab „Stile“. Sie sehen, was kaputt ist. Sie gehen zurück zu Ihrem Code, um es zu beheben. Oder Sie machen vielleicht einen Screenshot, beschreiben das Problem Ihrem Agent und lassen ihn die Behebung für Sie übernehmen. Hoffentlich macht er es richtig, der Fehler ist behoben und Sie können weitermachen.

Aber wenn es nicht behoben ist, durchlaufen Sie den Workflow erneut – Browser. Prompt. Agent.

Und immer wieder, bis Sie den Fehler endlich beseitigt haben.

Unabhängig vom verwendeten Browser oder den Tools besteht der Debugging-Workflow aus vielen Klicks, Werkzeugen und Fensterwechseln für eine einzige Korrektur, aber das muss nicht so sein. Wenn Sie bereits Agents in Ihrem Entwicklungsworkflow verwenden, macht der Safari MCP-Server Ihre Fehlersuche schneller und effizienter.

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

Webentwicklung in Safari. Wenn Sie das nächste Mal in Safari entwickeln, profitieren Sie von einem verbesserten Workflow. Ihr Agent hilft Ihnen bereits bei Ihrem Code, jetzt kann er noch mehr tun, indem er überprüft, wie Ihr Code tatsächlich in Safari gerendert wird.

Verbesserung der Kompatibilität mit Safari. Nur in einem Browser zu testen bedeutet, potenzielle Fehler in einem anderen zu übersehen und diesen Benutzern eine minderwertige Erfahrung zu bieten. Mit dem Safari MCP-Server kann Ihr Agent Ihre Website in Safari öffnen, berechnete Stile überprüfen, das Layout prüfen und es mit Ihren Erwartungen vergleichen, ohne das Fenster wechseln zu müssen.

Leistungsanalyse. Sehen Sie, welche Teile Ihrer Website die Dinge verlangsamen. Der Safari MCP-Server ermöglicht es Ihrem Agent, JavaScript auf der Seite auszuwerten, um Leistungsmetriken wie Navigations-Timing und Ressourcenladezeiten anzuzeigen, sodass er genau erkennen kann, was Ihre Website verlangsamt, und an der richtigen Lösung arbeiten kann.

Überprüfung der Barrierefreiheit. Der Safari MCP-Server ermöglicht es Ihrem Agent, nach häufigen Barrierefreiheitsproblemen wie fehlenden Labels, falschen ARIA-Attributen und schlechtem Kontrast zu suchen, sodass Sie Probleme erkennen können, die Ihre Benutzer beeinträchtigen.

Überprüfung eines beliebigen Benutzerstatus. Stellen Sie sicher, dass die Seite funktioniert und so aussieht, wie sie sollte. Ihr Agent kann den Status des Formulars überprüfen, ein Element mit einem Selektor abfragen, bestimmte Interaktionen bestätigen, verschiedene Zustände eines Checkout-Ablaufs anzeigen und vieles mehr. Verbringen Sie weniger Zeit mit diesen manuellen Überprüfungen und befähigen Sie den Agent, dies für Sie zu tun.

Dies sind nur einige der Anwendungsfälle. Wie auch immer Sie sich für die Implementierung entscheiden, der Safari MCP-Server hilft Ihrem Agent, mehr für Sie zu tun und das ganze Hin und Her zu reduzieren, das die Webentwicklung oft erfordert. Ein einfacherer Workflow bedeutet mehr behobene Fehler, zufriedenere Benutzer und ein besseres Produkt.

Die Werkzeuge

Hier sind die verfügbaren Werkzeuge und ihre Funktionen:

Werkzeug	Beschreibung
browser_console_messages	Gibt gepufferte Konsolenprotokolle für den aktuellen oder einen angegebenen Tab zurück
browser_dialogs	Listet Browser-Dialoge auf und reagiert darauf (akzeptieren, verwerfen oder Texteingabe für JS-Prompts)
close_tab	Schließt einen Browser-Tab anhand seines Handles
create_tab	Erstellt einen neuen Browser-Tab und lädt optional eine 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 den Textinhalt einer Seite in verschiedenen Formaten (Markdown, HTML, JSON usw.)
list_network_requests	Listet Zusammenfassungen von Netzwerkanfragen (URL, Methode, Status, Timing) für den aktuellen Tab
list_tabs	Listet alle geöffneten 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 zur aktuellen Seite ab: URL, Titel und Ladestatus
page_interactions	Führt DOM-Interaktionen nacheinander aus: Klicken, Tippen, Scrollen, Hovern, Tastendruck usw.
screenshot	Erstellt einen Screenshot der aktuellen Seite als PNG
set_emulated_media	Emuliert einen CSS-Medientyp (z. B. „print“) für Tests des responsiven Designs
set_viewport_size	Legt die Größe des Browser-Viewports in CSS-Pixeln fest
switch_tab	Wechselt zu einem anderen Browser-Tab anhand seines Handles
wait_for_navigation	Wartet, bis die aktuelle Seite vollständig geladen ist; gibt die endgültige URL und den Titel zurück

Mit dem Safari MCP-Server müssen Sie nicht mehr den perfekten Prompt schreiben und Ihrem Agent sorgfältig beschreiben, was Sie im Browser erleben. Sie können Ihrem Agent die Fähigkeit geben, es selbst herauszufinden.

Erste Schritte

Zuerst müssen Sie die Safari Technology Preview installieren. Stellen Sie nach der Installation sicher, dass Sie Safari-Einstellungen > Erweitert > Funktionen für Webentwickler anzeigen aktivieren. Gehen Sie dann zu Safari-Einstellungen > Entwickler > Remote-Automatisierung und externe Agents aktivieren.

Wenn Sie Claude verwenden, können Sie den folgenden Befehl in Ihrem Terminal ausführen:

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

Wenn Sie Codex verwenden, können Sie den folgenden Befehl in Ihrem Terminal ausführen:

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

Für andere Agents können Sie Folgendes in Ihre mcp.json oder config.json einfügen:

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

Beachten Sie, dass der obige Code den Server zwar safari-mcp-stp nennt, Sie ihn aber beliebig benennen können, auch einfach safari. Sobald Sie den Safari MCP-Server installiert haben, versuchen Sie einen der folgenden Prompts:

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

Obwohl jeder Agent etwas anders funktioniert, sollte er nicht explizit angewiesen werden müssen, den Safari MCP-Server zu verwenden – er wird es selbst herausfinden. Einfache Prompts wie die obigen reichen aus, um das MCP zu starten.

So könnte eine Konversation mit einem Agent aussehen, der den Safari MCP-Server verwendet:

Sie: Ich habe einen Fehlerbericht erhalten – etwas ist in Safari auf der Flugseite kaputt. Können Sie herausfinden, was los ist?

Agent: Klar, lassen Sie mich einen Blick darauf werfen.

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

Sie: Ja. Gibt es hier noch etwas anderes, das Safari-Benutzern Probleme bereiten könnte?

Agent: Ja, zwei weitere Dinge sind erwähnenswert. Die Animation zur Ergebnisanzeige ist stillschweigend defekt und die API-Server-Startmeldung ist falsch. Soll ich mich um beides kümmern?

Alles, was Sie brauchen, ist eine erste Anfrage, um loszulegen, und mit Hilfe des Safari MCP-Servers kann Ihr Agent von dort aus übernehmen.

Der Safari MCP-Server läuft vollständig auf Ihrem lokalen Rechner und führt keine eigenen Netzwerkaufrufe durch. Er hat auch keinen Zugriff auf Ihre persönlichen Daten in Safari (z. B. AutoFill oder andere Browseraktivitäten). Wenn er Seiteninhalte, Screenshots oder Konsolenprotokolle erfasst, gehen diese Daten direkt an den von Ihnen ausgeführten Agent – nicht an Apple. Was von dort aus mit diesen Daten geschieht, hängt von dem von Ihnen verwendeten Agent und Modell ab. Wie bei jedem Agent, dem Sie Zugriff auf Ihren Browser gewähren, verwenden Sie nur solche, denen Sie vertrauen.

Warum wir das entwickelt haben

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

Mit dieser Ressource hoffen wir, das Testen und Debuggen in Safari einfacher denn je zu machen, indem wir Ihrem Agent helfen zu verstehen, wie die Dinge im Browser aussehen und funktionieren.

Wenn Sie es ausprobieren oder dies Ihre erste Erfahrung mit einem MCP-Server ist, lassen Sie uns wissen, was Sie denken.

Finden Sie uns online: Saron Yitbarek auf BlueSky, Jen Simmons auf Bluesky / Mastodon und Jon Davis auf Bluesky / Mastodon. Wenn Sie auf Probleme stoßen, reichen Sie einen WebKit-Fehlerbericht ein. Das Melden von Problemen macht wirklich einen Unterschied.