📌 本文重點
- Kitesurf 是專給 AI 用的雲端 headless 瀏覽器
- 可與 Cloudflare Workers 深度整合做自動化腳本
- 很適合把重複的網頁操作交給 Agent 執行
一句話先說清楚：Kitesurf 是一個給 AI 用的雲端 headless 瀏覽器，讓你可以把「打開網頁、點按鈕、抓資料」這種重複操作，交給 Agent 自己跑。
官方介紹與新聞：
– Kitesurf 技術新聞報導（TechCrunch）：https://techcrunch.com/2026/08/07/cloudflare-launches-kitesurf-a-browser-built-for-ai-agents/
– Cloudflare 產品首頁（可留意 Kitesurf 區塊）：https://www.cloudflare.com/
核心功能：給 Agent 用的瀏覽器長什麼樣
1. 雲端托管，資源比傳統瀏覽器省
一般你要讓 AI 幫你「用瀏覽器」，有兩種常見做法：
- 在本機或伺服器跑一個 Chrome +
Puppeteer/Playwright - 用第三方爬蟲平台代抓資料
問題在於：瀏覽器超吃資源，一開幾十個 tab，CPU、RAM 都會爆；而且部署、維護都很麻煩。
Kitesurf 的做法：
- 在 Cloudflare 雲端托管瀏覽器實例，不用自己維護機器
- 專門為「自動化任務」優化，比
Chromium跑同樣任務用更少資源（來源：TechCrunch 報導）
💡 關鍵： 把瀏覽器搬上 Cloudflare，能在不爆 CPU/RAM 的前提下，大量並行跑 Agent 任務。
你可以直接採取的行動：
- 先盤點手上「需要瀏覽器、但完全不需要人眼看」的任務，例如每天打開 10 個網站抓價格、每週登入後台匯出報表。
- 把這些任務列成清單，準備遷移到 Kitesurf（後面教你怎麼寫最小範例）。
2. 為 AI agent 打好的控制介面：DOM、截圖、表單填寫
Kitesurf 的定位不是「給人看的瀏覽器」，而是給程式和 LLM 控制的瀏覽器實例。
實際可用的能力大致包含：
- 打開網址、導頁（類似
page.goto(url)） - DOM 操作與查詢（抓特定元素文字、點按鈕、選擇下拉選單）
- 截圖與元素截圖（讓 LLM 用圖像理解頁面）
- 表單填寫與送出（登入、填問卷、提交後台表單）
這對你有什麼實作上的意義？
- 可以把「在某個 SaaS 後台點 10 次才能拿到報表」寫成腳本，交給 Agent 每天自動跑
- 可以讓 LLM 不是只「看 API」，而是真的去打開你指定網站、看 DOM、再整理成結論
💡 關鍵： Kitesurf 把「點按鈕、填表單、抓文字」這種人類動作，變成 LLM 可以直接呼叫的程式接口。
你可以直接採取的行動：
- 準備一個你最常手動重複操作的網站，例如：電商後台、競品官網、資料庫查詢頁。
- 把你平常「人類操作步驟」拆成：打開哪個網址、點哪個按鈕、複製哪段文字，待會用 DOM 操作重現。
3. 和 Cloudflare Workers / KV / Queues 的組合
Kitesurf 最大的優勢之一，是長在 Cloudflare 生態系裡，可以直接跟既有服務串起來：
- Cloudflare Workers：用
JavaScript/TypeScript寫邏輯，呼叫 Kitesurf 打開頁面、抓資料、回傳給前端或 API 使用者 - KV / D1 / 專用儲存：把抓到的結果存起來，做快取或歷史紀錄（例如價格走勢）
- Queues / Cron Triggers：排程定期跑瀏覽任務，例如每天 9 點跑一次、每 5 分鐘抓一次競品價格
你可以直接採取的行動：
- 如果你還沒有 Cloudflare 帳號，先到 https://dash.cloudflare.com/ 註冊免費帳號。
- 打開 Workers 介面，建立一個新的 Worker 專案，準備寫 Kitesurf 腳本。
適合誰用？三種具體場景
1. 競品與價格監控（行銷、電商營運）
需求長這樣：
- 每天要看 5–10 個競品頁面，記錄價格、折扣、是否有新品
- 有 API 的就調 API，沒有 API 的就只好人工看
用 Kitesurf + Workers，你可以：
- 寫一個 Worker，定期叫 Kitesurf 打開競品頁面
- 用 DOM 抓出「商品名稱、價格、標籤（如：限時優惠）」
- 存到 Cloudflare KV / D1 或打回自己的後端
可立即行動：
- 選 3 個最關鍵的競品頁面，先做一版「只抓價格、標題」的最小腳本，之後再慢慢擴充。
2. 批次表單填寫、報表下載（營運、後勤）
典型情境：
- 每週要登入 3 個系統，下載 CSV 報表
- 或每天要在某個後台幫客戶批次建立任務 / 建案
用 Kitesurf 可以：
- 自動登入（在安全前提下，密碼用 Workers 的 secret 管理）
- 用表單填寫 API 一次送出多筆資料
- 把下載的檔案直接丟到你自己的儲存或觸發後續流程
可立即行動：
- 選一個「最痛」的後台操作流程，先嘗試只自動完成前 2 步（登入 +進入報表頁），驗證 Kitesurf 能正常操作，再慢慢接續。
3. 讓客製 chatbot / agent「會自己上網」
你可能已經有這些東西：
- 一個幫你回答內部 FAQ 的 chatbot
- 一個幫你寫 Email 的小 agent
但它們通常只：
- 用向量資料庫 + 你給的文件
- 無法自己上網查新的資訊或打開內部 web 工具
用 Kitesurf 時，你可以：
- 在 agent 的工具集中，多加一個「瀏覽器工具」
- 當使用者問的是需要去網站查的問題，LLM 會先呼叫 Kitesurf 打開指定網站
- 讀取 DOM / 截圖後再整理成回答
可立即行動：
- 先選一個固定網站，例如公司的內部儀表板或公開文檔站，做一個「專門會查這個站」的小 agent，實驗效果。
Kitesurf vs 其他「瀏覽器 Agent」怎麼選？
市面上也有其他主打「瀏覽器自動化 Agent」的工具，例如 Hark、Rindler。這裡簡單用表格幫你比：
| 名稱 | 核心功能 | 免費方案 | 適合誰 |
|---|---|---|---|
| Kitesurf | 雲端 headless 瀏覽器，深度整合 Cloudflare Workers / KV / Queues | 依 Cloudflare 定價，通常有免費級別 | 開發者、想在既有 Cloudflare 架構中加入 Agent 的團隊 |
| Hark | 成品型瀏覽器 Agent，幫你在瀏覽器內完成任務 | 依產品方案，偏 SaaS | 想直接用「會自己操作瀏覽器的助手」的終端使用者 |
| Rindler | 團隊 web 工作流程自動化，偏向表單填寫、資料整理等場景 | 有試用方案（參考 Product Hunt：https://www.producthunt.com/products/rindler） | 行銷、業務、資料分析團隊，想快速自動化重複網頁操作 |
延伸閱讀：
– Hark 報導：https://techcrunch.com/2026/08/05/hark-previews-its-browser-use-agent-for-completing-tasks/
– Rindler Product Hunt：https://www.producthunt.com/products/rindler
選擇原則：
- 如果你 會寫 JS/TS，而且已經或打算用 Cloudflare Workers，選 Kitesurf
- 如果你只是想要一個「幫你用瀏覽器的成品助手」，不想寫程式，優先看 Hark、Rindler 這類 SaaS
💡 關鍵： 能寫程式就選 Kitesurf 自建流程，不想碰程式碼就用 Hark / Rindler 這種成品 SaaS。
怎麼開始：用 Workers 寫一個最小 Kitesurf 範例
以下示範一個「最小可行」的流程：
- 在 Cloudflare Workers 用
TypeScript呼叫 Kitesurf - 打開某個網站（比如一個公開新聞頁）
- 抓特定 DOM 資料（例如標題）並回傳 JSON
注意：目前 Kitesurf 仍偏新產品，實際 API 介面可能會調整，下方程式碼屬概念示意，重點在於「整體串接思路」。
1. 建立 Worker 專案
在終端機：
npm install -g wrangler
wrangler init kitesurf-demo
cd kitesurf-demo
在 wrangler.toml 中設定好帳號等基本資訊。
2. 在 Worker 中呼叫 Kitesurf
假設 Cloudflare 為 Kitesurf 提供一個 REST API，可以透過 fetch 呼叫，示意程式碼如下：
export default {
async fetch(request: Request, env: any, ctx: ExecutionContext): Promise<Response> {
const url = new URL(request.url)
const target = url.searchParams.get('target') ?? 'https://example.com'
// 呼叫 Kitesurf 建立瀏覽器工作，打開頁面、抓指定 selector
const kitesurfResp = await fetch('https://api.cloudflare.com/kitesurf/sessions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${env.KITESURF_API_TOKEN}`,
},
body: JSON.stringify({
url: target,
actions: [
// 這裡描述要做的事：打開頁面後抓某個元素文字
{
type: 'extract',
selector: 'h1',
name: 'title',
},
],
}),
})
const data = await kitesurfResp.json()
// 回傳整理過的結果給使用者
return new Response(JSON.stringify({
target,
title: data.results?.title ?? null,
}), {
headers: { 'Content-Type': 'application/json' },
})
},
}
使用方式：部署 Worker 後，打：
curl "https://你的-worker-url/?target=https://news.yoursite.com/article"
就會得到類似：
{
"target": "https://news.yoursite.com/article",
"title": "某某新聞標題"
}
你可以直接採取的行動：
- 把上面的範例改成抓你自己常看的網站標題或價格欄位，驗證 DOM 抽取是否正常。
延伸：接上 OpenAI / Claude / DeepSeek，做一個「會查網站」的小 Agent
有了 Kitesurf，就可以把「查網站」變成 LLM 的一個工具。流程示意：
- 使用者對你的 API / 前端聊天介面提問
- 你的後端（或 Worker）判斷：這題需要上網查，則
- 先呼叫 Kitesurf，打開指定網站、抓到 DOM / 截圖
- 把抓到的資料丟給 LLM（OpenAI / Claude / DeepSeek 等），請它整理成易讀回答
範例流程簡化（概念）
// 1. 先用 Kitesurf 抓資料
const siteData = await callKitesurf({ url: 'https://example.com/pricing' })
// 2. 把資料丟給 LLM
const llmResp = await fetch('https://api.openai.com/v1/chat/completions', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${env.OPENAI_API_KEY}`,
},
body: JSON.stringify({
model: 'gpt-4o-mini',
messages: [
{
role: 'system',
content: '你是幫使用者讀網頁並整理重點的助理。',
},
{
role: 'user',
content: `以下是某網站的價格資訊 DOM 內容，請幫我整理成 3 點重點：\n${siteData.text}`,
},
],
}),
})
const answer = await llmResp.json()
你可以直接採取的行動：
- 選擇你慣用的 LLM（例如 OpenAI、Claude、DeepSeek），先在 Worker 中寫好「接收資料、整理成簡單 summary」的基礎流程，再把 Kitesurf 的結果接進去。
安全提醒：不要把敏感憑證丟進 Agent 上下文
讓 AI Agent 可以自己上網，很容易踩到安全雷，這裡列幾個實務注意事項：
- 憑證管理用 Workers secrets，不要硬寫在程式碼或 prompt 裡
- 例如
KITESURF_API_TOKEN、網站登入密碼，都用wrangler secret put管理 - 限制 Agent 能操作的網域與行為
- 只允許它打你指定的幾個網域，避免亂逛整個網路
- 嚴格控管「可以送出表單的頁面」，避免 Agent 誤發郵件或誤改設定
- 對輸入做驗證
- 使用者輸入的 URL 要做白名單檢查，不要讓任何人用你的 Agent 當跳板亂爬網站
你可以直接採取的行動：
- 在寫第一版 Kitesurf + LLM agent 時，就先實作「允許的網域列表」與 secrets 管理，避免之後擴充時重構成本過高。
總結：先從一個小任務開始，讓 Kitesurf 幫你接手瀏覽器
Kitesurf 的本質就是：把瀏覽器變成一個可程式化的雲端元件，讓你的 Agent 能確實「會自己上網做事」。
建議上手順序：
- 在 Cloudflare 建立 Worker，寫一個最小範例：打開網址、抓一段文字
- 接上你慣用的 LLM，做一個「會讀特定網站並整理重點」的小 Agent
- 再把你每天或每週的重複瀏覽器操作，一個個搬到 Kitesurf 上
從一個最小任務開始，你會很快感受到差別：原本要人盯著螢幕點 20 次的流程，變成一支 Worker + 一個 Agent 就能搞定。
🚀 你現在可以做的事
- 到 Cloudflare 註冊帳號並建立一個
kitesurf-demoWorker 專案- 挑一個每天重複造訪的網站，照文中範例寫 DOM 抽取腳本
- 選一個 LLM（如
gpt-4o-mini），把 Kitesurf 抓到的資料接進去做摘要 Agent
