Vercel AI Stack 2026：從 Streaming Chat 到 Durable Agent，完整工具鏈指南

Vercel 在 2026 上半年的開發者工具動作很密集：AI SDK 穩定成熟、Open Agents 開源、Workflows GA、Cloudflare 整合越來越是標準做法。這四個工具對應的是同一條路線的四個層次——最快上手的 streaming UI（AI SDK）→ 把它變成 agent（Open Agents）→ 讓 agent 可以跑長任務（Workflows）→ 把整個應用保護起來（Cloudflare）。

一、AI SDK：三行程式碼做出 streaming chat

你想在 Next.js 裡加一個 AI chat 功能。直接呼叫 OpenAI 或 Anthropic API 當然可以，但你很快會發現自己在處理 streaming、state management、error handling、abort controller——這些跟你的產品邏輯完全無關的事。

Vercel AI SDK 就是為了解決這個問題而生的。

Vercel AI SDK 是什麼

Vercel AI SDK 是一個開源的 TypeScript 框架，提供統一的介面來串接各家 LLM provider（OpenAI、Anthropic、Google、Mistral 等），並且內建 streaming、React hooks 和 Next.js 整合。

它分成三層：

AI SDK Core — 底層的 model routing 和 streaming 處理，跑在 server 端
AI SDK UI — React hooks（useChat、useCompletion），處理前端 state
AI SDK RSC — React Server Components 整合（進階用法）

對大多數場景來說，你只需要 Core + UI 就夠了。

為什麼比直接呼叫 API 好

直接用 fetch 打 Anthropic API，你需要自己處理：

SSE（Server-Sent Events）的 streaming parsing
前端的 message state 累加
loading / error / abort 狀態管理
不同 provider 的 request format 差異
Token 計算和 rate limit 處理

AI SDK 把這些全部抽象掉了。換 provider 只需要改一行 import，前端完全不用動。

從零開始：建一個 streaming chat

Step 1：安裝依賴

pnpm add ai @ai-sdk/anthropic

ai 是 SDK 本體，@ai-sdk/anthropic 是 Claude 的 provider adapter。

Step 2：建立 API Route

在 Next.js App Router 下建立 route handler：

// app/api/chat/route.ts
import { anthropic } from '@ai-sdk/anthropic'
import { streamText } from 'ai'

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = streamText({
    model: anthropic('claude-sonnet-4-6'),
    system: '你是一個友善的 AI 助手，用繁體中文回答問題。',
    messages,
  })

  return result.toDataStreamResponse()
}

這裡發生了幾件事：

anthropic() 建立一個 Claude model instance，SDK 會自動讀取 ANTHROPIC_API_KEY 環境變數
streamText() 發送 streaming request 並回傳一個可控的 stream 物件
toDataStreamResponse() 把 stream 轉成 Next.js 相容的 Response 格式

Step 3：建立前端 Chat UI

// app/chat/page.tsx
'use client'

import { useChat } from '@ai-sdk/react'

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } =
    useChat()

  return (
    <div className="mx-auto max-w-2xl p-4">
      <div className="space-y-4">
        {messages.map((m) => (
          <div
            key={m.id}
            className={m.role === 'user' ? 'text-right' : 'text-left'}
          >
            <span className="text-sm text-gray-500">
              {m.role === 'user' ? '你' : 'AI'}
            </span>
            <p className="mt-1 whitespace-pre-wrap">{m.content}</p>
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="mt-8 flex gap-2">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="輸入訊息..."
          className="flex-1 rounded-lg border px-4 py-2"
          disabled={isLoading}
        />
        <button
          type="submit"
          disabled={isLoading}
          className="rounded-lg bg-indigo-600 px-4 py-2 text-white disabled:opacity-50"
        >
          送出
        </button>
      </form>
    </div>
  )
}

useChat 是整個 SDK 最核心的 hook。它幫你處理：

訊息歷史的累加和管理
自動發送 POST request 到 /api/chat
Streaming 回應的即時渲染
Loading 和 error 狀態

三個檔案，一個完整的 streaming chat。

Step 4：設定環境變數

# .env.local
ANTHROPIC_API_KEY=sk-ant-xxxxx

跑 pnpm dev，打開 /chat，就能開始對話了。

useChat 的進階用法

useChat 還有幾個實用的參數：

const { messages, input, handleSubmit, stop, reload, setMessages } = useChat({
  api: '/api/custom-chat',        // 自訂 API endpoint
  initialMessages: [...],          // 預設訊息
  body: { userId: '123' },        // 額外帶入 request body
  onFinish: (message) => {         // streaming 完成時觸發
    console.log('完成:', message)
  },
  onError: (error) => {            // 錯誤處理
    console.error('錯誤:', error)
  },
})

幾個重點：

stop() — 中斷正在進行的 streaming（底層用 AbortController）
reload() — 重新生成最後一則 AI 回應
setMessages() — 手動操作訊息歷史（例如清除對話）

常見陷阱

忘記加 'use client' — useChat 是 React hook，必須在 Client Component 裡使用。如果你在 Server Component 裡直接呼叫，會拿到 hooks can only be called inside a function component 錯誤。

環境變數命名 — ANTHROPIC_API_KEY 不要加 NEXT_PUBLIC_ 前綴。API key 只能在 server 端使用，放到 NEXT_PUBLIC_ 會暴露在前端 bundle 裡。

大量訊息的效能問題 — 每次送出都會帶完整的 message history。對話太長時，token 數會快速膨脹。建議在 server 端做 message truncation 或 summarization。

如果你部署在 Vercel 上，可以搭配 AI Gateway 做 model routing，在 Vercel dashboard 設定 AI_GATEWAY_API_KEY 就能啟用，統一管理 API key、監控用量、自動 failover。

二、Open Agents：把 chat 升級成 coding agent

多數人對 coding agent 的想像還停留在「IDE 裡面跑一段對話」。Vercel Labs 的 Open Agents 指向一個不同的方向：agent 不綁在你的 IDE 裡，它跑在雲端、有自己的生命週期、能在你關掉瀏覽器之後繼續工作，做完了自己開 PR。

這個專案不是一個產品。它是一個 forkable template——你 fork 下來，改成自己的東西。MIT 授權，TypeScript 佔了 99.3%，目前大約 2.9k stars。

架構：Agent 在外面，Sandbox 在裡面

Open Agents 最關鍵的設計決策是 agent 跑在 sandbox VM 外部。Agent 透過 tool calling 和 sandbox 溝通，但兩者的生命週期完全解耦。

Loading diagram...

這個解耦帶來幾個好處：

Sandbox 可以被銷毀和重建。Agent 不需要關心 VM 的狀態，因為它可以從 snapshot 恢復。Sandbox 掛了，換一個就好。
Agent 可以休眠。Workflow SDK 提供 durable execution，agent 跑到一半可以 hibernate，等到需要時再 resume。中間不佔任何運算資源。
GitHub 整合是原生的。Agent 跑完一輪修改，可以自動 commit 並開 PR，不需要人類手動操作。

技術組成

整個 stack 相當直白：

Next.js 做 web UI 和 API routes
Vercel Workflow SDK 做 durable execution
PostgreSQL 做 agent state 和 conversation 持久化
Sandbox VM 提供隔離的程式碼執行環境
GitHub App 做 repo 存取和 PR 自動化
Redis（可選）做快取
ElevenLabs（可選）做語音互動

沒有什麼出人意料的選擇。這是 Vercel 自家的 stack，每一層都對應 Vercel 平台上的某個服務。這也是為什麼它是 forkable template 而不是 product——它展示的是「在 Vercel 上建 coding agent 的正確姿勢」。

適合誰

如果你想做以下任何一件事，Open Agents 是一個好的起點：

建一個給自己團隊用的 internal coding assistant
做一個 SaaS 產品，讓使用者可以在雲端跑 coding agent
研究 durable agent execution 的實作模式
學習 Vercel Workflow SDK 的實際用法

不適合的情境：你只是想要一個本地跑的 AI code completion 工具。這不是那個東西。

要注意的是，這個專案高度綁定 Vercel 生態系。你可以 fork 它，但如果你想跑在 AWS 或 GCP 上，Workflow SDK 那一層就得自己換掉。這不是批評——template 本來就是要展示 vendor 的最佳實踐——但你在評估時應該把這個因素算進去。

三、Workflows：用 "use workflow" 讓任務可以暫停恢復

來源：Vercel Blog

你在生產環境跑一個需要多個步驟的長時間任務——比如「用戶註冊後建立網站」：先抓用戶資料、再生成計劃、再建構站台。傳統做法是：Queue + Worker + Status DB + Retry Logic + 獨立的 Orchestrator 服務。五個基礎設施元件，各自有自己的 codebase 和維護成本。

Vercel Workflows 的答案是：全部消滅，直接寫在應用程式碼裡。

兩個 Directive，取代一整套 Infra

export async function createSite(input: { userId: string }) {
  "use workflow"
  const profile = await fetchUserProfile(input.userId)
  const plan = await generateSitePlan(profile)
  const site = await buildSite(plan)
  return site
}

async function fetchUserProfile(userId: string) {
  "use step"
  return db.user.findUnique({ where: { id: userId } })
}

"use workflow" 標記一個函數為持久化工作流程的入口點。"use step" 標記每個工作單元。其餘的——state persistence、retry、encryption、event log——全部自動處理。

Loading diagram...

每個 step 是獨立的 function invocation。失敗就只重試那個 step，不是整個 workflow。

底層架構：三個元件

Event Log（事件日誌）：每個 step 的輸入、輸出、stream chunk、sleep、hook、錯誤都被記錄下來。這是整個執行狀態的唯一真相來源，讓 workflow 可以在任意點中斷後精確恢復。

Fluid Compute：每個 step 作為獨立的 function invocation 執行。平台負責出列（dequeueing）、載入 state、解密、以及執行完成後的 handoff。你不需要管 worker 的生命週期。

Vercel Queues：自動為下一個 step 排隊。可以跑在 Vercel managed、self-hosted Postgres、或本地記憶體——本地開發和生產環境行為一致。

Pause/Resume：無資源消耗的等待

Workflows 提供兩種暫停機制：

sleep：時間型延遲，不佔用任何 compute。

await workflow.sleep("24 hours")

hook：等待外部事件觸發繼續執行。

const approval = await workflow.hook("payment-confirmed")

workflow 在暫停期間不跑任何東西、不計費、不需要 keep-alive 邏輯。恢復的時候從中斷點繼續，event log 提供所有之前執行的 context。

AI Agent 整合：Durable Streaming

對 AI agent 工作流程來說，Workflows 解決了一個具體問題：用戶斷線後 agent 繼續跑，重連後從斷點看到完整結果。

export async function bookingAgent(messages: UIMessage[]) {
  "use workflow";
  const writable = getWritable<UIMessageChunk>();
  const agent = new DurableAgent({
    model: "anthropic/claude-haiku-4.5",
    system: "You are a flight booking assistant.",
    tools: { searchFlights },
  });
  await agent.stream({ messages, writable });
}

DurableAgent 內建 Workflows primitives，stream chunk 也進 event log。客戶端斷線重連，可以從最後一個 chunk 繼續接收，而不是重跑整個 agent。

Beta 期間的數字

Vercel Workflows Beta 規模（單位：百萬）

1 億次 workflow run 處理
5 億次 step 執行
1,500 家以上客戶使用
每週 20 萬次 npm 下載
75 個版本在 beta 期間發布

Mux 用它做影片 AI pipeline，Durable 公司用 160 個 workflow directive 管理 5000 萬個網站，Flora 用它協調 50 個以上的影像生成模型。

和傳統 Orchestration 的差別

面向	傳統方式	Vercel Workflows
工作流定義位置	獨立 orchestration 服務	應用程式碼
基礎設施元件	Queue + Worker + Status DB + Retry + Orchestrator	無需管理
本地開發	難以重現生產環境	行為完全一致
加密	需要自己實作	預設全自動
計費	worker 持續跑、持續計費	只對實際 compute 計費
可觀測性	需要另外接工具	Event log 內建

Python SDK 與 Workflows 5

Python SDK 現在進入 beta，語法和 TypeScript 版本完全對稱：

@wf.workflow
async def create_site(*, user_id):
    profile = await fetch_user_profile(user_id)
    plan = await generate_site_plan(profile)
    return await build_site(plan)

@wf.step
async def fetch_user_profile(*, user_id):
    return await db.user.find_unique(id=user_id)

Workflows 5 的 roadmap 包含：native concurrency controls 和 lock primitives、全球分散式基礎設施、以及 snapshot-based runtime 減少 replay overhead。

Workflows 的核心賭注是：orchestration 邏輯應該和應用邏輯住在同一個地方。對一定規模以下的團隊（Durable 的六人工程團隊管理 5000 萬個網站是個具體案例）這個判斷是有說服力的。如果你已經在 Vercel 上跑 Next.js，"use workflow" 和 "use step" 是一個很低門檻的方式來做原本需要另外搭一整套基礎設施才能做的事。

四、Cloudflare：部署完的第一件事，讓它擋在前面

你把網站部署到 Vercel，買了一個域名，網站上線了。然後呢？

大部分人到這裡就停下來了。但這時候你的網站是直接裸露在網路上的，任何機器人、爬蟲、惡意流量都可以直接打進來。一個免費的設定，讓你的網站多一層保護。

你需要理解的三個角色

graph LR
    A[訪客的瀏覽器] -->|發出請求| B[Cloudflare]
    B -->|過濾後轉送| C[Vercel]
    C -->|回傳網頁| B
    B -->|回傳給訪客| A

    style B fill:#F6821F,color:#fff
    style C fill:#000,color:#fff
    style A fill:#4F46E5,color:#fff

Vercel — 你的網站實際跑在這裡。它負責執行程式碼、回傳頁面。
Cloudflare — 流量的守門員，坐在訪客和 Vercel 中間。它會過濾惡意流量，讓真人通過。
域名（Domain） — 就是你的網址。它決定流量要被送去哪裡。

在 Cloudflare 免費方案裡，你拿到的是：

功能	沒有 Cloudflare	有 Cloudflare
DDoS 防護	有限	無限流量防護
Bot 過濾	無	Bot Fight Mode
CDN 加速	Vercel 邊緣節點	全球 300+ 節點
隱藏真實 IP	否	是
費用	免費	免費

整個設定流程

flowchart TD
    A[你在 Vercel 買了域名] --> B[把 DNS 管理移交給 Cloudflare]
    B --> C{Cloudflare 掃描現有 DNS 記錄}
    C --> D[清理重複的 A 記錄]
    D --> E[新增 CNAME 指向 Vercel]
    E --> F[在 Vercel 更換 Nameservers]
    F --> G[DNS 傳播：10分鐘 ~ 2小時]
    G --> H[開啟 Cloudflare Bot Fight Mode]
    H --> I[完成 ✓]

    style I fill:#22c55e,color:#fff
    style A fill:#4F46E5,color:#fff

步驟一：把域名加到 Cloudflare

登入 cloudflare.com
右上角 + 新增 → 連結網域
輸入你的域名（只輸入 yourdomain.com，不要加 https:// 或結尾的 /）
選 自動匯入 DNS 記錄（推薦）
AI 訓練機器人封鎖：如果你的網站有 Google AdSense，選「請勿封鎖」，否則會影響 Google 爬蟲和 SEO

重要：封鎖 AI 訓練機器人會讓 Googlebot 也被擋住，導致你的網站無法被搜尋引擎索引。有廣告的網站一定要選「請勿封鎖」。

步驟二：清理 DNS 記錄

Cloudflare 自動掃描後，你可能會看到重複的 A 記錄（同一個名稱有兩個不同 IP）。這會造成流量方向混亂。

把這些全部刪掉：

*（萬用字元）的所有 A 記錄
@（根域名）的所有 A 記錄
www 的所有 A 記錄

然後新增兩筆 CNAME 記錄：

類型	名稱	內容	Proxy 狀態
CNAME	`@`	`cname.vercel-dns.com`	開啟（橘色雲朵）
CNAME	`www`	`cname.vercel-dns.com`	開啟（橘色雲朵）

為什麼用 CNAME 而不是 A 記錄？ A 記錄指向固定 IP，Vercel 的 IP 可能會變動。CNAME 指向域名，Vercel 自己管理背後的 IP，永遠正確。

步驟三：更換 Nameservers

Cloudflare 會給你兩個 nameserver，長這樣：

vera.ns.cloudflare.com
yew.ns.cloudflare.com

（每個帳號的 nameserver 名稱不同，以你的 Cloudflare 頁面顯示的為準）

接著去 Vercel：

Dashboard → Domains → 點你的域名
找到 Nameservers 設定
把原本的 ns1.vercel-dns.com 和 ns2.vercel-dns.com 換成 Cloudflare 給你的兩個

步驟四：等待 DNS 傳播

更換 nameserver 之後，這個變更需要時間在全球 DNS 伺服器之間同步。

sequenceDiagram
    participant 訪客
    participant DNS伺服器
    participant Cloudflare
    participant Vercel

    訪客->>DNS伺服器: yourdomain.com 在哪？
    DNS伺服器->>Cloudflare: 詢問（nameserver 已換）
    Cloudflare->>DNS伺服器: IP 在這裡
    DNS伺服器->>訪客: 找到了
    訪客->>Cloudflare: 連線請求
    Cloudflare->>Vercel: 轉送（過濾後）
    Vercel->>訪客: 回傳網頁

等待時間：最快 10 分鐘，通常 1 小時內，最慢 24 小時。你可以用 https://dnschecker.org/#NS/你的域名 查看傳播進度。

步驟五：開啟 Bot Fight Mode

DNS 生效後，回到 Cloudflare：

左側選單 → 安全性 → Bot
開啟 Bot Fight Mode

這樣 Cloudflare 會自動識別並封鎖常見的惡意機器人，不影響 Googlebot 和真人訪客。

設定完成後的架構

graph TD
    subgraph 外部威脅
        B1[垃圾留言機器人]
        B2[DDoS 攻擊流量]
        B3[惡意爬蟲]
    end

    subgraph 正常流量
        V1[真人訪客]
        V2[Googlebot]
        V3[AdSense 爬蟲]
    end

    CF[Cloudflare 守門員]

    B1 -->|封鎖 ✗| CF
    B2 -->|封鎖 ✗| CF
    B3 -->|封鎖 ✗| CF
    V1 -->|通過 ✓| CF
    V2 -->|通過 ✓| CF
    V3 -->|通過 ✓| CF

    CF --> Vercel[你的 Vercel 網站]

    style CF fill:#F6821F,color:#fff
    style Vercel fill:#000,color:#fff

整個流程用一句話說：把域名的 DNS 控制權交給 Cloudflare，讓所有流量先經過 Cloudflare 過濾再到 Vercel。 你不需要改任何程式碼，不需要升級方案，只是改了兩個 nameserver 和兩筆 DNS 記錄，就獲得了企業級的 DDoS 防護和 Bot 過濾。

這四個工具的邊界設計得很清楚，不會互相踩腳。AI SDK 處理 streaming UI 的底層雜活，Open Agents 示範如何把 UI 升級成有生命週期的 cloud agent，Workflows 把長任務的 orchestration 邏輯收進應用程式碼，Cloudflare 在整個應用前面加一道免費的防護網。你可以依需求一層一層加上去，不需要一次全部上。

如果你正在建置 Vercel 開發環境，推薦配置一套完整的開發桌面：桌面 4 件套編輯選物——機械鍵盤、USB-C Hub、螢幕掛燈的組合，對長時間開發工作的舒適度有明顯提升。

參考來源

Vercel AI SDK 官方文件
Vercel Labs / open-agents
Vercel Blog: A new programming model for durable execution

利益揭露：本文部分連結為聯盟連結，點擊購買我會獲得回饋，不影響你的價格。