分類: AI 工具

📌 本文重點

• 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 任務。

你可以直接採取的行動：

1. 先盤點手上「需要瀏覽器、但完全不需要人眼看」的任務，例如每天打開 10 個網站抓價格、每週登入後台匯出報表。
2. 把這些任務列成清單，準備遷移到 Kitesurf（後面教你怎麼寫最小範例）。

2. 為 AI agent 打好的控制介面：DOM、截圖、表單填寫

Kitesurf 的定位不是「給人看的瀏覽器」，而是給程式和 LLM 控制的瀏覽器實例。

實際可用的能力大致包含：

• 打開網址、導頁（類似 page.goto(url)）
• DOM 操作與查詢（抓特定元素文字、點按鈕、選擇下拉選單）
• 截圖與元素截圖（讓 LLM 用圖像理解頁面）
• 表單填寫與送出（登入、填問卷、提交後台表單）

這對你有什麼實作上的意義？

• 可以把「在某個 SaaS 後台點 10 次才能拿到報表」寫成腳本，交給 Agent 每天自動跑
• 可以讓 LLM 不是只「看 API」，而是真的去打開你指定網站、看 DOM、再整理成結論

💡 關鍵： Kitesurf 把「點按鈕、填表單、抓文字」這種人類動作，變成 LLM 可以直接呼叫的程式接口。

你可以直接採取的行動：

1. 準備一個你最常手動重複操作的網站，例如：電商後台、競品官網、資料庫查詢頁。
2. 把你平常「人類操作步驟」拆成：打開哪個網址、點哪個按鈕、複製哪段文字，待會用 DOM 操作重現。

3. 和 Cloudflare Workers / KV / Queues 的組合

Kitesurf 最大的優勢之一，是長在 Cloudflare 生態系裡，可以直接跟既有服務串起來：

• Cloudflare Workers：用 JavaScript / TypeScript 寫邏輯，呼叫 Kitesurf 打開頁面、抓資料、回傳給前端或 API 使用者
• KV / D1 / 專用儲存：把抓到的結果存起來，做快取或歷史紀錄（例如價格走勢）
• Queues / Cron Triggers：排程定期跑瀏覽任務，例如每天 9 點跑一次、每 5 分鐘抓一次競品價格

你可以直接採取的行動：

1. 如果你還沒有 Cloudflare 帳號，先到 https://dash.cloudflare.com/ 註冊免費帳號。
2. 打開 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。這裡簡單用表格幫你比：

延伸閱讀：
– 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 的一個工具。流程示意：

1. 使用者對你的 API / 前端聊天介面提問
2. 你的後端（或 Worker）判斷：這題需要上網查，則
3. 先呼叫 Kitesurf，打開指定網站、抓到 DOM / 截圖
4. 把抓到的資料丟給 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 可以自己上網，很容易踩到安全雷，這裡列幾個實務注意事項：

1. 憑證管理用 Workers secrets，不要硬寫在程式碼或 prompt 裡
2. 例如 KITESURF_API_TOKEN、網站登入密碼，都用 wrangler secret put 管理
3. 限制 Agent 能操作的網域與行為
4. 只允許它打你指定的幾個網域，避免亂逛整個網路
5. 嚴格控管「可以送出表單的頁面」，避免 Agent 誤發郵件或誤改設定
6. 對輸入做驗證
7. 使用者輸入的 URL 要做白名單檢查，不要讓任何人用你的 Agent 當跳板亂爬網站

你可以直接採取的行動：

• 在寫第一版 Kitesurf + LLM agent 時，就先實作「允許的網域列表」與 secrets 管理，避免之後擴充時重構成本過高。

總結：先從一個小任務開始，讓 Kitesurf 幫你接手瀏覽器

Kitesurf 的本質就是：把瀏覽器變成一個可程式化的雲端元件，讓你的 Agent 能確實「會自己上網做事」。

建議上手順序：

1. 在 Cloudflare 建立 Worker，寫一個最小範例：打開網址、抓一段文字
2. 接上你慣用的 LLM，做一個「會讀特定網站並整理重點」的小 Agent
3. 再把你每天或每週的重複瀏覽器操作，一個個搬到 Kitesurf 上

從一個最小任務開始，你會很快感受到差別：原本要人盯著螢幕點 20 次的流程，變成一支 Worker + 一個 Agent 就能搞定。

🚀 你現在可以做的事

• 到 Cloudflare 註冊帳號並建立一個 kitesurf-demo Worker 專案
• 挑一個每天重複造訪的網站，照文中範例寫 DOM 抽取腳本
• 選一個 LLM（如 gpt-4o-mini），把 Kitesurf 抓到的資料接進去做摘要 Agent