00:00:00Ada proposal baru yang didukung oleh Google dan Microsoft yang bisa membentuk masa depan
00:00:03cara kita menggunakan web, dan saya lumayan suka. Namanya WebMCP, tapi jangan bingung
00:00:08dengan server MCP biasa. Sebaliknya, WebMCP sebenarnya adalah API browser dan ini memungkinkan
00:00:13pengembang front-end mengekspos fitur situs mereka sebagai alat untuk agen AI, yang pada dasarnya
00:00:18membuat setiap situs menjadi server MCP mini. Meski Anda mungkin sudah melihat beberapa situs
00:00:23mulai menggunakan server MCP mereka sendiri, ini sedikit berbeda. Tujuannya sebenarnya adalah
00:00:27membiarkan agen Anda menggunakan situs web tersebut untuk Anda, bukan sekadar mengakses API dan menampilkannya
00:00:32di dalam obrolan. Ini akan sepenuhnya berbasis front-end. Sekarang, jika perbedaan itu terdengar
00:00:37sedikit membingungkan, mari kita langsung lihat demonya dan bahas mengapa saya menyukainya.
00:00:46Pertama-tama saya harus akui bahwa demo ini tidak akan terlihat terlalu menarik, tapi
00:00:49justru itulah poin dari WebMCP. Ini mengambil sesuatu yang sudah memungkinkan, tapi
00:00:54membuatnya jauh lebih baik. Jadi ikuti terus. Di sini saya menggunakan Chrome versi Canary
00:00:58tempat mereka menguji proposal ini, dan juga sebuah situs yang sudah disetel dengan
00:01:02beberapa alat WebMCP. Anda bisa lihat di kanan saya punya ekstensi yang bisa berinteraksi
00:01:06dengan alat-alat WebMCP ini, tapi bayangkan di masa depan ini akan menjadi AI bawaan browser
00:01:10normal Anda, entah itu Gemini, ChatGPT Atlas, atau apa pun perubahan ARC sekarang.
00:01:15Bisa dilihat jika saya ingin mengirim prompt pengguna saat berada di situs ini, misalnya saya ingin
00:01:19memesan penerbangan pulang-pergi untuk dua orang dari London ke New York pada tanggal tertentu dan
00:01:23saya klik kirim, ia akan membawa saya ke halaman hasil pencarian, jadi ia menggunakan situs web
00:01:28itu untuk saya. Wah, luar biasa kan? Ya, seperti yang saya katakan, demo ini akan terlihat sangat dasar,
00:01:33tapi poin kunci WebMCP adalah cara ia menggunakan situs tersebut untuk saya. Pendekatan AI saat ini
00:01:38dalam menggunakan situs web cenderung memakai alat seperti Playwright, parsing HTML, atau bahkan mengambil tangkapan layar
00:01:42situs Anda dan mencoba menggunakannya layaknya manusia. Tapi semua itu cukup tidak efisien,
00:01:48terutama dalam penggunaan token, dan masih rentan banyak kesalahan. Jadi inilah yang diperbaiki WebMCP.
00:01:53WebMCP justru membiarkan pengembang situs web mengekspos alat MCP tertentu yang kemudian
00:01:58berinteraksi dengan JavaScript sisi klien. Jadi itulah yang terjadi saat sebuah AI memilih
00:02:03untuk menggunakan salah satu alat WebMCP ini. Ia hanya menjalankan fungsi JavaScript di situs Anda
00:02:07yang sudah Anda setel sebagai pengembang. Jadi bisa dilihat pada contoh halaman demo penerbangan ini,
00:02:12saya punya satu alat WebMCP yang tersedia bernama “search flights” dan Anda bisa lihat ini menerima
00:02:16beberapa argumen input seperti asal, tujuan, dan jenis perjalanan yang cocok satu-ke-satu dengan
00:02:20formulir yang kita punya di sini. Bagian krusialnya adalah AI sekarang tahu bahwa ia bisa menggunakan
00:02:25alat MCP ini. Jadi saat kita klik kirim pada prompt seperti ini, ia tidak akan mengisi formulir
00:02:29dengan cara seperti Playwright atau parsing HTML. Faktanya, ia tidak perlu tahu tampilan situs webnya
00:02:34sama sekali atau bagaimana struktur HTML-nya. Ia hanya tahu bahwa ia memiliki alat WebMCP itu
00:02:38dan memanggilnya dengan argumen input tersebut, lalu pengembang sudah menyetel apa yang terjadi
00:02:43saat menerima argumen input tersebut dan menjalankan fungsi JavaScript, yang dalam hal ini
00:02:47hanya memperbarui state React dan itu memicu navigasi ke halaman pencarian penerbangan. Jika kita
00:02:52melihat kode front-end untuk ini, kodenya sangat sederhana dan semoga
00:02:55ini mulai terasa lebih masuk akal. Anda bisa lihat hal pertama yang perlu kita lakukan adalah mendaftarkan
00:02:59alat WebMCP yang tersedia untuk halaman tertentu dan kita bisa melakukannya menggunakan window.navigator.model_context.
00:03:04Jadi ini adalah API yang perlu dibangun ke dalam browser jika proposal ini
00:03:09disetujui, dan saat ini sudah ada di Chrome Canary sehingga mereka bisa mengujinya. Kita bisa lihat
00:03:13setelah kita memiliki API model context kita, kita bisa mendaftarkan alat kita cukup dengan menggunakan fungsi
00:03:18register tool dan dalam kasus ini saya mendaftarkan alat search flights yang kita lihat digunakan
00:03:22tadi. Jika kita periksa apa itu alat sebenarnya, Anda bisa lihat itu adalah definisi objek yang sangat sederhana.
00:03:26Ada nama, ada deskripsi, jadi ini diteruskan ke AI agar ia tahu kapan harus menggunakan
00:03:30alat ini, dan kita juga punya skema input jika kita ingin menerima argumen apa pun. Dalam
00:03:34kasus saya, ada hal-hal seperti asal dan tujuan agar cocok dengan formulir tersebut. Anda bisa lihat kita juga punya
00:03:38beberapa konteks tambahan yang bisa diberikan ke AI untuk memahami seperti apa seharusnya argumen tersebut.
00:03:42Bagian penting tentang definisi alat adalah fungsi execute. Ini adalah JavaScript
00:03:47sisi klien yang akan berjalan di situs Anda saat alat MCP ini digunakan. Jadi ini
00:03:51bisa berupa apa saja yang Anda inginkan. Dalam kasus saya, saya menggunakan fungsi search flights
00:03:55dan kita tidak perlu terlalu mengkhawatirkan implementasi ini, tapi intinya yang saya lakukan hanyalah mengambil
00:03:59parameter yang telah diisi AI untuk argumen input tersebut dan saya mengirimkan
00:04:03event bernama search flights dengan parameter tersebut. Kemudian dalam kode React saya, yang saya lakukan hanyalah
00:04:08menambahkan event listener untuk event search flights tersebut dan saat itu terjadi, saya hanya menjalankan
00:04:12fungsi handle search flights dan di sinilah kita bisa melakukan apa saja yang
00:04:15bisa dilakukan di React, dan dalam kasus saya, saya mengambil parameter dan hanya mengaturnya sebagai
00:04:19parameter pencarian yang memicu navigasi. Sangat sederhana, dan itulah mengapa saya sangat
00:04:24menyukai pendekatan ini karena tidak hanya sangat efisien token, tapi juga memungkinkan saya sebagai
00:04:29pengembang untuk menentukan interaksi situs dan AI bisa mengikuti batasan saya. Ini
00:04:34adalah solusi yang sangat rapi untuk membangun situs dengan mempertimbangkan manusia dan asisten AI
00:04:39daripada pendekatan saat ini yang membangun situs untuk manusia dan kemudian server MCP
00:04:43untuk AI, dan jika AI kemudian perlu menggunakan situs web, yah, Anda hanya bisa berharap ia bisa memahaminya.
00:04:48Penting juga untuk dicatat bahwa alat WebMCP ini tidak hanya berguna untuk
00:04:51memicu suatu event di halaman Anda seperti navigasi atau mengisi formulir, tapi juga sangat
00:04:55berguna saat Anda perlu memparsing informasi yang ada di halaman. Katakanlah saya sebagai manusia datang ke sini
00:05:00sekarang dan mulai menyesuaikan beberapa filter seperti saya ingin harga kurang dari $500 dan waktu
00:05:05keberangkatan sebelum tengah hari. Masih ada cukup banyak penerbangan di halaman ini, jadi saya ingin AI
00:05:11membantu saya memilih yang terbaik. Jadi saya bisa bertanya, penerbangan mana yang Anda rekomendasikan di halaman ini.
00:05:15Sekarang, pendekatan saat ini hanya akan menggunakan Playwright atau parsing HTML untuk mengambil seluruh
00:05:20halaman dan mencoba memahami informasi di sini lalu mengubahnya menjadi suatu bentuk data terstruktur,
00:05:24tapi kita tidak perlu melakukan itu dengan WebMCP. Sebaliknya, saya sebagai pengembang hanya
00:05:29menyetel alat WebMCP bernama list flights dan ini memiliki akses ke state React saat ini,
00:05:33jadi ia punya akses ke semua informasi yang ditampilkan kepada pengguna di sini tapi dalam format
00:05:38JSON yang bagus. Dengan begitu, jika saya benar-benar meminta AI untuk prompt ini, Anda bisa lihat ia memanggil
00:05:42alat tersebut, mencantumkan semua penerbangan yang saat ini tampil di halaman ini dan memberikan
00:05:46rekomendasi penerbangan 56 di sini. Dan saya bisa menemukan penerbangan itu yang muncul di halaman
00:05:51di sini. Proses itu menggunakan jauh lebih sedikit token dan akan jauh lebih akurat. Sekarang,
00:05:56hal terakhir yang ingin saya tunjukkan adalah bagaimana Anda bisa memanfaatkan WebMCP tanpa
00:06:00JavaScript. Sejauh ini kita sebenarnya telah menggunakan API imperatif di mana saya sebagai
00:06:05pengembang menulis JavaScript untuk menangani pemanggilan alat dan juga mendaftarkan alat tertentu.
00:06:10Ada juga pendekatan kedua yang disebut API deklaratif. Pendekatan ini jauh lebih sederhana karena
00:06:14ditujukan untuk kasus penggunaan sederhana seperti mengisi formulir HTML. Jadi bisa dilihat saya punya
00:06:19formulir reservasi pemesanan yang sangat sederhana dan saya bisa minta AI saya untuk memesankan meja dengan beberapa informasi
00:06:23yang diperlukan untuk mengisi formulir tersebut dan ia akan melanjutkan dan mengisi formulir itu untuk
00:06:27saya. Itu karena ia memiliki akses ke alat WebMCP bernama book table. Tapi bagian
00:06:32penting di sini adalah saya tidak menulis JavaScript sama sekali untuk bisa mengakses alat WebMCP ini. Dan itu
00:06:36karena cara kerja API deklaratif WebMCP adalah Anda hanya perlu menambahkan
00:06:40atribut tool-name dan tool-description pada formulir HTML Anda dan browser kemudian
00:06:44akan mencoba mengubah formulir itu menjadi alat WebMCP untuk Anda, mencoba memahami apa yang seharusnya diisi di setiap input
00:06:49untuk argumen alat MCP tersebut. Dan kita lihat di sini kita punya tool-name
00:06:53book table pada formulir pemesanan yang kita lihat tadi dan deskripsi alatnya. Jadi AI tahu kapan
00:06:57harus memanggilnya dan kita hanya punya formulir HTML biasa. Satu-satunya perbedaan lain adalah pada beberapa
00:07:02input di sini. Kita juga menggunakan atribut tool-param-description untuk memberi AI sedikit
00:07:06lebih banyak konteks tentang bagaimana ia harus mengisi informasi tersebut. Tapi selebihnya, browser
00:07:10akan mengambil input, tipe input, nama input, dan menggunakannya untuk membuat
00:07:14alat MCP. Dan kita bisa melihatnya kembali di inspektur kita di mana ia mengambil argumen input
00:07:18dengan benar: nama, telepon, tanggal, waktu, tamu, tempat duduk, dan permintaan. Dan ia melakukan semua
00:07:23itu hanya menggunakan logika formulir HTML sederhana tanpa saya menulis JavaScript sama sekali. Itulah
00:07:27hampir semua yang ada di proposal WebMCP saat ini. Dan seperti yang saya katakan, saya cukup positif
00:07:31tentang hal ini. Saya suka caranya menjembatani kesenjangan antara aplikasi web dan agen AI, dan
00:07:34ini menghilangkan tebak-tebakan saat agen mencoba menggunakan situs dan memastikan
00:07:38bahwa setiap interaksi ditentukan secara eksplisit oleh pengembang situs web. Ditambah lagi, saya juga belum
00:07:43sepenuhnya fanatik AI. Saya suka jika ada alat yang membantu agen AI bekerja bersama
00:07:47saya, bukannya menggantikan saya. Saya tidak suka ide memesan tiket pesawat atau restoran di
00:07:51antarmuka ChatGPT. Saya jauh lebih suka mengunjungi situs web aslinya sendiri di browser.
00:07:56Dan jika mau, saya bisa minta AI membantu saya di halaman tersebut. Ini sistem yang jauh lebih baik
00:08:00dalam menjaga keterlibatan manusia dan juga memungkinkan pengembang situs web menentukan bagaimana pengalaman itu berlangsung.
00:08:05Tapi perlu diingat juga bahwa ini baru sekadar proposal saat ini. Jadi mungkin
00:08:08butuh waktu untuk muncul di browser. Dan juga masih ada beberapa keterbatasan yang
00:08:12perlu dihadapi. Seperti masalah klasik keamanan, bisa saja ada alat dan
00:08:16deskripsi yang berbahaya di situs web tertentu. Jadi seberapa banyak akses yang diberikan ke informasi pengguna dan
00:08:21seberapa besar kendali AI browser terhadap seluruh browser. Jadi jika salah satu alat berbahaya
00:08:25ini lepas kendali, seberapa besar kerusakan yang bisa ditimbulkan? Semoga mereka menemukan jawaban untuk
00:08:29hal itu karena saya cukup positif dengan proposal ini. Beri tahu saya pendapat Anda di kolom komentar
00:08:33di bawah. Sambil di sana, jangan lupa subscribe. Dan seperti biasa, sampai jumpa di video berikutnya.