导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

软实力

介绍

Vercel AI SDK 是一个专为开发者设计的 TypeScript 工具包，旨在简化 AI 功能（尤其是大语言模型 LLM）与前端应用的集成。它通过统一的 API 和模块化设计，帮助开发者快速构建流式对话、内容生成等 AI 驱动的前端应用。

https://ai-sdk.dev/

优势与价值

在 web 架构与 AI 合作层面，提供统一的 API 抽象，简化了模型接入和 UI 集成的成本，也让构建复杂 AI 应用变得更加可维护和可控。同时，其事件模型与 AG-UI 协议高度契合，在 2.0 底座中，可通过编写适配器，实现运行态聊天模式下前后端的数据传输。

支持多种协议

框架无关

事件模型与 AG-UI 协议高度契合

顶层概念总览

核心概念解析

消息模型（UIMessage / UIMessagePart）

核心定义：

export interface UIMessage<
  METADATA = unknown,
  DATA_PARTS extends UIDataTypes = UIDataTypes,
  TOOLS extends UITools = UITools,
> {
  id: string;
  role: 'system' | 'user' | 'assistant';
  metadata?: METADATA;
  parts: Array<UIMessagePart<DATA_PARTS, TOOLS>>;
}

常见的 Part 类型：

工具调用（ToolUIPart）具备严格的状态机：

export type ToolUIPart<TOOLS extends UITools = UITools> = ValueOf<{
  [NAME in keyof TOOLS & string]: {
    type: `tool-${NAME}`;
    toolCallId: string;
  } & (
    | { state: 'input-streaming'; input: DeepPartial<TOOLS[NAME]['input']> | undefined; }
    | { state: 'input-available'; input: TOOLS[NAME]['input']; callProviderMetadata?: ProviderMetadata; }
    | { state: 'output-available'; input: TOOLS[NAME]['input']; output: TOOLS[NAME]['output']; }
    | { state: 'output-error'; input: TOOLS[NAME]['input']; errorText: string; }
  );
}>;

数据流与协议（UIMessageChunk）

后端经由 SSE（或自定义协议）向前端持续推送 UIMessageChunk。前端将其解析并映射到 UIMessage：

export type UIMessageChunk =
  | { type: 'text-start' | 'text-delta' | 'text-end'; id: string; ... }
  | { type: 'reasoning-start' | 'reasoning-delta' | 'reasoning-end'; id: string; ... }
  | { type: 'tool-input-start' | 'tool-input-delta' | 'tool-input-available'; ... }
  | { type: 'tool-output-available' | 'tool-output-error'; ... }
  | { type: 'file' | 'source-url' | 'source-document'; ... }
  | DataUIMessageChunk
  | { type: 'start-step' | 'finish-step' }
  | { type: 'start' | 'finish' | 'abort' | 'message-metadata'; ... };

说明：

流处理器：将 Chunk 累积成 Message（processUIMessageStream）

职责：

关键实现：

export function processUIMessageStream<UI_MESSAGE extends UIMessage>({ stream, ...callbacks }): ReadableStream<InferUIMessageChunk<UI_MESSAGE>> {
  return stream.pipeThrough(new TransformStream({
    async transform(chunk, controller) {
      await runUpdateMessageJob(async ({ state, write }) => {
        // 维护 activeTextParts / activeReasoningParts
        // 解析 tool-input-delta 为部分 JSON 并合并
        // 根据 toolCallId 定位/更新 tool part
        // 处理 data-* 分片（可 transient）
        // 更新 message.metadata / 写入触发渲染
      });
      controller.enqueue(chunk as InferUIMessageChunk<UI_MESSAGE>);
    }
  }));
}

注意点：

业务编排与状态机（AbstractChat）

AbstractChat 负责：

核心流程（发送）：

sendMessage -> 规范化 user message -> makeRequest()
makeRequest():
1) 设置状态 submitted
2) 创建 activeResponse(state + AbortController)
3) transport.sendMessages() 取回 ReadableStream<UIMessageChunk>
4) consumeStream(processUIMessageStream(...)) 序列化应用增量
5) onFinish + 状态 ready；异常转 error

状态含义：

传输层（Transport）与默认实现

接口：

export interface ChatTransport<UI_MESSAGE extends UIMessage> {
  sendMessages(options): Promise<ReadableStream<UIMessageChunk>>;
  reconnectToStream(options): Promise<ReadableStream<UIMessageChunk> | null>;
}

默认 HTTP/SSE 实现：

return parseJsonEventStream({ stream, schema: uiMessageChunkSchema })
  .pipeThrough(new TransformStream({ transform(chunk, c) { c.enqueue(chunk.value) } }))