[!info] related notes

• 所属 MOC: AI Agent Application MOC
• 对比: [[assistant-ui|assistant-ui]]
• 相关: Chat UI, Message State Management

Vercel AI SDK UI

一句话定义

Vercel AI SDK UI 是 Vercel 提供的 AI 应用前端 SDK，通过 useChat、useCompletion 等 React Hook，把流式聊天、工具调用、状态管理等复杂逻辑封装成简单的 API。

核心 API

useChat

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

function Chat() {
  const {
    messages,           // 消息列表
    input,              // 输入框内容
    handleInputChange,  // 输入变化处理
    handleSubmit,       // 提交处理
    isLoading,          // 是否正在生成
    stop,               // 停止生成
    reload,             // 重新生成
    error,              // 错误信息
    setMessages,        // 手动设置消息
    append,             // 追加消息
  } = useChat({
    api: '/api/chat',           // API 端点
    maxSteps: 5,                // 最大工具调用步数
    onFinish: (message) => {},  // 完成回调
    onError: (error) => {},     // 错误回调
  });

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

useCompletion

import { useCompletion } from '@ai-sdk/react';

function Completion() {
  const { completion, input, handleInputChange, handleSubmit } = useCompletion({
    api: '/api/completion',
  });

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={input} onChange={handleInputChange} />
      </form>
      <div>{completion}</div>
    </div>
  );
}

工具调用

const { messages } = useChat({
  api: '/api/chat',
  maxSteps: 5, // 允许多步工具调用
});

// 消息中包含工具调用
messages.map(m => {
  if (m.toolInvocations) {
    m.toolInvocations.map(tool => (
      <div key={tool.toolCallId}>
        {tool.toolName}: {tool.state === 'result' ? tool.result : '执行中...'}
      </div>
    ));
  }
});

后端集成

// 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-4'),
    messages,
    tools: { /* ... */ },
  });

  return result.toDataStreamResponse();
}

支持的框架

• Next.js (App Router / Pages Router)
• Svelte
• Vue.js / Nuxt
• Node.js
• Expo
• TanStack Start

参考资料

• Vercel AI SDK
• AI SDK UI Docs
• AI SDK GitHub