Safari MCP

Pembaruan: Di Safari 27 dan Safari Technology Preview 247, kami memperkenalkan server Safari MCP — server Model Context Protocol untuk pengembang web yang membuat alur kerja pengembangan dan debugging Anda lebih cepat dan lebih kuat. Kami tahu bahwa agen semakin menjadi bagian integral dari proses pengkodean, dan server Safari MCP memberi agen Anda kemampuan untuk mengetahui bagaimana kode Anda benar-benar dirender di browser dengan menghubungkannya ke jendela browser Safari.

Klien apa pun yang kompatibel dengan MCP dapat terhubung ke server Safari MCP. Dengan menghubungkan agen Anda ke jendela browser Safari, agen Anda dapat meniru apa yang dialami pengguna Anda, memberinya informasi yang dibutuhkan untuk melakukan debug secara lebih mandiri, seperti akses ke DOM, permintaan jaringan, tangkapan layar, dan output konsol.

Ini mempercepat proses debugging Anda dan memungkinkan Anda tetap nyaman di terminal, yang berarti lebih sedikit bolak-balik berpindah jendela dan mengetik prompt untuk men-debug kode Anda.

Kasus penggunaan

Jika Anda membangun untuk web, maka Anda tahu tentang tarian debugging. Biasanya berjalan seperti ini:

Anda melihat sesuatu yang salah dengan situs Anda di browser. Anda membuka konsol untuk mencarinya. Anda mengklik tab styles. Anda melihat apa yang rusak. Anda kembali ke kode Anda untuk memperbaikinya. Atau mungkin Anda mengambil tangkapan layar, merinci masalahnya ke agen Anda, dan membiarkannya memperbaikinya untuk Anda. Semoga berhasil, bug diperbaiki, dan Anda dapat melanjutkan.

Tetapi ketika tidak diperbaiki, Anda melalui alur kerja lagi — Browser. Prompt. Agen.

Dan lagi dan lagi, sampai akhirnya Anda berhasil menghilangkan bug tersebut.

Terlepas dari browser atau alat yang Anda gunakan, alur kerja debugging membutuhkan banyak klik, alat, dan berpindah jendela untuk melakukan satu perbaikan, tetapi tidak harus seperti itu. Jika Anda sudah menggunakan agen dalam alur kerja pengembangan Anda, server Safari MCP membuat debugging Anda lebih cepat dan lebih efisien.

Server Safari MCP memungkinkan agen Anda melakukan lebih banyak debugging dan pemecahan masalah sendiri. Berikut adalah beberapa contoh saja yang dapat dibantu:

Pengembangan web di Safari. Lain kali Anda mengembangkan di Safari, Anda akan mendapatkan manfaat dari alur kerja yang ditingkatkan. Agen Anda sudah membantu Anda dengan kode Anda, sekarang ia dapat melakukan lebih banyak lagi dengan memeriksa bagaimana kode Anda benar-benar dirender di Safari.

Meningkatkan kompatibilitas dengan Safari. Menguji hanya di satu browser berarti melewatkan potensi bug di browser lain, memberikan pengalaman yang kurang baik bagi pengguna tersebut. Dengan server Safari MCP, agen Anda dapat membuka situs Anda di Safari, memeriksa gaya terhitung (computed styles), memeriksa tata letak, dan membandingkannya dengan yang Anda harapkan tanpa berpindah jendela.

Menganalisis kinerja. Lihat bagian mana dari situs Anda yang memperlambat segalanya. Server Safari MCP memungkinkan agen Anda mengevaluasi JavaScript di halaman untuk menampilkan metrik kinerja, seperti waktu navigasi dan waktu muat sumber daya, sehingga dapat menunjukkan apa yang memperlambat situs Anda dan mengerjakan perbaikan yang tepat.

Memeriksa aksesibilitas. Server Safari MCP memungkinkan agen Anda memeriksa masalah aksesibilitas umum seperti label yang hilang, atribut ARIA yang tidak tepat, dan kontras yang buruk, sehingga Anda dapat menangkap masalah yang memengaruhi pengguna Anda.

Memverifikasi status pengguna apa pun. Ketahui bahwa halaman berfungsi dan tampil sebagaimana mestinya. Agen Anda dapat memeriksa status formulir, menanyakan elemen menggunakan selektor, mengonfirmasi interaksi tertentu, menampilkan status berbeda dari alur checkout, dan banyak lagi. Habiskan lebih sedikit waktu untuk pemeriksaan manual ini dan berdayakan agen untuk melakukannya untuk Anda.

Ini hanyalah beberapa kasus penggunaan. Bagaimana pun Anda memutuskan untuk mengimplementasikannya, server Safari MCP membantu agen Anda melakukan lebih banyak untuk Anda dan mengurangi semua bolak-balik yang sering dibutuhkan pengembangan web. Alur kerja yang lebih mudah berarti lebih banyak bug yang dihilangkan, pengguna yang lebih bahagia, dan produk yang lebih baik.

Alat-alat

Berikut adalah alat yang tersedia dan fungsinya:

Alat	Deskripsi
browser_console_messages	Mengembalikan log konsol yang di-buffer untuk tab saat ini atau yang ditentukan
browser_dialogs	Mendaftar dan merespons dialog browser (terima, tolak, atau masukkan teks untuk prompt JS)
close_tab	Menutup tab browser berdasarkan handle-nya
create_tab	Membuat tab browser baru, opsional memuat URL
evaluate_javascript	Mengeksekusi kode JavaScript di dalam halaman dan mengembalikan hasilnya
get_network_request	Mendapatkan detail lengkap untuk satu permintaan jaringan yang direkam (header, body, timing)
get_page_content	Mengekstrak konten teks halaman dalam berbagai format (markdown, HTML, JSON, dll.)
list_network_requests	Mendaftar ringkasan permintaan jaringan (URL, metode, status, timing) untuk tab saat ini
list_tabs	Mendaftar semua tab browser yang terbuka dengan handle dan URL-nya
navigate_to_url	Menavigasi ke URL dan mengembalikan konten halaman yang dimuat
page_info	Mendapatkan info tentang halaman saat ini: URL, judul, dan status pemuatan
page_interactions	Melakukan interaksi DOM secara berurutan: klik, ketik, gulir, hover, keyPress, dll.
screenshot	Mengambil tangkapan layar halaman saat ini sebagai PNG
set_emulated_media	Meniru tipe media CSS (misalnya "print") untuk pengujian desain responsif
set_viewport_size	Mengatur ukuran viewport browser dalam piksel CSS
switch_tab	Berpindah ke tab browser yang berbeda berdasarkan handle-nya
wait_for_navigation	Menunggu halaman saat ini selesai dimuat; mengembalikan URL akhir dan judul

Dengan server Safari MCP, Anda tidak perlu lagi menulis prompt yang sempurna, dengan hati-hati menjelaskan kepada agen Anda apa yang Anda alami di browser. Anda dapat memberi agen Anda kemampuan untuk mengetahuinya sendiri.

Cara memulai

Safari 27

Pertama, Anda perlu menginstal Safari 27. Setelah terinstal, pastikan untuk mengaktifkan fitur pengembang web dan otomasi jarak jauh. Untuk mengaktifkan fitur untuk pengembang web, pilih Safari > Pengaturan > Lanjutan > centang kotak centang Tampilkan fitur untuk pengembang web. Kemudian buka Safari > Pengaturan > Pengembang > centang "Izinkan otomasi jarak jauh dan agen eksternal."

Jika Anda menggunakan Claude, Anda dapat menggunakan perintah berikut di terminal Anda:

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

Jika Anda menggunakan Codex, Anda dapat menggunakan perintah berikut di terminal Anda:

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

Untuk agen lain, Anda dapat meletakkan yang berikut di file mcp.json atau config.json Anda.

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

Safari Technology Preview

Pertama, Anda perlu menginstal Safari Technology Preview. Setelah terinstal, pastikan Anda mengaktifkan Pengaturan Safari > Lanjutan > Tampilkan fitur untuk pengembang web. Kemudian buka Pengaturan Safari > Pengembang > Aktifkan otomasi jarak jauh dan agen eksternal.

Jika Anda menggunakan Claude, Anda dapat menggunakan perintah berikut di terminal Anda:

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

Jika Anda menggunakan Codex, Anda dapat menggunakan perintah berikut di terminal Anda:

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

Untuk agen lain, Anda dapat meletakkan yang berikut di mcp.json atau config.json Anda:

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

Perhatikan bahwa meskipun kode di atas menamai server safari-mcp-stp, Anda dapat menamainya sesuka Anda, bahkan hanya safari. Setelah Anda menginstal server Safari MCP, coba salah satu prompt berikut:

Find bugs on my site in Safari

How accessible is my site in Safari?

See how my website performs in Safari

Meskipun setiap agen bekerja sedikit berbeda, ia seharusnya tidak perlu diberi tahu untuk menggunakan server Safari MCP secara eksplisit — ia akan mengetahuinya sendiri. Prompt sederhana seperti di atas sudah cukup untuk memulai MCP.

Berikut adalah bagaimana percakapan dengan agen yang menggunakan server Safari MCP mungkin berlangsung:

Anda: Ada laporan bug — sesuatu rusak di Safari di halaman penerbangan. Bisakah Anda mencari tahu apa yang terjadi?

Agen: Tentu, biarkan saya melihatnya.

Agen: Saya menemukan dua bug yang berbeda di halaman penerbangan di Safari. Apakah Anda ingin saya memperbaiki keduanya?

Anda: Ya. Adakah hal lain di sini yang mungkin menyebabkan masalah bagi pengguna Safari?

Agen: Ya, dua hal lagi yang perlu ditandai. Animasi pengungkapan hasil (reveal animation) rusak secara diam-diam dan log startup server API salah. Haruskah saya menangani keduanya juga?

Yang Anda butuhkan hanyalah permintaan awal untuk memulai, dan dengan bantuan server Safari MCP, agen Anda dapat melanjutkannya dari sana.

Server Safari MCP berjalan sepenuhnya di mesin lokal Anda dan tidak melakukan panggilan jaringan sendiri. Ia juga tidak memiliki akses ke informasi pribadi Anda di Safari (misalnya AutoFill atau aktivitas browser lainnya). Ketika ia menangkap konten halaman, tangkapan layar, atau log konsol, data tersebut langsung masuk ke agen yang Anda jalankan — bukan ke Apple. Apa yang terjadi pada data tersebut selanjutnya tergantung pada agen dan model yang Anda gunakan. Seperti halnya agen apa pun yang Anda beri akses ke browser Anda, hanya gunakan yang Anda percayai.

Mengapa kami membangun ini

Ada banyak cara untuk membangun untuk web, baik dengan maupun tanpa AI. Jika AI adalah bagian dari alur kerja Anda, kami pikir alat ini akan membantu membuatnya lebih produktif. Dan jika tidak, itu juga tidak masalah.

Dengan membuat sumber daya ini, kami berharap dapat memudahkan Anda untuk menguji dan men-debug di Safari dengan membantu agen Anda memahami bagaimana hal-hal terlihat dan bekerja di browser.

Jika Anda akhirnya mencobanya atau jika ini adalah pertama kalinya Anda menggunakan server MCP, beri tahu kami pendapat Anda.

Temukan kami secara online: Saron Yitbarek di Bluesky, Jen Simmons di Bluesky / Mastodon, dan Jon Davis di Bluesky / Mastodon. Jika Anda mengalami masalah, ajukan laporan bug WebKit. Mengajukan masalah benar-benar membuat perbedaan.