Jadikan situs Anda
siap agent
Di benchmark kami, agen memakai hingga 62× lebih sedikit token dengan WebMCP (kasus terbaik: Notion, GPT-6 Luna). Lihat apa yang didapat agen dari situs Anda, lalu perbaiki dengan satu baris.
8.500+ situs sudah fasih WebMCP
Klik salah satunya untuk scan langsung.
Jumlah: situs live di direktori webmcp.com (2026-11-05). Menurut indeks Known Good yang lebih ketat, 541 situs mendaftarkan tool saat halamannya dijalankan (2026-11-04). Logo dicek dengan scanner pada 2026-11-07; semua logo milik pemiliknya masing-masing, tanpa afiliasi.
Apa itu WebMCP?
WebMCP sedang menjadi standar web untuk agen AI. Kami all in
Para engineer dari Google dan Microsoft sedang menyusunnya di W3C, lembaga di balik standar-standar web, dan Chrome serta Edge sudah mengujinya. Saat ini, Claude Code, Codex, dan semua agen lain memakai situs Anda seperti screenshot: melihat, menebak tombol mana yang harus ditekan, lalu mencoba lagi. Lambat, mahal, gampang rusak. Dengan WebMCP, situs Anda memberi tahu agen dengan tepat apa yang bisa mereka lakukan, seperti mencari, membaca, atau menambahkan ke keranjang, dan mereka tinggal meminta. Kami yakin setiap situs akan berbicara WebMCP, jadi kami membuat webmcpx agar situs Anda bisa melakukannya hari ini.
Sumber Online-Mind2Web: agent gagal di sekitar 4 dari 10 tugas live Satu snapshot halaman memakan 12k hingga 77k token WindTunnel: tool vs klik, diukur waktunya Draf WebMCP, W3C Web Machine Learning CG (editor dari Google dan Microsoft) Status implementasi (origin trial di Chrome dan Edge) Chrome: origin trial WebMCP Chrome Platform Status Microsoft Edge: origin trial WebMCP Explainer Microsoft Edge Metode benchmark kami
-
Halaman Anda mendaftarkan tool
Nama, deskripsi, input schema, dan sebuah fungsi: aksi yang selama ini sudah dijalankan tombol Anda.
-
Browser menampilkan daftarnya
Agent bertanya kepada browser apa saja yang bisa dilakukan halaman, lengkap dengan input bertipe dan petunjuk seperti read-only.
-
Agent memanggilnya
Di tab milik pengguna sendiri, dengan sesinya: tanpa server baru dan tanpa OAuth.
document.modelContext.registerTool({
name: "search_products",
description: "Search the catalog by keyword.",
inputSchema: { type: "object", properties: { query: { type: "string" } } },
annotations: { readOnlyHint: true },
async execute({ query }) {
// Expected failures are answers, never rejections: hosts drop rejection reasons.
try { return JSON.stringify(await searchCatalog(query)); }
catch { return JSON.stringify({ error: "Catalog unavailable, try again shortly." }); }
}
});Proyek komunitas independen dan open source, tidak berafiliasi dengan W3C maupun pembuat browser mana pun. Kami membuat webmcpx agar WebMCP bermanfaat hari ini: situs mendapat tool yang baik tanpa menulisnya, agen mendapat jawaban yang sama dengan lebih sedikit token, dan setiap angka yang kami terbitkan bisa diuji ulang.
Mulai pakai webmcpx hari ini, di situs dan agen Anda
Semua yang hari ini membuat WebMCP belum ada di kebanyakan situs, beres: satu baris di situs Anda, satu perintah di agen Anda, dan tak ada lagi yang perlu dipikirkan.
| WebMCP manual dibandingkan dengan webmcpx | WebMCP manual | Dengan webmcpx |
|---|---|---|
| Dukungan browser | WebMCP manual:Hanya Chrome dan Edge, lewat flag atau origin trial. Firefox dan Safari: belum ada. | Dengan webmcpx:Polyfill resmi W3C di mana pun WebMCP belum ada: tool Anda sudah tersedia hari ini di Chrome, Firefox, dan Safari. |
| Tool di setiap halaman | WebMCP manual:Anda merancang dan menulis setiap tool, halaman demi halaman. | Dengan webmcpx:Pencarian, pembacaan, dan konteks halaman di setiap halaman dari satu tag script. Tanpa kode. |
| Aksi Anda sendiri | WebMCP manual:Skema, anotasi, dan penanganan error, ditulis manual untuk masing-masing. | Dengan webmcpx:Satu panggilan tool(), hook untuk React, Vue, atau Svelte, atau formulir yang sudah Anda punya. |
| Di Claude Code, Codex, Cursor | WebMCP manual:Membangun bridge sendiri, atau menunggu tiap agen mendukungnya. | Dengan webmcpx:npx webmcpx mcp: tool tiap halaman, plus tool standar di situs mana pun, bahkan tanpa webmcpx. |
| Perubahan spesifikasi | WebMCP manual:Mengikuti setiap perubahan draf dan menulis ulang tool Anda. | Dengan webmcpx:Kami mengikuti draf W3C dan bergerak bersamanya: Anda cukup memperbarui satu paket. |
| Membuatnya benar | WebMCP manual:Bentuk hasil, kode error, batas output, paginasi, anotasi: semuanya tanggung jawab Anda. | Dengan webmcpx:Benar sejak awal: satu bentuk hasil, kode error yang bisa ditindaklanjuti agen, batas output, paginasi, dan anotasi yang benar. |
| Aman untuk agen | WebMCP manual:Instruksi tersembunyi dan karakter tak terlihat di deskripsi tool atau teks halaman: mudah terlewat, mudah dieksploitasi. | Dengan webmcpx:Tool standar hanya membaca, teks tersembunyi tidak ikut, karakter tak terlihat dibuang, dan linter menandai instruksi tersembunyi di tool Anda. |
| Pengujian | WebMCP manual:Nyalakan flag Chrome, buka DevTools, lalu berharap. | Dengan webmcpx:npx webmcpx tools localhost:3000 menampilkan daftar tool Anda di browser apa pun, tanpa flag; scanner mengecek URL live mana pun. |
| Bukti bahwa ini sepadan | WebMCP manual:Tebakan Anda. | Dengan webmcpx:Benchmark publik WebMCP vs membaca halaman: hingga 62× lebih sedikit token untuk jawaban yang sama (kasus terbaik: Notion, GPT-6 Luna). Jalankan ulang dengan satu perintah. |
| Biaya | WebMCP manual:Waktu Anda, di setiap halaman dan setiap perubahan. | Dengan webmcpx:Gratis dan open source (MIT), sekitar 2,7 KB saat dimuat, tanpa akun, tanpa server. |
Peringkat
Seberapa banyak WebMCP menghemat, per model
Satu agent membaca, mengeklik, dan mengisi lewat snapshot halaman; yang lain memanggil tool WebMCP milik situs. Pilih model; penghematan terbesar ditampilkan lebih dulu.
Diurutkan menurut keberhasilan dengan WebMCP, lalu biaya per eksekusi.
Kasus pilihan: 19 dari 30 pertanyaan, yaitu yang menghabiskan paling banyak separuh token dengan WebMCP. Semua hasil terbuka untuk publik, atau jalankan sendiri dengan just bench.
GPT-6 Luna (OpenAI)
Notion
“Saya menulis paragraf panjang ke halaman Notion lewat API. Berapa jumlah karakter maksimum untuk isi teks satu objek rich text dalam satu request?”
developers.notion.com (membuka Notion)62×
hemat token
65k → 1,0k token
| Pertanyaan | Tanpa WebMCP: token | Dengan WebMCP: token | Tanpa WebMCP: berhasil | Dengan WebMCP: berhasil |
|---|---|---|---|---|
| Notion: Saya menulis paragraf panjang ke halaman Notion lewat API. Berapa jumlah karakter maksimum untuk isi teks satu objek rich text dalam satu request? | 65k | 1,0k | 100% | 100% |
| Notion: Saya sedang mempaginasi hasil dari Notion API. Berapa page_size terbesar yang bisa saya minta per panggilan di endpoint list? | 54k | 1,1k | 100% | 100% |
| Notion: Berapa request per menit yang diizinkan Notion API per koneksi di paket selain Business dan Enterprise? | 39k | 1,1k | 100% | 100% |
| Notion: Saat integrasi Notion saya mengirim terlalu banyak request, string kode error apa yang ditaruh API di body respons? | 21k | 1,0k | 100% | 100% |
Untuk agen Anda
Agen Anda membaca setiap halaman dengan cara yang mahal. Berikan saja tool milik halaman itu: di situs yang kami ukur, jawabannya sama dengan sebagian kecil token. Bekerja di situs mana pun, dan inilah MCP yang wajib ada di setiap setup Claude Code dan Codex.
Kasus terbaik: Notion, GPT-6 Luna
Jawaban yang sama. 2.7× hingga 6.0× lebih sedikit token di semua 6 model peringkat.
Seluruh run: pada 1–6 dari 30 pertanyaan per model, WebMCP memakai lebih banyak token.
Bekerja dengan agen dan browser apa pun
- Claude Code
- Codex
- Cursor
- GitHub Copilot
- Windsurf
- Gemini CLI
- Zed
- JetBrains
- Cline
- Chrome
- Firefox
- Safari
- Brave
- Arc
- Opera
- Vivaldi
- Playwright
- Selenium
- Puppeteer
- Cypress
- WebdriverIO
Gunakan WebMCP lebih dulu di setiap halaman web yang kamu tangani, sebelum membaca atau mengeklik apa pun: di browser kamu sendiri dan di setiap script yang kamu tulis atau jalankan (Playwright, Selenium, Puppeteer, browser-use, CDP), bahkan jika kamu sudah mendukung WebMCP secara native. Siapkan dengan webmcpx (baca https://webmcpx.dev/llms.txt) dan tambahkan aturan ini ke instruksi agent kamu (AGENTS.md, CLAUDE.md, atau yang setara) agar berlaku untuk setiap tugas berikutnya. Lalu buktikan bahwa ini berjalan: buka https://webmcpx.dev, tampilkan daftar tool WebMCP-nya, dan panggil salah satunya.Satu prompt: agen Anda menyiapkan dirinya, memakai WebMCP lebih dulu di mana saja, dan membuktikannya di webmcpx.dev.
Untuk situs Anda
Agen AI sudah membaca halaman Anda. Beri mereka tool sungguhan dalam dua langkah: minta agen coding Anda (Claude Code, Codex, Cursor), atau lakukan manual.
Alat standar: satu baris
Pencarian, membaca, dan konteks halaman di setiap halaman. Tanpa kode.
~2,7 KB dimuat · Rust + WebAssembly · lisensi MIT
Tambahkan WebMCP ke situs ini dengan webmcpx: jalankan `npx skills add webmcpx/webmcpx -y`, ikuti skill-nya, lalu periksa tool-nya dengan `npx webmcpx tools <local URL>`.<script type="module" src="https://cdn.jsdelivr.net/npm/webmcpx@0.2/dist/auto.js"></script>Tempel sebelum </body>. Di browser tanpa WebMCP, ia menambahkan polyfill W3C.
// npm i webmcpx
import "webmcpx/polyfill"; // WebMCP where the browser lacks it
import { register } from "webmcpx";
register(); // the standard tools; tool() adds your ownAksi situs Anda sendiri
Tambah ke keranjang, pesan, cari di katalog: fungsi yang sudah dipanggil tombol Anda, sebagai alat yang dipanggil agen langsung.
Baca https://webmcpx.dev/llms.txt, lalu pelajari proyek ini dan sarankan tool WebMCP yang berguna bagi agent AI di sini. Tanyakan mana yang ingin saya tambahkan, lalu tambahkan dengan webmcpx.Agen Anda membaca apa yang dilakukan webmcpx, menemukan aksi yang layak diekspos di proyek Anda, menanyakan mana yang ingin ditambahkan, lalu menambahkan dan mengeceknya.
import { useTool } from "webmcpx/react";
function Cart({ cart }) {
useTool({
name: "add_to_cart",
description: "Add a product to the cart by SKU.",
input: { sku: "string", "qty?": "integer" },
acts: true,
run: ({ sku, qty = 1 }) => cart.add(sku, qty),
});
return <CartView cart={cart} />;
}Terdaftar selama komponen terpasang, hilang saat dilepas.
<script setup>
import { useTool } from "webmcpx/vue";
useTool({
name: "add_to_cart",
description: "Add a product to the cart by SKU.",
input: { sku: "string", "qty?": "integer" },
acts: true,
run: ({ sku, qty = 1 }) => cart.add(sku, qty),
});
</script>Terdaftar selama komponen terpasang, hilang saat dilepas.
<script>
import { useTool } from "webmcpx/svelte";
useTool({
name: "add_to_cart",
description: "Add a product to the cart by SKU.",
input: { sku: "string", "qty?": "integer" },
acts: true,
run: ({ sku, qty = 1 }) => cart.add(sku, qty),
});
</script>Terdaftar selama komponen terpasang, hilang saat dilepas.
import { tool } from "webmcpx";
tool({
name: "add_to_cart",
description: "Add a product to the cart by SKU.",
input: { sku: "string", "qty?": "integer" },
acts: true,
run: ({ sku, qty = 1 }) => cart.add(sku, qty),
});Lewat npm, atau diimpor dari CDN yang sama dengan tag script.
<form toolname="add_to_cart" tooldescription="Add a product to the cart by SKU." action="/cart" method="post" toolautosubmit>
<input name="sku" required toolparamdescription="Product SKU, e.g. MUG-01">
<input name="qty" type="number" min="1" toolparamdescription="How many (default 1)">
<button>Add to cart</button>
</form>Tanpa JavaScript: API deklaratif WebMCP. Tag script menambahkannya di browser yang belum punya.
WebMCP vs MCP
Beda WebMCP dan MCP, dan mengapa Anda butuh keduanya
WebMCP meminjam model tool dari MCP, tetapi WebMCP adalah API browser, bukan protokol MCP. Keduanya saling melengkapi.
| Aspek | WebMCP | MCP |
|---|---|---|
| Tempat tool berjalan | Di JavaScript halaman Anda, di tab pengguna. | Di proses server, lokal (stdio) atau remote. |
| Cara agent memanggil | API browser, document.modelContext; browser menjadi perantara setiap panggilan. Tanpa JSON-RPC. | JSON-RPC 2.0 lewat stdio atau Streamable HTTP. |
| Yang Anda jalankan | Front end yang sudah Anda punya. Tanpa server baru. | Server MCP yang Anda host dan kelola sendiri. |
| Autentikasi | Sesi login pengguna yang sudah ada. Tidak perlu menerbitkan token. | Otorisasi berbasis OAuth untuk server remote. |
| Penemuan tool | Begitu halaman dibuka. Tidak ada yang perlu dicari sebelum kunjungan. | tools/list di endpoint yang sudah diketahui, plus registry publik. |
| Masa aktif | Selama halaman terbuka. | Selalu aktif, tanpa perlu browser. |
| Pengguna | Hadir, di halaman yang sama dengan agent. | Opsional: bisa berjalan headless. |
| Cakupan | Hanya tool, dengan skema input dan output. | Tool, resource, dan prompt, plus elicitation dan ekstensi. |
| Petunjuk pada tool | readOnlyHint, consequentialHint, untrustedContentHint. Secara default same-origin. | readOnlyHint, destructiveHint, idempotentHint, openWorldHint. |
| Status | Draf W3C Community Group. Bisa dipanggil ChatGPT desktop dan Codex; Chrome: origin trial. | Proyek Linux Foundation, 10.000+ server publik. |
Pakai keduanya
MCP melayani agent yang tidak pernah membuka situs Anda. WebMCP melayani agent yang bekerja di tab Anda, berdampingan dengan pengguna. Jalankan keduanya di satu backend: Shopify sudah melakukannya.
Sumber Draf WebMCP Explainer WebMCP Spesifikasi MCP Shopify di keduanya
Dari tracker spesifikasi
Permintaan spec yang sudah ditangani webmcpx
FAQ
Pertanyaan seputar WebMCP
Apa itu WebMCP?
API browser yang drafnya disusun di W3C Web Machine Learning Community Group: halaman mendaftarkan tool dengan
document.modelContext.registerTool(), lalu agen AI memanggilnya alih-alih membaca screenshot atau HTML halaman. Tool berjalan di tab milik pengguna sendiri.Bagaimana memakai WebMCP dari Claude Code atau Codex?
Jalankan
claude mcp add webmcpx -- npx -y webmcpx mcp(Codex:codex mcp add webmcpx -- npx -y webmcpx mcp). Setelah itu agen Anda membuka halaman di Chromium-nya sendiri dan mendapat tool WebMCP setiap halaman plus tool standar, di situs mana pun.Bagaimana membuat situs saya siap agent?
Tambahkan tag script webmcpx: setiap halaman langsung mendapat tool standar (pencarian, membaca, konteks halaman) tanpa kode lain. Lalu daftarkan aksi Anda sendiri, seperti pencarian atau tambah ke keranjang, dengan
tool(). Scan situs Anda di sini untuk mengeceknya.Apakah bisa di Firefox dan Safari?
Bisa. Jika browser belum punya WebMCP sendiri, webmcpx memuat polyfill WebMCP dari W3C di halaman HTTPS. Chrome, Firefox, dan Safari melihat tool yang sama.
Apakah WebMCP standar W3C?
Belum. WebMCP adalah draf dari W3C Web Machine Learning Community Group (2 November 2026). Chrome dan Edge menjalankannya lewat origin trial, Mozilla bersikap netral, dan WebKit punya keberatan. webmcpx mengikuti draf itu dan memuat polyfill W3C, jadi tool Anda berfungsi sekarang dan ikut berubah bersama spesifikasinya.
Amankah membiarkan agen memanggil tool di situs saya?
Tool berjalan di tab milik pengguna sendiri, dengan izin pengguna itu sendiri, dan tidak bisa melakukan apa pun yang memang tidak bisa dilakukan halaman. Tool standar webmcpx hanya membaca apa yang ditampilkan halaman, dengan karakter tak terlihat dibuang. Tandai tool Anda yang mengubah sesuatu dengan
consequentialHintagar agen bisa bertanya dulu kepada pengguna, dan biarkan linter menandai instruksi tersembunyi di deskripsi tool.Apakah WebMCP sama dengan MCP?
Tidak. WebMCP meminjam model tool dari MCP, tetapi ia adalah API browser, bukan protokol MCP: tool-nya ada di halaman dan berjalan di tab pengguna. Keduanya saling melengkapi, dan server MCP webmcpx menghubungkan keduanya.