Safari MCP

Mise à jour : Dans Safari 27 et Safari Technology Preview 247, nous introduisons le serveur Safari MCP — un serveur Model Context Protocol destiné aux développeurs web qui rend votre flux de travail de développement et de débogage plus rapide et plus puissant. Nous savons que les agents font de plus en plus partie intégrante du processus de codage, et le serveur Safari MCP donne à votre agent la capacité de savoir comment votre code se rend réellement dans le navigateur en le connectant à une fenêtre de navigateur Safari.

Tout client compatible MCP peut se connecter au serveur Safari MCP. En connectant votre agent à une fenêtre de navigateur Safari, votre agent peut émuler ce que vivent vos utilisateurs, ce qui lui donne les informations nécessaires pour déboguer de manière plus autonome, comme l’accès au DOM, aux requêtes réseau, aux captures d’écran et à la sortie de la console.

Cela accélère votre processus de débogage et vous permet de rester dans le confort de votre terminal, ce qui signifie moins d’allers-retours entre les fenêtres et moins de saisie d’invites pour déboguer votre code.

Les cas d’utilisation

Si vous développez pour le web, vous connaissez la danse du débogage. Cela ressemble généralement à ceci :

Vous voyez quelque chose qui ne va pas sur votre site dans le navigateur. Vous ouvrez la console pour le traquer. Vous cliquez dans l’onglet des styles. Vous voyez ce qui est cassé. Vous revenez à votre code pour le corriger. Ou peut-être prenez-vous une capture d’écran, détaillez le problème à votre agent et le laissez faire la correction pour vous. Espérons qu’il réussisse, que le bug soit corrigé et que vous puissiez passer à autre chose.

Mais quand ce n’est pas corrigé, vous refaites le flux de travail — Navigateur. Invite. Agent.

Et encore et encore, jusqu’à ce que vous écrasiez enfin le bug.

Quel que soit le navigateur ou les outils que vous utilisez, le flux de travail de débogage implique beaucoup de clics, d’outils et de sauts de fenêtres pour effectuer une seule correction, mais cela ne doit pas être ainsi. Si vous utilisez déjà des agents dans votre flux de développement, le serveur Safari MCP rend votre débogage plus rapide et plus efficace.

Le serveur Safari MCP permet à votre agent de faire davantage de débogage et de dépannage par lui-même. Voici quelques exemples de ce avec quoi il peut aider :

Développement web dans Safari. La prochaine fois que vous développerez dans Safari, vous bénéficierez d’un flux de travail amélioré. Votre agent vous aide déjà avec votre code, maintenant il peut faire encore plus en vérifiant comment votre code se rend réellement dans Safari.

Améliorer la compatibilité avec Safari. Tester dans un seul navigateur signifie manquer des bugs potentiels dans un autre, offrant à ces utilisateurs une expérience médiocre. Avec le serveur Safari MCP, votre agent peut ouvrir votre site dans Safari, inspecter les styles calculés, vérifier la mise en page et la comparer à ce que vous attendez sans changer de fenêtre.

Analyser les performances. Voyez quelles parties de votre site ralentissent les choses. Le serveur Safari MCP permet à votre agent d’évaluer du JavaScript sur la page pour faire ressortir des métriques de performance, comme le timing de navigation et les temps de chargement des ressources, afin qu’il puisse identifier ce qui ralentit votre site et travailler sur la bonne correction.

Vérifier l’accessibilité. Le serveur Safari MCP permet à votre agent de vérifier les problèmes d’accessibilité courants comme les étiquettes manquantes, les attributs ARIA incorrects et le mauvais contraste, afin que vous puissiez détecter les problèmes qui affectent vos utilisateurs.

Vérifier n’importe quel état utilisateur. Sachez que la page fonctionne et apparaît comme elle le devrait. Votre agent peut vérifier l’état du formulaire, interroger un élément à l’aide d’un sélecteur, confirmer des interactions spécifiques, afficher différents états d’un flux de paiement, et plus encore. Passez moins de temps sur ces vérifications manuelles et donnez à l’agent le pouvoir de le faire pour vous.

Ce ne sont que quelques exemples de cas d’utilisation. Quelle que soit la façon dont vous décidez de l’implémenter, le serveur Safari MCP aide votre agent à faire plus pour vous et à réduire tous les allers-retours que le développement web exige souvent. Un flux de travail plus facile signifie plus de bugs écrasés, des utilisateurs plus satisfaits et un meilleur produit.

Les outils

Voici les outils disponibles et ce qu’ils font :

Outil	Description
browser_console_messages	Renvoie les journaux de console mis en mémoire tampon pour l’onglet actuel ou spécifié
browser_dialogs	Liste et répond aux boîtes de dialogue du navigateur (accepter, rejeter ou saisir du texte pour les invites JS)
close_tab	Ferme un onglet du navigateur par son identifiant
create_tab	Crée un nouvel onglet du navigateur, en chargeant éventuellement une URL
evaluate_javascript	Exécute du code JavaScript dans la page et renvoie le résultat
get_network_request	Obtient le détail complet d’une seule requête réseau enregistrée (en-têtes, corps, timing)
get_page_content	Extrait le contenu textuel d’une page dans divers formats (markdown, HTML, JSON, etc.)
list_network_requests	Liste les résumés des requêtes réseau (URL, méthode, statut, timing) pour l’onglet actuel
list_tabs	Liste tous les onglets ouverts du navigateur avec leurs identifiants et URLs
navigate_to_url	Navigue vers une URL et renvoie le contenu de la page chargée
page_info	Obtient des informations sur la page actuelle : URL, titre et état de chargement
page_interactions	Effectue des interactions DOM en séquence : clic, saisie, défilement, survol, pression de touche, etc.
screenshot	Capture une capture d’écran de la page actuelle au format PNG
set_emulated_media	Émule un type de média CSS (par exemple « print ») pour les tests de conception réactive
set_viewport_size	Définit la taille de la fenêtre d’affichage du navigateur en pixels CSS
switch_tab	Passe à un autre onglet du navigateur par son identifiant
wait_for_navigation	Attend que la page actuelle finisse de charger ; renvoie l’URL finale et le titre

Avec le serveur Safari MCP, vous n’avez plus à écrire l’invite parfaite, décrivant soigneusement à votre agent ce que vous vivez dans le navigateur. Vous pouvez donner à votre agent la capacité de le découvrir par lui-même.

Comment commencer

Safari 27

Tout d’abord, vous devrez installer Safari 27. Une fois installé, assurez-vous d’activer les fonctionnalités de développement web et l’automatisation à distance. Pour activer les fonctionnalités pour les développeurs web, choisissez Safari > Réglages > Avancé > cochez la case Afficher les fonctionnalités pour les développeurs web. Ensuite, allez dans Safari > Réglages > Développement > cochez « Autoriser l’automatisation à distance et les agents externes ».

Si vous utilisez Claude, vous pouvez utiliser la commande suivante dans votre terminal :

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

Si vous utilisez Codex, vous pouvez utiliser la commande suivante dans votre terminal :

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

Pour d’autres agents, vous pouvez placer ce qui suit dans votre fichier mcp.json ou config.json.

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

Safari Technology Preview

Tout d’abord, vous devrez installer Safari Technology Preview. Une fois installé, assurez-vous d’activer Safari Réglages > Avancé > Afficher les fonctionnalités pour les développeurs web. Ensuite, allez dans Safari Réglages > Développement > Activer l’automatisation à distance et les agents externes.

Si vous utilisez Claude, vous pouvez utiliser la commande suivante dans votre terminal :

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

Si vous utilisez Codex, vous pouvez utiliser la commande suivante dans votre terminal :

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

Pour d’autres agents, vous pouvez placer ce qui suit dans votre mcp.json ou config.json :

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

Notez que bien que le code ci-dessus nomme le serveur safari-mcp-stp, vous pouvez le nommer comme vous le souhaitez, même simplement safari. Une fois le serveur Safari MCP installé, essayez l’une des invites suivantes :

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

Bien que chaque agent fonctionne un peu différemment, il ne devrait pas avoir besoin qu’on lui dise d’utiliser explicitement le serveur Safari MCP — il le comprendra de lui-même. Des invites simples comme celles ci-dessus suffisent pour lancer le MCP.

Voici comment une conversation avec un agent utilisant le serveur Safari MCP pourrait se dérouler :

Vous : J’ai reçu un rapport de bug — quelque chose est cassé dans Safari sur la page des vols. Pouvez-vous comprendre ce qui se passe ?

Agent : Bien sûr, laissez-moi jeter un œil.

Agent : J’ai trouvé deux bugs distincts sur la page des vols dans Safari. Voulez-vous que je les corrige tous les deux ?

Vous : Oui. Y a-t-il autre chose ici qui pourrait causer des problèmes aux utilisateurs de Safari ?

Agent : Oui, deux autres choses à signaler. L’animation de révélation des résultats est silencieusement cassée et le journal de démarrage du serveur API est incorrect. Dois-je m’attaquer aux deux également ?

Tout ce dont vous avez besoin est une demande initiale pour commencer, et avec l’aide du serveur Safari MCP, votre agent peut prendre le relais à partir de là.

Le serveur Safari MCP fonctionne entièrement sur votre machine locale et n’effectue aucun appel réseau de son propre chef. Il n’a pas non plus accès à vos informations personnelles dans Safari (par exemple AutoFill ou d’autres activités du navigateur). Lorsqu’il capture le contenu de la page, des captures d’écran ou des journaux de console, ces données vont directement à l’agent que vous exécutez — pas à Apple. Ce qui arrive à ces données à partir de là dépend de l’agent et du modèle que vous utilisez. Comme avec tout agent auquel vous donnez accès à votre navigateur, n’utilisez que ceux en qui vous avez confiance.

Pourquoi nous avons construit cela

Il existe de nombreuses façons de développer pour le web, avec ou sans IA. Si l’IA fait partie de votre flux de travail, nous pensons que cet outil aidera à le rendre encore plus productif. Et si ce n’est pas le cas, ce n’est pas grave non plus.

En créant cette ressource, nous espérons faciliter plus que jamais les tests et le débogage dans Safari en aidant votre agent à comprendre comment les choses apparaissent et fonctionnent dans le navigateur.

Si vous finissez par l’essayer ou si c’est votre première fois avec un serveur MCP, faites-nous savoir ce que vous en pensez.

Retrouvez-nous en ligne : Saron Yitbarek sur Bluesky, Jen Simmons sur Bluesky / Mastodon, et Jon Davis sur Bluesky / Mastodon. Si vous rencontrez des problèmes, déposez un rapport de bug WebKit. Déposer des problèmes fait vraiment une différence.