AI SDK（單一 `ai` npm 套件）
├── AI SDK Core     → 底層 API：串流、結構化輸出、工具呼叫
├── AI SDK UI       → React/Vue/Svelte Hooks：useChat、useAssistant
└── AI SDK Agent    → Agent 框架：ToolLoop、StopConditions、Guardrails

import { generateText, streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
// import { anthropic } from '@ai-sdk/anthropic';   ← 換這行就行
// import { google } from '@ai-sdk/google';          ← 或這行

// 文字生成（非串流）
const { text } = await generateText({
  model: openai('gpt-4o'),
  prompt: '解釋量子糾纏給高中生聽',
});

// 串流文字（串流）
const result = streamText({
  model: openai('gpt-4o'),
  prompt: '寫一篇 500 字的台灣旅遊介紹',
});
for await (const chunk of result.textStream) {
  process.stdout.write(chunk);
}

// app/api/chat/route.ts — Next.js API Route
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';

export async function POST(req: Request) {
  const { messages } = await req.json();
  const result = streamText({
    model: openai('gpt-4o'),
    messages,
  });
  return result.toAIStreamResponse();
}

// app/page.tsx — 前端元件
import { useChat } from 'ai/react';

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
        <button>送出</button>
      </form>
    </div>
  );
}

import { generateText, tool, Output } from 'ai';
import { openai } from '@ai-sdk/openai';
import { z } from 'zod';

const result = await generateText({
  model: openai('gpt-4o'),
  tools: {
    getWeather: tool({
      description: '查詢某城市的當前天氣',
      inputSchema: z.object({ location: z.string() }),
      execute: async ({ location }) => {
        return { temperature: 28, condition: '晴' };
      },
    }),
    searchFlight: tool({
      description: '搜尋航班價格',
      inputSchema: z.object({ 
        from: z.string(), 
        to: z.string(), 
        date: z.string() 
      }),
      execute: async ({ from, to, date }) => {
        return { price: 12500, airline: '中華航空' };
      },
    }),
  },
  output: Output.object({
    schema: z.object({
      recommendation: z.string(),
      totalCost: z.number(),
    }),
  }),
  prompt: '幫我規劃下週從台北到東京的旅遊建議',
});

const cachedModel = cached(openai('gpt-4o'));
const result = await streamText({
  model: cachedModel,
  prompt: '重複的請求不再消耗 API 額度',
});

import { opaPolicy, wasmPolicyClient } from '@ai-sdk/policy-opa';

const toolApproval = opaPolicy({
  client: await wasmPolicyClient({ wasm }),
  path: 'agent/call/decision',
});

const result = await generateText({
  model: anthropic('claude-sonnet-4-5'),
  tools: { git, bash, queryLogs },
  toolApproval,  // ← OPA 控制哪些工具可以呼叫
  prompt: '找到失敗的測試並推送修正',
});

const result = await generateText({
  model: openai('gpt-4o-mini'),
  prompt: '解釋為何雞不適合當太空人',
  telemetry: {
    metadata: {
      userId: 'user-123',
      threadId: 'thread-456',
    },
  },
});

// 只用 3 個核心步驟就能啟動
// 1. Server: API Route 串接 streamText
// 2. Client: useChat hook 綁定 UI
// 3. 切換模型 provider 只需改一行

// 步驟 1: pages/api/chat.ts
import { streamText } from 'ai';
import { anthropic } from '@ai-sdk/anthropic';

export default async function handler(req, res) {
  const result = streamText({
    model: anthropic('claude-sonnet-4-20250514'),
    messages: req.body.messages,
  });
  return result.pipeDataStreamToResponse(res);
}

// 步驟 2: 前端 Chat.tsx
import { useChat } from 'ai/react';
// useChat 自動處理串流、狀態管理、錯誤處理

// 步驟 3: 要換成 Gemini？
// 改 import { google } from '@ai-sdk/google'
// 改 model: google('gemini-2.5-pro')
// 其他全部不用動