Gunakan WebMCP untuk membangun situs yang berfungsi lebih baik dengan agen AI.
Mulai Bergabung dengan uji coba origin

WebMCP API

Apa itu WebMCP dan mengapa Anda harus peduli?

Baca dokumen

Tentukan alat WebMCP dengan JavaScript standar untuk menjalankan fungsi khusus situs, seperti input formulir dan navigasi situs.

Baca dokumen

Ubah formulir HTML standar Anda menjadi alat WebMCP dengan menambahkan anotasi.

Baca dokumen

Bersama-sama, WebMCP dan MCP membantu agen menyelesaikan tugas yang dipersonalisasi atas nama pengguna manusia.

Baca dokumen

Cara kerja WebMCP

Hanya dalam tiga langkah, situs Anda akan memberi tahu agen secara persis apa yang dapat mereka lakukan.
Mempelajari Imperative API
Langkah 1

Situs Anda mendeklarasikan tindakan yang dapat dilakukan agen, sebagai alat WebMCP. Setiap alat memiliki nama, deskripsi, dan skema JSON.

// Imperative API
document.modelContext.registerTool({
  name: "bookSlot",
  title: "Book a consultation slot",
  description: "Reserve a 30-minute consultation.",
  inputSchema: {
    type: "object",
    properties: {
      date:  { type: "string", format: "date" },
      time:  { type: "string" },
      name:  { type: "string" },
      email: { type: "string", format: "email" }
    },
    required: ["date", "time", "name", "email"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input, client) => {
    return await api.book(input);
  }
});
Langkah 2

Browser mengumpulkan dan menyajikan alat ini ke agen yang kompatibel dengan WebMCP pengguna, bersama dengan URL, judul, dan cakupan izin origin halaman.

Situs Anda berkomunikasi dengan browser, yang menerjemahkan untuk agen.
Langkah 3

Agen melihat kontrak, menyediakan argumen terstruktur, dan kode Anda akan melakukan sisanya. Pengguna tetap mendapatkan informasi untuk izin dan konfirmasi. Cara ini lebih cepat dan lebih andal daripada aktuasi.

// the agent's view
{
  "tool": "bookSlot",
  "arguments": {
    "date": "2026-07-31",
    "time": "14:00",
    "name": "Jerry Jones",
    "email": "jerry.jones@example.com"
  }
}

Mengoptimalkan situs Anda untuk agen

Buat alat yang aman dan sesuai dengan kebutuhan pengguna serta kemampuan situs Anda.

Baca contoh dari perspektif pengguna dan agen untuk memahami alat WebMCP yang mendukung perjalanan penting pengguna (CUJ).

Baca dokumen

Sama seperti yang Anda lakukan untuk aplikasi software apa pun, langkah pertama Anda adalah merencanakan strategi alat.

Baca dokumen

Pelajari cara menentukan dan membangun alat WebMCP yang berguna untuk situs atau aplikasi web Anda.

Baca dokumen

Baca panduan awal kami tentang keamanan bagi mereka yang membangun alat dengan WebMCP.

Baca dokumen

Sebelum merilis alat WebMCP, uji untuk mengonfirmasi bahwa agen memahami kapan harus memanggil alat, cara menjalankannya, dan jawaban apa yang dapat diterima.

Baca dokumen

Membangun dengan agen AI

Gunakan Modern Web Guidance dengan agen coding AI favorit Anda, sehingga Anda dapat mengakses praktik terbaik web dalam alur kerja pilihan Anda. 
npx modern-web-guidance@latest install
Baca dokumen
Gunakan Panduan Web Modern untuk membangun ekstensi lebih cepat, dengan bantuan agen coding.
Baca dokumen

Pertimbangan keamanan untuk developer agen

Developer agen harus merancang perlindungan terhadap teks berbahaya dari konten yang tidak tepercaya. Kami mengidentifikasi beberapa teknik keamanan yang relevan untuk agen yang menggunakan WebMCP.
Baca panduan kami

Bantuan AI, langsung di browser Anda. Dapatkan poin penting, klarifikasi konsep, dan temukan jawaban berdasarkan konteks tab yang Anda buka.

Gemini berfungsi di seluruh aplikasi Google untuk membantu Anda menyelesaikan pekerjaan sehari-hari.

Temukan Gemini di Chrome

Memperkenalkan agen AI

web.dev
Memahami dasar-dasar dan definisi berbagai teknologi baru, yang sering disebut sebagai AI.
Baca dokumen
web.dev
Sebagai praktisi web, kita harus membuat teknologi baru dengan penuh pertimbangan dan penuh tanggung jawab.
Baca dokumen
web.dev
Bangun dasar pengetahuan tentang AI untuk menambahkan fitur ke situs dan aplikasi web Anda.
Ikuti kursus