<callout icon="🪁" color="yellow_bg"> Kitesurf diumumkan Cloudflare pada 6 Agustus 2026. Semua data di tutorial ini diambil langsung dari dokumentasi resmi dan blog pengumuman Cloudflare. </callout>

Apa Itu Kitesurf

Kitesurf adalah browser stateless yang berjalan seluruhnya di atas Cloudflare Workers, dan menjadi bagian dari produk Browser Run (nama baru dari Browser Rendering, berganti nama 22 Juli 2026). Bedanya dengan Chrome atau Firefox yang kamu pakai sehari-hari: Kitesurf tidak dibuat untuk mata manusia. Tidak ada tab, tidak ada tema, tidak ada ekstensi, dan rendering-nya tidak dibuat pixel-perfect. Yang dikejar Kitesurf justru hal yang penting buat agent: jumlah token, ukuran context window, skalabilitas, performa, dan biaya jalan. Cloudflare membangun Kitesurf dari nol hanya dalam 12 minggu, memakai Rust yang dikompilasi ke WebAssembly, dengan tiga komponen open source sebagai fondasi:

• Blitz: rendering engine HTML/CSS dari DioxusLabs
• Stylo: CSS parser milik Firefox
• Boa: JavaScript engine buatan Rust <callout icon="⚠️" color="gray_bg"> Kitesurf masih berstatus beta dan gratis dipakai, tapi dibatasi limit per akun. Source code Kitesurf sendiri belum open source. Tiga komponen di atas (Blitz, Stylo, Boa) sudah open source lebih dulu, terpisah dari Kitesurf. </callout>

Kenapa Cloudflare Bikin Browser Terpisah untuk AI

Trafik bot sekarang menyumbang mayoritas request di internet, dan AI agent menjadi segmen yang tumbuh paling cepat. Menjalankan Chromium headless untuk tiap sesi agent itu berat karena Chromium membawa banyak fitur yang cuma berguna buat manusia. Kalau mau jalankan puluhan bahkan ratusan sesi agent bersamaan, biaya CPU dan memori membengkak cepat. Ancaman keamanannya juga beda. Browser manusia dirancang melawan malware dan phishing. Browser untuk agent menghadapi ancaman baru seperti prompt injection lewat konten halaman. Kitesurf memperlakukan setiap page load sebagai input yang tidak bisa dipercaya, dan setiap sesi bersifat stateless serta terisolasi penuh dari sesi lain.

Data Perbandingan Resmi: Kitesurf vs Chromium

Angka berikut adalah median dari 5 kali run pada 14 URL, membandingkan Kitesurf dengan Chromium warm pool, diambil langsung dari dokumentasi Cloudflare.

<callout icon="💡" color="blue_bg"> Perhatikan baris terakhir. Kitesurf justru lebih lambat secara wall time (durasi nyata dari awal sampai selesai), karena Chromium yang sudah "panas" (warm pool, JIT compiler siap pakai) menang di kecepatan mentah. Keunggulan Kitesurf ada di efisiensi CPU dan memori, bukan di kecepatan satu tugas. Manfaatnya baru terasa saat kamu menjalankan banyak sesi agent secara paralel dengan resource server yang sama. </callout> Soal kepatuhan standar web, Kitesurf sudah lolos lebih dari 235.000 subtest dari Web Platform Tests (WPT), suite pengujian resmi untuk konformansi standar W3C:

Kapan Pakai Kitesurf, Kapan Tetap Pakai Chromium

Kitesurf cocok dipakai kalau:

• AI agent kamu perlu merender halaman tapi bisa menerima trade-off tidak pixel-perfect
• Automation kamu mengandalkan Quick Actions sekali jalan, seperti ekstrak konten, screenshot, atau generate PDF
• Beban kerja kamu bursty dan butuh sesi yang stateless, terisolasi penuh, dan cuma hidup selama satu tugas Kitesurf belum jadi pilihan tepat kalau kamu butuh:
• Memutar video atau merender WebGL
• Melewati bot-challenge dengan TLS fingerprint asli
• Sesi login yang panjang dan butuh state yang tersimpan Untuk tiga kasus terakhir, tetap pakai browser default Browser Run yang berbasis Chromium.

Coba Dulu Tanpa Nulis Kode

Sebelum masuk ke implementasi, coba langsung lewat playground publik di kitesurf.cloudflare.app. Playground ini sudah menyertakan Chrome DevTools, jadi kamu bisa lihat DOM, console, network activity, sampai pemakaian memori WebAssembly saat Kitesurf merender halaman tertentu. Cara ini paling cepat untuk memastikan website yang mau di-crawl agent kamu memang kompatibel, sebelum ditulis ke kode produksi.

Syarat Sebelum Mulai

• Akun Cloudflare dengan akses ke Browser Run
• API Token dengan permission Browser Rendering - Edit, dibuat lewat dashboard Cloudflare
• Account ID Cloudflare kamu Kalau kamu mengakses Kitesurf dari dalam Cloudflare Worker lewat Workers binding, API Token tidak diperlukan.

Cara 1: Quick Actions (Paling Simpel)

Quick Actions adalah endpoint REST siap pakai untuk tugas umum seperti ambil HTML, screenshot, atau generate PDF. Untuk pakai Kitesurf, tinggal tambahkan parameter browser=kitesurf ke endpoint yang mau dipakai. Contoh, mengambil screenshot sebuah halaman:

curl -X POST 'https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-run/screenshot?browser=kitesurf' \
 -H 'Authorization: Bearer <API_TOKEN>' \
 -H 'Content-Type: application/json' \
 -d '{
 "url": "https://example.com"
 }' \
 --output "screenshot.png"

Ganti <ACCOUNT_ID> dan <API_TOKEN> sesuai punya kamu. Pola yang sama berlaku untuk semua endpoint Quick Actions di bawah, tinggal ganti path dan payload-nya:

Cara 2: CDP Endpoint (Untuk Puppeteer, Playwright, atau MCP Client)

Kalau agent kamu sudah pakai Puppeteer, Playwright, chrome-remote-interface, atau MCP client yang bicara CDP, kamu tidak perlu ganti tooling. Tinggal tambahkan parameter browser=kitesurf ke endpoint CDP yang sudah kamu pakai. Contoh konfigurasi untuk MCP client (chrome-devtools-mcp):

{
	"mcp": {
		"kitesurf": {
			"type": "local",
			"command": [
				"npx",
				"-y",
				"chrome-devtools-mcp@latest",
				"--wsEndpoint=wss://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/browser-run/devtools/browser?browser=kitesurf",
				"--wsHeaders={\"Authorization\":\"Bearer <API_TOKEN>\"}"
			],
			"enabled": true
		}
	}
}

Ganti <ACCOUNT_ID> dan <API_TOKEN> sesuai punya kamu. Konfigurasi ini membuat AI agent kamu, lewat MCP, langsung browsing pakai Kitesurf tanpa perlu buka Chrome sama sekali.

Cara Kerja Singkat

Alur kerja Kitesurf untuk satu tugas agent, sederhananya:

1. AI agent menerima tugas
2. Agent membuka sesi Kitesurf
3. Agent navigasi ke URL tujuan
4. Kitesurf membaca halaman (DOM, HTML, data)
5. Agent memutuskan aksi yang perlu diambil
6. Agent klik, isi form, atau scroll sesuai kebutuhan
7. Data yang dibutuhkan didapat, sesi selesai Kompatibel dengan tooling yang sudah biasa dipakai: Puppeteer, Playwright, Chrome DevTools Protocol (CDP), dan MCP.

Contoh Use Case Nyata

1. Riset harga kompetitor otomatis: agent buka puluhan website toko, catat harga, bandingkan, dan buatkan laporan (lihat contoh setup lengkapnya di bawah)
2. Monitor katalog produk: agent browsing halaman supplier secara berkala, berikan alert kalau ada perubahan
3. Isi form otomatis: agent submit formulir, daftar akun, atau proses return barang
4. RAG ingestion: render halaman yang berat di JavaScript, ekstrak kontennya, masukkan ke knowledge base
5. Screenshot dan generate PDF: tangkap halaman jadi gambar atau PDF tanpa perlu buka browser sungguhan

Setup dari Nol: Riset Harga Kompetitor dengan Kitesurf + Claude

Bagian ini mempraktekkan use case pertama di atas secara lengkap, dari folder kosong sampai laporan perbandingan harga jadi. Agent yang dipakai: script Node.js sederhana yang memanggil endpoint /json Kitesurf untuk ambil data harga terstruktur dari tiap website kompetitor, lalu hasilnya dianalisis oleh Claude lewat Anthropic API. Tidak perlu framework agent tambahan.

Yang Perlu Disiapkan

• Node.js versi 18 ke atas sudah terinstal di komputer
• Akun Cloudflare, API Token, dan Account ID (lihat bagian "Syarat Sebelum Mulai" di atas)
• Akun Anthropic dan API key, dibuat lewat console.anthropic.com, menu API Keys

Langkah 1: Bikin Folder Proyek

mkdir riset-harga-kompetitor
cd riset-harga-kompetitor
npm init -y

Langkah 2: Install Dependency

npm install @anthropic-ai/sdk dotenv

Node.js versi 18 ke atas sudah punya fetch bawaan, jadi tidak perlu tambahan library buat panggil API Cloudflare.

Langkah 3: Aktifkan Format Modern JavaScript

Buka package.json, tambahkan baris "type": "module" supaya bisa pakai import, bukan require.

{
  "name": "riset-harga-kompetitor",
  "type": "module"
}

Langkah 4: Simpan Semua Key di File .env

Bikin file baru bernama .env di folder yang sama, isi dengan key kamu sendiri:

CLOUDFLARE_ACCOUNT_ID=isi_account_id_kamu
CLOUDFLARE_API_TOKEN=isi_api_token_kamu
ANTHROPIC_API_KEY=isi_anthropic_key_kamu

Langkah 5: Tulis Script Utama

Bikin file index.js, isi lengkap seperti ini:

import "dotenv/config";
import Anthropic from "@anthropic-ai/sdk";
import fs from "node:fs/promises";

const CF_ACCOUNT_ID = process.env.CLOUDFLARE_ACCOUNT_ID;
const CF_API_TOKEN = process.env.CLOUDFLARE_API_TOKEN;

const anthropic = new Anthropic();

const daftarUrl = [
  "https://contoh-toko-a.com/produk/kursi-kerja",
  "https://contoh-toko-b.com/produk/kursi-kerja",
  "https://contoh-toko-c.com/produk/kursi-kerja",
];

async function ambilHarga(url) {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${CF_ACCOUNT_ID}/browser-run/json?browser=kitesurf`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${CF_API_TOKEN}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        url,
        prompt: "Ambil nama produk dan harga jual dari halaman ini",
        response_format: {
          type: "json_schema",
          json_schema: {
            type: "object",
            properties: {
              nama_produk: { type: "string" },
              harga: { type: "string" },
            },
            required: ["nama_produk", "harga"],
          },
        },
      }),
    }
  );

  const data = await response.json();
  return { url, ...data.result };
}

async function buatLaporan(daftarHarga) {
  const message = await anthropic.messages.create({
    model: "claude-sonnet-5",
    max_tokens: 1024,
    messages: [
      {
        role: "user",
        content: `Berikut data harga kompetitor yang baru diambil:\n\n${JSON.stringify(daftarHarga, null, 2)}\n\nBuatkan tabel perbandingan harga dan 3 insight singkat dari data ini.`,
      },
    ],
  });

  return message.content[0].text;
}

async function main() {
  console.log("Mengambil data harga dari semua kompetitor...");
  const hasil = await Promise.all(daftarUrl.map(ambilHarga));

  console.log("Membuat laporan perbandingan...");
  const laporan = await buatLaporan(hasil);

  await fs.writeFile("laporan-harga.md", laporan);
  console.log("Selesai. Laporan tersimpan di laporan-harga.md");
}

main();

Ganti isi daftarUrl dengan URL produk kompetitor yang mau kamu pantau.

Langkah 6: Jalankan

node index.js

Kalau berhasil, muncul dua baris log di terminal, lalu file baru bernama laporan-harga.md muncul di folder yang sama, isinya tabel perbandingan harga plus insight dari Claude. <callout icon="⚠️" color="gray_bg"> Sebelum dijalankan ke produksi, cek dulu robots.txt dan Terms of Service tiap website kompetitor. Endpoint /json memakai Workers AI (model Llama 3.3) secara default untuk ekstraksi datanya, jadi ada biaya kecil di sisi Workers AI selain biaya API Claude untuk bagian analisis laporan. </callout>

Kalau Mau Dikembangkan Lebih Lanjut

• Ganti prompt di ambilHarga supaya juga ambil data stok atau rating produk
• Jadwalkan script ini jalan otomatis tiap hari pakai cron job atau Cloudflare Workers Cron Triggers
• Simpan hasil tiap run ke database supaya bisa lihat tren harga dari waktu ke waktu

Link Resmi

• Dokumentasi Kitesurf: developers.cloudflare.com/browser-run/kitesurf
• Blog pengumuman: blog.cloudflare.com/kitesurf
• Playground publik: kitesurf.cloudflare.app
• Changelog peluncuran: developers.cloudflare.com/changelog
• Daftar lengkap Quick Actions: developers.cloudflare.com/browser-run/quick-actions <callout icon="🪁" color="pink_bg"> Ringkasan yang perlu diingat: Kitesurf bukan pengganti Chromium, tapi alat baru untuk kasus yang spesifik. Kalau agent kamu perlu browsing dalam jumlah banyak dan tidak butuh tampilan visual sempurna, Kitesurf bisa memangkas biaya CPU dan memori secara berarti. Kalau agent kamu butuh video, WebGL, atau sesi login panjang, tetap pakai Chromium. </callout>