00:00:00Agen AI kini mulai terintegrasi ke dalam setiap bagian kehidupan kita.
00:00:03Dan salah satu area terbesar di mana hal itu terjadi adalah di peramban.
00:00:06Setiap perusahaan AI besar menyadari bahwa peramban adalah satu alat yang digunakan semua orang
00:00:11setiap hari.
00:00:12Jadi, mengapa tidak memasukkan AI ke dalamnya?
00:00:14Tapi sejujurnya, semuanya buruk.
00:00:15Dan ini bukan masalah optimasi.
00:00:17Ada masalah mendasar yang tidak akan bisa diperbaiki dengan cara apa pun.
00:00:20Namun Google, berkolaborasi dengan Microsoft, baru saja merilis sesuatu yang disebut WebMCP.
00:00:24Alih-alih mencoba membuat agen lebih pintar menggunakan situs web, ini membuat situs web lebih baik
00:00:29dalam berbicara dengan agen.
00:00:30Itu adalah pendekatan yang sangat berbeda.
00:00:32Dan apa yang dimungkinkannya adalah sesuatu yang belum pernah kita lihat sebelumnya.
00:00:35Jadi ini adalah halaman HTML sederhana yang berjalan di server lokal.
00:00:38Saat membuka tab ekstensi, kita memiliki ekstensi WebMCP.
00:00:41Saat membukanya, di bawah nama situs ini, kita punya satu alat, BookTable.
00:00:45Kami menghubungkan bridge WebMCP ini ke Claude Code dan memberitahunya bahwa kami memiliki formulir
00:00:49pemesanan restoran yang terbuka dengan alat WebMCP yang tersedia.
00:00:52Kami memberinya tugas untuk memesan meja untuk dua orang dengan tanggal, nama, dan permintaan khusus.
00:00:57Semua kolom tersebut ada di dalam formulir.
00:00:59Agen mengonfirmasi tanggal, menggunakan alat WebMCP yang disediakan situs, mengisi kolom,
00:01:03dan berhasil membuat reservasi.
00:01:06Saat ini, agen memiliki dua cara untuk memahami apa yang ada di layar.
00:01:09Cara pertama adalah berbasis penglihatan (vision-based).
00:01:11Agen mengambil tangkapan layar dari seluruh halaman, memberikan anotasi pada setiap elemen yang terlihat, dan
00:01:15mengirimkan gambar itu ke model yang mencoba mencari tahu apa yang harus diklik.
00:01:19Cara kedua adalah penguraian DOM (DOM parsing).
00:01:21Agen mengambil kode HTML mentah dari halaman tersebut.
00:01:24Dan jika Anda pernah membuka “Inspect Element” di situs web mana pun, Anda tahu seperti apa tampilannya.
00:01:28Ribuan baris kode.
00:01:29Agen membaca semua itu dan mencoba mengidentifikasi tombol yang tepat.
00:01:33Kedua pendekatan ini memiliki masalah mendasar yang sama.
00:01:35Mereka bersifat non-deterministik.
00:01:36Agen hanya melakukan tebakan terbaiknya setiap saat.
00:01:39Alasan mengapa semua ini tidak berfungsi secara konsisten adalah karena seluruh internet dibangun untuk
00:01:43mata manusia.
00:01:45Setiap situs web mengasumsikan bahwa ada orang yang melihatnya.
00:01:47Tidak ada struktur untuk mesin.
00:01:48Jadi setiap agen, sebagus apa pun modelnya, terjebak mencoba menafsirkan sesuatu
00:01:53yang tidak pernah dirancang untuk ditafsirkan oleh mesin.
00:01:55Dengan WebMCP, alih-alih agen mencoba memahami situs web Anda, situs Anda mendaftarkan
00:02:00tindakan yang tersedia sebagai alat (tools).
00:02:01Saat agen masuk ke sebuah halaman, ia tidak menebak.
00:02:04Ia hanya membaca alat yang tersedia dan memanggilnya secara langsung.
00:02:07Saat ini, WebMCP hanya tersedia untuk pratinjau awal.
00:02:10Seiring berkembangnya web berbasis agen, situs web juga perlu berevolusi bersamanya.
00:02:13Dan seperti yang Anda lihat, dengan mendefinisikan alat-alat itu, kita memberi agen akses yang lebih baik untuk berinteraksi
00:02:18dengan situs kita.
00:02:19Demo tadi berhasil karena itu hanya formulir HTML sederhana.
00:02:21Tetapi kebanyakan situs web asli tidak sesederhana itu.
00:02:23Jadi WebMCP sebenarnya memiliki dua pendekatan berbeda tergantung pada apa yang Anda kerjakan.
00:02:28Ada dua cara yang memungkinkan agen untuk mengambil kendali peramban.
00:02:31API deklaratif digunakan untuk alur kerja sederhana seperti formulir HTML yang baru saja Anda lihat.
00:02:35API imperatif untuk aplikasi web skala penuh dengan banyak halaman, dan itu memerlukan beberapa
00:02:40implementasi tambahan yang akan kita bahas lebih lanjut nanti.
00:02:43Sampai saat ini, belum ada dokumentasi resmi, tetapi mereka memiliki repositori alat WebMCP
00:02:48di Google Chrome Labs dengan dua demo, dan hanya satu yang benar-benar di-hosting.
00:02:52Ada demo pencarian penerbangan sederhana dan ekstensi inspektur alat konteks Marvel resmi.
00:02:56Setelah Anda menginstalnya, situs web mana pun yang telah menerapkan WebMCP akan dapat mendeteksi
00:03:01alat-alat tersebut melalui ekstensi, dan Anda juga bisa melakukan hal keren lainnya.
00:03:05Skema input untuk alat-alat tersebut muncul langsung di sana.
00:03:07Saat ini, hanya ada satu alat di halaman ini, yaitu alat pencarian penerbangan (search flights).
00:03:10Mereka memberikan dua opsi untuk menggunakan ini.
00:03:12Anda bisa memberikan argumen input khusus yang harus diisi oleh model AI, atau Anda bisa
00:03:16mengatur kunci API Gemini Anda, memberikan perintah pengguna dalam bahasa Inggris sederhana, dan halaman akan dikendalikan
00:03:21sesuai dengan perintah tersebut.
00:03:22Jadi saat ini ia memiliki input default ini.
00:03:24Kami menggantinya dan ia benar-benar mencari penerbangan dan mendapatkan banyak hasil.
00:03:28Saya kembali lagi, dan kali ini situs perjalanan WebMCP tersebut memiliki empat alat yang tersedia di mana tiga
00:03:32di antaranya sekarang adalah filter yang dapat diterapkan.
00:03:35Argumen input untuk halaman tersebut juga telah berubah.
00:03:37Saya menambahkan argumen lain dan ia memberi kami notifikasi bahwa pengaturan filter telah diperbarui.
00:03:41Tidak ada penerbangan yang cocok dengan pengaturan filter tersebut, tetapi semuanya telah diterapkan.
00:03:44Kami berganti-ganti antara peramban Zen dan Chrome selama proses ini karena meski mereka
00:03:48merilis WebMCP sebagai protokol terbuka yang bisa digunakan peramban apa pun, saat ini ia hanya berfungsi
00:03:54pada versi Chrome Canary.
00:03:55Itu sampai mereka merilis standarnya agar semua orang bisa menggunakannya.
00:03:58Jadi sejauh itulah alat resmi yang tersedia saat ini.
00:04:01Tanpa dokumentasi, hanya dua demo, hanya berfungsi di Chrome Canary, dan Anda tidak bisa menggunakannya
00:04:05dengan Claude Code karena ini sebenarnya ditujukan untuk digunakan oleh agen peramban.
00:04:09Jadi kami menemukan bridge WebMCP kustom ini yang bisa Anda instal di sistem Anda dan ini memberikan
00:04:14Anda sebuah MCP serta sebuah ekstensi juga.
00:04:16Inilah yang memungkinkan Claude Code menggunakan WebMCP dan menavigasi serta menggunakan alat yang ditawarkan
00:04:22oleh situs web mana pun.
00:04:23Untuk menunjukkan bagaimana situs benar-benar mengimplementasikan ini, kita mulai dengan pendekatan yang lebih sederhana.
00:04:27Dalam API deklaratif, yang Anda lihat pada formulir HTML tadi, yang perlu Anda lakukan hanyalah
00:04:31mendeklarasikan tiga hal di dalam formulir HTML: nama alat, deskripsi alat, dan deskripsi parameter
00:04:36alat.
00:04:37Anda tidak perlu mempelajarinya terlalu dalam.
00:04:39Anda hanya perlu memastikan agen Anda menambahkannya.
00:04:41Kami membuat dua panduan yang direkayasa balik dari demo di repo WebMCP dan kami memberi Claude Code
00:04:46akses ke panduan tersebut.
00:04:47Selama proses itu, kami sebenarnya menemui beberapa masalah umum dan harus memperbaiki
00:04:51panduan-panduan ini di sepanjang jalan.
00:04:53Keduanya tersedia di AI Labs Pro, komunitas kami di mana Anda mendapatkan template
00:04:57yang siap pakai.
00:04:58Anda bisa langsung menghubungkannya ke proyek Anda untuk video ini dan semua video sebelumnya.
00:05:01Pelajaran utamanya ada di sini di video, tetapi jika Anda ingin file aslinya, tautannya
00:05:05ada di deskripsi.
00:05:06Jika agen Anda menyertakan deklarasi ini, sisanya terserah pada peramban yang
00:05:10membacanya dari HTML.
00:05:12Cara kedua adalah API imperatif untuk kasus di mana Anda membutuhkan interaksi yang lebih kompleks dan
00:05:17eksekusi JavaScript.
00:05:18Kami menginisialisasi aplikasi Next.js, memberikan panduan Next.js kepada Claude Code dan itu saja yang
00:05:23dibutuhkan untuk mengimplementasikannya.
00:05:24Dalam aplikasi React, ini membuat file baru di folder library di mana ia mendeklarasikan semua alat
00:05:29yang dibutuhkan situs tersebut.
00:05:30Ini semua adalah fungsi-fungsinya dan ini adalah definisinya.
00:05:33Tetapi karena aplikasi web ini bisa menjadi sangat besar dan bahkan berpotensi memiliki lebih dari 100 alat,
00:05:38kita mendapat masalah yang sama seperti pada Claude Code di mana konteksnya membebani segalanya
00:05:41dan merusak semuanya.
00:05:43Jadi, alih-alih memuat semua alat yang dimiliki situs web, lebih baik hanya memuat alat yang ada pada
00:05:47satu halaman saja.
00:05:48Konsep ini disebut pemuatan kontekstual (contextual loading).
00:05:50Jadi ini adalah aplikasi Next.js yang dibuat oleh Claude Code.
00:05:53Ini adalah aplikasi demo kecil yang berfungsi penuh dengan backend yang sudah terimplementasi.
00:05:57Saat ini kita berada di halaman beranda utama dan situs ini hanya memiliki 3 alat yang tersedia.
00:06:01Saya masuk ke halaman keranjang belanja dan kali ini kami memiliki 4 alat dan namanya juga telah berubah.
00:06:05Ketersediaan alat berubah berdasarkan halaman tempat Anda berada.
00:06:09Di sinilah fungsi pendaftaran (registration) berperan.
00:06:11Setiap kali Anda mendarat di suatu halaman, seperti beranda, ia menjalankan fungsi pendaftaran alat beranda dan
00:06:15ketika Anda meninggalkannya, ia menjalankan pembatalan pendaftaran alat beranda.
00:06:18Berdasarkan alat mana yang dimiliki halaman tersebut, ia hanya mendaftarkan lalu membatalkan pendaftarannya.
00:06:23Inilah sebabnya mengapa dalam kasus ini tidak hanya bergantung pada peramban, tetapi kodenya juga menangani
00:06:27integrasinya.
00:06:28Kami sebenarnya tidak menggunakan WebMCP dengan agen peramban, yang merupakan keinginan Google dan yang
00:06:32akan diimplementasikan oleh setiap peramban sendiri.
00:06:34Kami sebenarnya menggunakan bridge yang menghubungkan Claude Code ke WebMCP dan begitulah cara kami mengendalikan
00:06:39situs web.
00:06:40Jika Anda ingin mendapatkan lebih banyak manfaat dari Claude Code itu sendiri, kami punya video tentang 10
00:06:44cara terbaru untuk mendapatkan keuntungan darinya.
00:06:46Bridge ini adalah proyek komunitas dan dengan API imperatif, ia memiliki masalah di mana
00:06:51peralihan alat tidak benar-benar berfungsi dengan server MCP ini.
00:06:54Saat saya membuka situsnya, kami berada di halaman pembayaran (checkout) dan menginisialisasi sesi Claude Code
00:06:58di sana.
00:06:59Ketika kami memintanya untuk menavigasi kembali ke beranda, ia tidak dapat melihat alat yang tersedia di
00:07:03beranda tersebut.
00:07:04Kami berada di beranda dan saya masuk ke halaman produk dan kami mendapatkan tombol tambah ke keranjang.
00:07:08Tetapi saat berada di halaman produk, ia tidak bisa melihat tombol tersebut.
00:07:11Jadi kami harus menambahkan item ke keranjang secara manual untuk mendemokan ini.
00:07:14Tetapi saat kami memintanya untuk menyelesaikan pembayaran, ia secara otomatis mengisi detailnya, membuat
00:07:18pesanan, dan menyelesaikan seluruh alur belanja.
00:07:21Jadi itu adalah salah satu batasan MCP ini, yang membawa kita ke poin lain.
00:07:25WebMCP adalah sumber terbuka dengan vendor peramban besar dan perusahaan teknologi terdaftar sebagai partisipan.
00:07:30Tetapi saat ini, satu-satunya peramban yang mendukungnya adalah Chrome Canary dan agen yang dimaksudkan
00:07:34adalah Gemini, AI milik Google yang dibangun langsung ke dalam peramban.
00:07:38Jika Anda pemilik situs web dan mengimplementasikan WebMCP hari ini, satu-satunya agen yang dapat menggunakan
00:07:42alat Anda secara asli adalah Gemini.
00:07:44Claude Code memerlukan bridge buatan komunitas yang rusak saat pemuatan kontekstual diaktifkan.
00:07:49Setiap agen non-Google berada dalam posisi yang kurang menguntungkan.
00:07:51Lalu, bisakah Claude mengejar ketinggalan?
00:07:52Tentu saja, mereka memiliki ekstensi peramban sendiri.
00:07:55Dan karena itu juga merupakan agen peramban, ia berpotensi menemukan alat-alat ini dengan cara yang sama
00:07:59seperti Gemini.
00:08:00Tetapi pertanyaannya adalah berapa banyak orang yang sengaja menginstal ekstensi peramban Claude
00:08:04dibandingkan hanya menggunakan Gemini yang sudah ada di dalam Chrome.
00:08:08Chrome memiliki miliaran pengguna, mereka tidak perlu menginstal apa pun.
00:08:11Menurut pendapat kami, Google tidak mengunci siapa pun.
00:08:13Mereka hanya memanfaatkan arsitektur dan audiens yang sudah mereka miliki.
00:08:17Sebuah standar terbuka yang bekerja paling baik di dalam peramban yang sudah mereka miliki dengan agen yang
00:08:21sudah mereka sertakan.
00:08:22Itu tidak berarti Anda tidak boleh mengimplementasikannya.
00:08:23Standar itu sendiri benar-benar berguna dan membuat situs Anda dapat diakses agen adalah langkah cerdas
00:08:28terlepas dari agen mana yang mendapat manfaat lebih dulu.
00:08:30Ada beberapa hal yang perlu diketahui jika Anda mengimplementasikan ini.
00:08:33Spesifikasinya menyarankan tidak lebih dari 50 alat per halaman.
00:08:36Ini tidak dimaksudkan untuk mengekspos seluruh aplikasi Anda.
00:08:38Ini dimaksudkan untuk tindakan yang fokus dan spesifik, hal-hal yang benar-benar ingin dilakukan seseorang di
00:08:42halaman tersebut.
00:08:43Deskripsi alat juga lebih penting dari yang Anda bayangkan.
00:08:46Agen membaca deskripsi tersebut untuk memutuskan alat mana yang akan dipanggil.
00:08:49Deskripsi yang tidak jelas berarti agen akan memilih alat yang salah atau melewatkannya sama sekali.
00:08:53Tulislah seolah-olah Anda sedang menjelaskan tindakan tersebut kepada seseorang yang belum pernah melihat situs Anda.
00:08:57Dan ini masih bersifat eksperimental.
00:08:58Tampilan API akan berubah.
00:09:00Chrome 146 akan diluncurkan pada bulan Maret dengan dukungan yang lebih luas.
00:09:03Tetapi sampai saat itu, ini adalah uji coba pengembang.
00:09:05Jangan dulu menggunakannya untuk produksi.
00:09:06Jika Anda mengikuti saluran ini, Anda tahu bahwa mengikuti perkembangan AI membutuhkan landasan teknis yang kuat.
00:09:11Itulah sebabnya saya menyukai Brilliant.
00:09:13Ini adalah platform interaktif dengan pelajaran praktis yang dibuat oleh pengajar kelas dunia dari
00:09:17MIT, Harvard, dan Stanford.
00:09:19Saya sangat merekomendasikan kursus pengelompokan (clustering) dan klasifikasi serta kursus cara kerja AI mereka.
00:09:23Mereka mengajari Anda untuk mengungkap pola tersembunyi dan memahami logika di balik model bahasa
00:09:27besar secara interaktif.
00:09:28Seperti yang Anda lihat di katalog di layar, mereka menawarkan berbagai macam kursus yang mencakup
00:09:33segalanya mulai dari matematika dasar hingga sains data dan ilmu komputer tingkat lanjut.
00:09:37Brilliant juga memberikan diskon 20% bagi penonton kami untuk langganan premium tahunan, memberikan akses harian
00:09:42tanpa batas ke semua hal di platform ini.
00:09:44Untuk belajar gratis di Brilliant selama 30 hari penuh, buka brilliant.org/ailabs, pindai
00:09:50kode QR di layar, atau klik tautan di deskripsi.
00:09:53Bangun kebiasaan belajar yang nyata hari ini dan tingkatkan keterampilan Anda ke level berikutnya dengan beralih
00:09:56ke Brilliant.
00:09:57Itu membawa kita ke akhir video ini.
00:09:59Jika Anda ingin mendukung saluran ini dan membantu kami terus membuat video seperti ini, Anda dapat
00:10:03melakukannya dengan menggunakan tombol Super Thanks di bawah.
00:10:06Seperti biasa, terima kasih telah menonton dan sampai jumpa di video berikutnya.