Server Safari MCP untuk Pengembang Web

 (webkit.org)
1 poin oleh GN⁺ 5 jam lalu | 2 komentar | Bagikan ke WhatsApp
  • Server Safari MCP menghubungkan agen coding ke jendela Safari yang sebenarnya, sehingga bisa langsung memeriksa kondisi yang terlihat di browser saat pengembangan dan debugging web
  • Agen dapat mengakses DOM, permintaan jaringan, tangkapan layar, dan output konsol untuk memeriksa hasil rendering serta pengalaman pengguna yang sulit diketahui hanya dari kode
  • Ini mengurangi beban perpindahan jendela berulang dan penjelasan prompt yang panjang pada pekerjaan yang sangat dipengaruhi perbedaan antar-browser, seperti kompatibilitas Safari, performa, aksesibilitas, serta verifikasi status formulir dan checkout
  • Menyediakan alat untuk kontrol tab, navigasi URL, eksekusi JavaScript, pemeriksaan permintaan jaringan, ekstraksi konten halaman, interaksi DOM, tangkapan layar, serta emulasi viewport dan media
  • Server hanya berjalan di mesin lokal dan tidak melakukan panggilan jaringan sendiri, tetapi data halaman yang ditangkap dikirim langsung ke agen yang dijalankan pengguna, sehingga perlu memakai agen yang tepercaya

Peran Server Safari MCP

  • Server Safari MCP ditambahkan ke Safari Technology Preview 247
  • Ini adalah server Model Context Protocol untuk pengembang web yang menghubungkan agen ke jendela browser Safari
  • Agen dapat memeriksa bagaimana kode benar-benar dirender di browser, sehingga mengurangi kesenjangan antara analisis kode dan pemeriksaan kondisi browser
  • Klien yang kompatibel dengan MCP dapat terhubung ke Server Safari MCP
  • Agen yang terhubung dapat mereproduksi dengan lebih dekat kondisi yang dilihat pengguna di browser
    • akses DOM
    • akses permintaan jaringan
    • akses tangkapan layar
    • akses output konsol

Cara mengurangi siklus debugging berulang

  • Debugging web pada umumnya mengulang alur melihat masalah di browser, memeriksa konsol dan tab style, lalu kembali ke kode untuk memperbaiki
  • Bahkan saat memakai agen, pengguna tetap harus mengambil tangkapan layar, menjelaskan masalah, lalu bolak-balik lagi antara browser, prompt, dan agen jika perbaikannya belum cukup
  • Server Safari MCP memungkinkan agen memeriksa kondisi browser secara langsung, sehingga mengurangi perpindahan jendela dan beban menulis prompt yang detail
  • Meski pengguna tidak menjelaskan situasi dengan prompt yang sempurna, agen dapat melanjutkan pekerjaan berikutnya berdasarkan informasi yang bisa diperiksa di Safari

Kasus penggunaan utama

  • Pengembangan web di Safari

    • Agen dapat memeriksa bukan hanya kode, tetapi juga hasil rendering aktual di Safari

  • Meningkatkan kompatibilitas Safari

    • Jika pengujian hanya dilakukan di satu browser, bug potensial di browser lain bisa terlewat
    • Agen dapat membuka situs di Safari dan memeriksa computed style, layout, serta perbedaan dari perilaku yang diharapkan

  • Analisis performa

    • Dengan mengevaluasi JavaScript di halaman, agen dapat menampilkan metrik performa seperti navigation timing dan resource load time
    • Jika bagian yang memperlambat situs ditemukan, target perbaikannya jadi lebih mudah dipersempit

  • Pemeriksaan aksesibilitas

    • Agen dapat memeriksa masalah aksesibilitas umum seperti label yang hilang, atribut ARIA yang tidak tepat, dan contrast yang rendah

  • Verifikasi status pengguna

    • Agen dapat memeriksa status formulir, mencari elemen dengan selector, memverifikasi interaksi tertentu, dan menampilkan berbagai status dalam alur checkout

Alat yang disediakan

  • browser_console_messages: mengembalikan log konsol yang dibuffer dari tab saat ini atau tab tertentu
  • browser_dialogs: melihat daftar dialog browser dan menangani respons
    • mendukung accept, dismiss, dan input teks untuk JavaScript prompt
  • create_tab, close_tab, switch_tab, list_tabs: membuat, menutup, berpindah, dan melihat daftar tab browser
  • navigate_to_url: berpindah ke URL dan mengembalikan konten halaman yang sudah dimuat
  • page_info: memeriksa URL, title, dan loading state halaman saat ini
  • evaluate_javascript: menjalankan kode JavaScript di dalam halaman dan mengembalikan hasilnya
  • list_network_requests: melihat ringkasan permintaan jaringan pada tab saat ini
    • mencakup URL, method, status, dan timing
  • get_network_request: melihat informasi detail dari satu permintaan jaringan
    • mencakup headers, body, dan timing
  • get_page_content: mengekstrak konten teks halaman dalam berbagai format seperti markdown, HTML, dan JSON
  • page_interactions: menjalankan interaksi DOM seperti click, type, scroll, hover, dan keyPress secara berurutan
  • screenshot: menangkap halaman saat ini sebagai tangkapan layar PNG
  • set_emulated_media: mengemulasikan CSS media type seperti print untuk pengujian responsive design
  • set_viewport_size: mengatur ukuran viewport browser dalam satuan CSS pixel
  • wait_for_navigation: menunggu halaman saat ini selesai dimuat dan mengembalikan URL serta title akhir

Cara memulai

  • Pertama, Anda harus menginstal Safari Technology Preview
  • Setelah instalasi, aktifkan opsi berikut di pengaturan Safari
    • Safari Settings > Advanced > Show features for web developers
    • Safari Settings > Developer > Enable remote automation and external agents
  • Jika menggunakan Claude, Anda dapat memakai perintah berikut di terminal
claude mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
  • Jika menggunakan Codex, Anda dapat memakai perintah berikut
codex mcp add safari-mcp-stp -- "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver" --mcp
  • Untuk agen lain, Anda dapat menambahkan konfigurasi berikut ke mcp.json atau config.json
"safari-mcp-stp": {  
  "command": "/Applications/Safari Technology Preview.app/Contents/MacOS/safaridriver",  
  "args": ["--mcp"]  
}
  • Contoh di atas memakai nama server safari-mcp-stp, tetapi Anda bisa memakai nama lain seperti safari

Prompt dan perilaku agen

  • Setelah instalasi, Anda bisa mulai dengan prompt sederhana seperti berikut
Find bugs on my site in Safari  

How accessible is my site in Safari?  

See how my website performs in Safari
  • Cara kerja tiap agen sedikit berbeda, tetapi meski tidak diminta secara eksplisit untuk memakai Server Safari MCP, agen bisa menggunakannya sendiri
  • Dalam alur contoh, saat pengguna menanyakan bug pada flight page di Safari, agen menemukan dua bug dan memeriksa tambahan hal-hal yang bisa menimbulkan masalah bagi pengguna Safari
  • Hanya dengan permintaan awal, agen dapat melanjutkan pemeriksaan lanjutan dan identifikasi masalah dengan bantuan Server Safari MCP

Eksekusi lokal dan pemrosesan data

  • Server Safari MCP berjalan sepenuhnya di mesin lokal
  • Tidak melakukan panggilan jaringan sendiri
  • Tidak mengakses informasi pribadi Safari
    • AutoFill
    • aktivitas browser lainnya
  • Saat konten halaman, tangkapan layar, atau log konsol ditangkap, data tersebut dikirim langsung bukan ke Apple, melainkan ke agen yang sedang dijalankan pengguna
  • Cara data itu diproses setelahnya bergantung pada agen dan model yang digunakan
  • Sama seperti agen lain yang diberi izin akses browser, Anda hanya boleh memakai agen yang Anda percayai

Pemanfaatan yang diharapkan WebKit

  • Dalam pengembangan web, ada alur yang memakai AI dan ada juga yang tidak
  • Jika AI menjadi bagian dari alur pengembangan, Server Safari MCP dapat membantu meningkatkan produktivitas
  • Tujuannya adalah membantu agen memahami tampilan dan perilaku di browser Safari, sehingga pengujian dan debugging Safari menjadi lebih mudah
  • Jika ada masalah, Anda dapat mengirimkan isu melalui WebKit bug report

Bacaan terkait

2 komentar

 
shakespeares 1 jam lalu

Safari MCP ya.. rasanya jadi bernostalgia, haha
 
GN⁺ 5 jam lalu
Komentar Hacker News

  • Sejak November 2025 saya menggunakan server MCP DevTools resmi Chrome
    https://github.com/ChromeDevTools/chrome-devtools-mcp
    Sebelumnya saya memakai Chrome WebDriver, tetapi MCP lebih cepat dan fiturnya juga lebih banyak
    Saya meminta LLM untuk menguji halaman dengan MCP resmi Firefox guna memastikan apakah ini juga berjalan di Firefox
    https://github.com/mozilla/firefox-devtools-mcp
    Sekarang Safari juga akan saya tambahkan ke pengujian kompatibilitas

    • Saya penasaran apakah ada perbedaan antara ini dan menggunakan Playwright MCP dengan konfigurasi Chrome/Firefox
    • Kadang justru sebaliknya, alih-alih membiarkan LLM mengendalikan browser, saya ingin pekerjaan yang saya lakukan secara manual di browser terlihat oleh LLM
      Saya membuat MCP untuk mencakup kebutuhan itu

  • Federico Viticci membahas sedikit lebih rinci apa arti semua ini di MacStories, Mastodon, dan episode terbaru podcast Connected, dan penjelasannya juga lebih mudah diakses oleh orang awam
    Tautan yang ada di tulisan aslinya juga sangat layak untuk dilihat
    https://www.macstories.net/linked/safaris-new-mcp-server-is-...
    https://mastodon.macstories.net/@viticci/116847167023618099
    https://relay.fm/connected/610

  • Saya sangat menantikannya bukan hanya untuk pengujian, tetapi juga untuk pekerjaan sehari-hari
    Jika agen bisa melakukan otomatisasi browser secara alami di browser tempat saya sudah login, rasanya serah-terima antara saya dan agen akan jauh lebih mulus
    Ini juga karena Chrome cukup boros baterai, jadi saya selama ini memakai Safari sebagai browser utama

    • Saya sedang membuat Hyperia, dan panel web berbasis Electron di dalamnya bisa sepenuhnya dikendalikan agen untuk melakukan hal-hal yang cukup ekstrem: https://github.com/deepbluedynamics/hyperia
      Saya juga memakai orkestrator kontainer agen, dan ada alat MCP yang mengekspos port kontainer sehingga hasil pekerjaan bisa ditampilkan di panel web: https://github.com/DeepBlueDynamics/nemesis8
      Hari ini saya berencana menambahkan koneksi Safari MCP ke n8, dan rilis baru dengan lebih banyak fitur dijadwalkan keluar malam ini
    • Saat membaca kalimat “Tidak mengakses data pribadi Safari, misalnya autofill atau aktivitas browser lainnya”, saya menafsirkannya sebagai berarti instans yang berinteraksi dengan agen tidak dalam keadaan login
    • Bagian “serah-terima antara saya dan agen akan lebih mulus” itu terasa menakutkan
      Dari sudut pandang layanan di sisi lain browser, tidak ada cara untuk mengetahui siapa yang melakukan apa
      Saya tidak tahu bagaimana agen dibatasi, atau bagaimana melacak apa yang saya lakukan dan apa yang dilakukan agen
      Saya penasaran apakah ada sesuatu yang saya lewatkan, atau saya memang sudah ketinggalan zaman

  • Secara pribadi saya merekomendasikan Playwright-CLI: https://github.com/microsoft/playwright-cli
    Bagi saya ini berjalan jauh lebih cepat daripada server MCP yang pernah saya coba

    • Jika Anda memerlukan sesi browser yang persisten, ada juga spel(https://github.com/Blockether/spel)
      Mendukung mesin Chromium, Firefox, dan WebKit melalui daemon
    • Playwright sangat bagus untuk pengujian end-to-end dan juga cocok dengan Electron
      Hanya saja saya memakai Playwright MCP
    • Semua ini terasa berat bagi saya
      Ada browser penuh, protokol debug, dan dump DOM setiap kali dibaca; dibanding MCP atau CLI, yang lebih penting adalah apa yang ada di bawahnya
      Karena itu saya membuat biner Rust kecil yang langsung menjalankan webview sistem dan mengembalikan token status serta delta alih-alih DOM
      Bahkan saat memuat halaman depan HN, biayanya bagi agen hanya sekitar 50 token
      Mendukung MCP dan CLI sekaligus, jadi agen bisa memilih mana yang disukainya
      https://github.com/frane/vibesurfer

  • safaridriver yang disediakan Apple sudah ada sejak beberapa tahun lalu
    Ini menggunakan WebDriver W3C dan dapat dipakai untuk berinteraksi dengan instans Safari

  • Tidak yakin Apple benar-benar peduli pada pengembang web
    Kalau tidak punya perangkat Apple, bagaimana cara menguji di Safari?
    Apa sesulit itu bagi Apple untuk membuat mesin virtual minimum yang hanya berisi Safari?

    • Pertanyaan tentang bagaimana menguji Safari tanpa perangkat Apple mirip dengan bertanya bagaimana menguji game PlayStation tanpa PlayStation
      Bagaimana menguji firmware perangkat keras tanpa perangkat keras, atau bagaimana menjalankan program tanpa perangkat keras yang dibutuhkan ketika tidak ada emulator atau simulator
      Jika sesuatu hanya berjalan di perangkat keras tertentu dan tidak ada virtualisasi atau emulasi, maka itu memang tidak bisa diuji di luar perangkat keras tersebut, dan begitulah dunia komputasi selama puluhan tahun sejak masa-masa awal
      Keputusan Apple sering kali ditentukan oleh strategi, bukan oleh apakah itu sulit atau mudah, dan cukup jelas bahwa mereka sedang membangun taman bertembok
      Kalau tidak suka, ya jangan ikut bermain di sana seperti orang-orang lainnya
    • Meski Chrome dominan, saya tetap menguji Chromium karena tidak ingin melewatkan browser lain seperti Edge
      Dengan cara yang sama, meskipun tidak sempurna, Anda bisa menguji WebKit, dan kalau mau bahkan di Linux atau Windows:
      https://orionbrowser.com/platforms/linux
      Saya rasa Apple tidak akan menjalankan bisnis mesin virtual Safari, tetapi jika Anda butuh mesin virtual macOS, lihat saja penyedia layanan cloud: https://aws.amazon.com/ec2/instance-types/mac/
      Banyak di antaranya sudah menyiapkan orkestrasi pengujian perangkat lunak
    • Apple baru saja merilis alat baru ini, jadi bisa dibilang mereka memang peduli pada pengembang web
    • Sama seperti cara orang menguji IE di Linux atau OS X

  • Belakangan ini saya menyuruh agen menjalankan Chrome dan berkomunikasi langsung lewat CDP, dan hasilnya bekerja cukup baik

    • Sepertinya saya juga harus mencoba cara itu
      Penasaran bagaimana perbandingannya dengan Playwright
      Dari sudut pandang pengembangan web, kelebihan Playwright tampaknya adalah bisa dipakai di banyak browser
      Jika alat khusus per browser lebih cepat atau lebih efisien dalam penggunaan token, mungkin itu pilihan yang lebih baik untuk otomatisasi pekerjaan dan Claws
    • Betul. Cara ini bekerja jauh lebih baik dan lebih cepat daripada jalur MCP

  • “Ada banyak cara untuk membangun web, baik memakai AI maupun tidak. Jika AI adalah bagian dari alur kerja Anda, saya rasa alat ini akan membantu meningkatkan produktivitas. Jika tidak, itu juga tidak masalah.”
    Agak aneh mendengar kalimat seperti ini di tahun 2026
    Karena ini adalah zaman ketika, bagi sebagian orang, jika Anda menulis kode sendiri dan tidak menyerahkan semuanya kepada agen, Anda dianggap pemula

    • Dua tahun lalu justru kebalikannya yang dianggap omong kosong
      Sekarang bagus karena orang yang memakai AI tidak perlu lagi menyembunyikan fakta itu
    • Saya tidak tahu bagian mana yang aneh
      Apakah yang aneh itu bahwa mereka harus menambahkan kalimat penafian seperti ini untuk menenangkan kubu anti-AI yang fanatik?
      Ini jelas alat untuk pengembangan berbantuan AI, jadi justru sangat aneh kalau mereka merasa perlu menambahkan kalimat seperti, “Kami juga menyampaikan penghiburan bagi Anda yang tidak memakai AI”
      Hanya saja anehnya itu ke arah yang berbeda dari yang Anda pikirkan

  • Hal yang membuat MCP untuk otomasi browser menarik adalah karena mesin WebKit milik Safari termasuk sisi yang sulit ditangani dengan mudah oleh sebagian besar agen AI
    Playwright dan Puppeteer berpusat pada Chromium, jadi jika ada server MCP untuk Safari, itu bisa menutup celah nyata dalam pengujian lintas browser pada alur kerja agen