Safari MCP

Memperkenalkan server Safari MCP untuk pengembang web

1 Jul 2026

oleh Saron Yitbarek

Di Safari Technology Preview 247, kami memperkenalkan server Safari MCP — server Model Context Protocol untuk pengembang web yang membuat alur kerja pengembangan dan debugging web Anda lebih cepat dan lebih bertenaga. Kami tahu agen semakin integral dalam 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.

Setiap klien 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 otonom, seperti akses ke DOM, permintaan jaringan, tangkapan layar, dan keluaran konsol.

Ini mempercepat proses debugging Anda dan memungkinkan Anda tetap nyaman di terminal Anda, yang berarti lebih sedikit putaran 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 memburunya. Anda mengklik tab gaya. 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 melakukan perbaikan untuk Anda. Semoga itu benar, bug teratasi, dan Anda dapat melanjutkan.

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

Dan lagi dan lagi, sampai Anda akhirnya memberantas bug.

Terlepas dari browser atau alat yang Anda gunakan, alur kerja debugging melibatkan banyak klik, alat, dan perpindahan jendela untuk membuat 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 apa yang dapat dibantu:

Pengembangan web di Safari. Lain kali Anda mengembangkan di Safari, Anda akan mendapat 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.

Tingkatkan kompatibilitas dengan Safari. Menguji hanya di satu browser berarti melewatkan potensi bug di browser lain, memberikan pengalaman yang kurang optimal bagi pengguna tersebut. Dengan server Safari MCP, agen Anda dapat membuka situs Anda di Safari, memeriksa gaya terkomputasi, memeriksa tata letak, dan membandingkannya dengan apa yang Anda harapkan tanpa berpindah jendela.

Analisis 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 menentukan apa yang memperlambat situs Anda dan mengerjakan perbaikan yang tepat.

Periksa 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 berdampak pada pengguna Anda.

Verifikasi setiap status pengguna. Ketahui bahwa halaman berfungsi dan terlihat sebagaimana mestinya. Agen Anda dapat memeriksa status formulir, menanyakan elemen menggunakan pemilih, mengonfirmasi interaksi tertentu, menunjukkan 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. Bagaimanapun Anda memutuskan untuk mengimplementasikannya, server Safari MCP membantu agen Anda melakukan lebih banyak untuk Anda dan mengurangi semua bolak-balik yang sering diperlukan pengembangan web. Alur kerja yang lebih mudah berarti lebih banyak bug teratasi, pengguna yang lebih bahagia, dan produk yang lebih baik.

Alat-alatnya

Berikut adalah alat yang tersedia dan apa yang mereka lakukan:

Alat	Deskripsi
browser_console_messages	Mengembalikan log konsol yang di-buffer untuk tab saat ini atau yang ditentukan
browser_dialogs	Mencantumkan dan merespons dialog browser (terima, tolak, atau masukkan teks untuk prompt JS)
close_tab	Menutup tab browser dengan handlenya
create_tab	Membuat tab browser baru, secara 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, waktu)
get_page_content	Mengekstrak konten teks halaman dalam berbagai format (markdown, HTML, JSON, dll.)
list_network_requests	Mencantumkan ringkasan permintaan jaringan (URL, metode, status, waktu) untuk tab saat ini
list_tabs	Mencantumkan 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	Menangkap tangkapan layar halaman saat ini sebagai PNG
set_emulated_media	Meniru jenis media CSS (mis. “print”) untuk pengujian desain responsif
set_viewport_size	Mengatur ukuran viewport browser dalam piksel CSS
switch_tab	Beralih ke tab browser yang berbeda dengan handlenya
wait_for_navigation	Menunggu halaman saat ini selesai dimuat; mengembalikan URL dan judul akhir

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

Cara memulai

Pertama, Anda perlu menginstal Safari Technology Preview. Setelah terinstal, pastikan Anda mengaktifkan Pengaturan Safari > Lanjutan > Tampilkan fitur untuk pengembang web. Lalu buka Pengaturan Safari > Pengembang > Aktifkan otomatisasi 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 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 lihat.

Agen: Saya menemukan dua bug berbeda di halaman penerbangan di Safari. Ingin saya perbaiki keduanya?

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

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

Yang Anda butuhkan hanyalah permintaan awal untuk memulai, dan dengan bantuan server Safari MCP, agen Anda dapat mengambil alih 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 (mis. IsiOtomatis atau aktivitas browser lainnya). Ketika ia menangkap konten halaman, tangkapan layar, atau log konsol, data itu langsung menuju ke agen yang Anda jalankan — bukan ke Apple. Apa yang terjadi pada data itu dari sana 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 apa-apa.

Dengan menciptakan sumber daya ini, kami berharap dapat mempermudah pengujian dan debugging di Safari dengan membantu agen Anda memahami bagaimana hal-hal terlihat dan bekerja di browser.

Jika Anda akhirnya mencobanya atau jika ini 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.