第 9 课：AI 聊天

实际代码

实际项目中使用 Vercel AI SDK 的 useChat Hook（需要 API key）：

'use client'
import { useChat } from 'ai/react'

export function Chat() {
  const {
    messages,
    input,
    handleInputChange,
    handleSubmit,
    isLoading
  } = useChat() // 自动调用 /api/chat

  return (
    <div>
      {messages.map(m => (
        <div key={m.id} className={cn(
          "p-3 rounded-lg",
          m.role === 'user'
            ? "bg-primary text-white ml-auto"
            : "bg-secondary"
        )}>
          {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input value={input}
          onChange={handleInputChange} />
        <button type="submit">发送</button>
      </form>
    </div>
  )
}

// app/api/chat/route.ts
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.toDataStreamResponse()
}