Vercel AI 全栈解决方案深度剖析

越来越多企业已经落地 AI 智能体应用，我们会不约而同的发现，AI 智能体应用在企业落地 90% 的工作都是工程架构设计（软件工程），只有 10% 是真正的 AI 大模型。

在当今快速发展的 AI 应用开发领域，开发者面临着多重挑战：模型提供商碎片化导致 API 不一致、流式处理实现复杂、用户界面开发繁琐、生产环境部署困难等。这些痛点严重影响了开发效率和最终用户体验。市面上也出现了许多 AI 智能体方案：LangChain、Spring AI Alibaba 开发编排框架，MCP 通信交互协议等等，这些框架专注攻坚智能体 基础设施层，尤其缺少 前端层（UI 组件层） 的支持。

Vercel 作为现代 Web 开发的领导者，敏锐地捕捉到了这一市场需求，推出了包含 AI SDK（基础设施层）、AI Elements（UI 组件层）和 AI Gateway（基础设施增强层）在内的完整的 AI 产品矩阵，这个矩阵不仅仅是工具的简单集合，更是一个精心设计的全栈解决方案，旨在为开发者提供从创意到部署的完整工作流。

AI Gateway 通过单个端点提供统一的 API，以访问数百种模型。它让您能够设置预算、监控使用情况、负载均衡请求和管理回退方案。
AI Elements 是一个基于 shadcn/ui 构建的可复用组件库和自定义注册中心，旨在帮助您更快地构建 AI 原生应用。它提供了包括对话、消息等预构建组件。
AI SDK 是一个 TypeScript 工具包，旨在帮助开发者使用 Next.js、Vue、Svelte、Node.js 等构建 AI 驱动的应用程序。类似于 LangChain，它抽象化了不同模型提供者之间的差异，统一了工具调用、消息管理、AI 处理、文本传输等流程。

这套解决方案并不是绑定的，每个部分都可以配合已有的技术架构使用。

使用三件套构建的 AI 智能体应用架构

下面通过详细的技术分析和实际可运行的代码示例，展示如何利用这一矩阵构建生产级的 AI 应用。

AI Gateway - 基础设施增强层

AI Gateway 作为代理层，为 AI 应用提供了企业级的基础设施支持，他主要有以下能力：

统一 API：帮助您通过最少的代码更改在提供者和模型之间切换.
高可靠性：如果某个提供者失败，将自动重试请求其他提供者.
嵌入支持：为搜索、检索和其他任务生成向量嵌入.
支出监控：跨不同供应商监控您的支出.

使用示例

在官网中获取 API KEY。
获取 API 密钥后，创建一个 .env.local 文件并保存您的 API 密钥, AI Gateway 提供商会默认使用 AI_GATEWAY_API_KEY 环境变量。

# .env.local
AI_GATEWAY_API_KEY=your_ai_gateway_api_key

创建运行脚本

import { streamText } from 'ai';
import 'dotenv/config';

async function main() {
const result = streamText({
    model: 'openai/gpt-4.1',
    prompt: 'Invent a new holiday and describe its traditions.',
});

for await (const textPart of result.textStream) {
    process.stdout.write(textPart);
}

console.log();
console.log('Token usage:', await result.usage);
console.log('Finish reason:', await result.finishReason);
}

main().catch(console.error);

ai 包由 AI SDK部分提供

streamText 会创建一个流式输出的对话， model 参数可以传入 AI Gateway 内置支持的模型名称（当然这些模型都是收费的）

AI Gateway 也支持关联自定义的模型，要在手动在 vercel 后台添加。添加时需要提供自定义模型的 API Key

AI Gateway 本质上是是一种网关服务，在 vercel后台可以观测模型使用情况、并且也可以和 LangChain、LangFuse、LlamaIndex 这些优秀的基础设施层框架配合使用。

AI Elements - UI 组件层

尽管市面上有很多向 AI 应用提供的组件库，例如 Ant Design X、 assistant-ui，但是 AI Elements 优势在于：

基于 shadcn/ui 搭建提供了更大自定义能力.
基于现在 AI 应用的常见交互提供了众多预置的展示组件（例如:氛围编程 Vibe coding）.
支持最新的react 19.x 语法规范.

核心价值：开箱即用的AI组件

这个组件库包含了构建AI应用所需的各种基础组件：

聊天模块：过分完成的聊天组件集合，例如：操作、分支、思维链、代码块、确认、上下文、对话、图片、来源、建议、工具等。
工作流模块：基于 React Flow 构建具有交互节点和动画连接的AI 元素工作流
Vibe coding 模块：网页预览、氛围编程中的代码显示、文档或其他输出，并内置了头部操作功能

快速上手

安装 AI Elements 非常简单，可以基于 CLI 命令安装，也可以通过shadcn/ui CLI 进行集成。

默认情况下，两种方式都会将 AI Elements 组件添加到 @/components 目录下。

bash

# cli 安装
npx ai-elements@latest

# shadcn/ui CLI 集成
npx shadcn@latest add @ai-elements/all

下面一个带有操作能力的代码实现：

常见 AI 智能应用实现效果：

AI SDK - 基础设施层

AI SDK 是 Vercel AI 生态的基石，它采用了一种高度抽象且类型安全的设计哲学 ———— 将大型语言模型（LLMs）集成到应用程序中是复杂且高度依赖于你使用的特定模型提供者。

每个模型提供者通常都有自己独特的与模型交互的方法，这使切换提供者的过程变得复杂，并增加了供应商锁定风险。为了解决这些挑战，AI SDK Core 提供了一种标准化的方法来通过语言模型规范与 LLMs 交互，该规范抽象了提供者之间的差异。这个统一的接口允许你在使用相同的 API 来切换提供者时轻松切换。

AI SDK 有两个主要库：

AI SDK Core：一个用于生成文本、结构化对象、工具调用以及使用 LLM 构建代理的统一 API。
AI SDK UI：一套与框架无关的钩子，用于快速构建聊天和生成式用户界面。它是一个与框架无关的工具包，简化了将高级 AI 功能集成到您应用程序中的过程。

以 openAI 的接入为例， AI SDK 提供了快速接入的方式。

import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

const { text } = await generateText({
    model: openai("gpt-5"),
    prompt: "What is love?"  prompt: "什么是爱？"
})

@ai-sdk/openai 是一个模型提供者，当使用 openai 时需要用这个提供者，如果使用 anthropic 时用 @ai-sdk/anthropic 模型提供者

import { generateText } from "ai"
import { anthropic } from "@ai-sdk/anthropic"

const { text } = await generateText({
    model: anthropic("claude-sonnet-4-latest"),
    prompt: "What is love?"  prompt: "什么是爱？"
})

而在 UI 层， AI SDK UI 提供了强大的抽象层，简化了管理聊天流和前端 UI 更新的复杂任务，使您能够更高效地开发动态 AI 驱动界面。通过三个主要钩子—— useChat 、 useCompletion 和 useObject ，您可以将实时聊天功能、文本补全、流式 JSON 和交互式助手功能集成到您的应用程序中。

useChat 提供实时聊天消息的流式传输，抽象化了输入、消息、加载和错误的状态管理，允许无缝集成到任何 UI 设计中。
useCompletion 使您能够在应用程序中处理文本补全，管理提示输入，并在新的补全被流式传输时自动更新 UI。
useObject 是一个钩子，允许你消费流式 JSON 对象，为你的应用程序提供一种简单的方式来处理和显示结构化数据。

AI SDK UI 支持以下框架：React、Svelte、Vue.js 和 Angular。以下是这些框架支持的函数对比：

在 Next 项目中集成 AI SDK UI 的示例：

'use client';

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

export default function Page() {
  const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
      api: '/api/chat',
    }),
  });
  const [input, setInput] = useState('');

  return (
    <>
      {messages.map(message => (
        <div key={message.id}>
          {message.role === 'user' ? 'User: ' : 'AI: '}
          {message.parts.map((part, index) =>
            part.type === 'text' ? <span key={index}>{part.text}</span> : null,
          )}
        </div>
      ))}

      <form
        onSubmit={e => {
          e.preventDefault();
          if (input.trim()) {
            sendMessage({ text: input });
            setInput('');
          }
        }}
      >
        <input
          value={input}
          onChange={e => setInput(e.target.value)}
          disabled={status !== 'ready'}
          placeholder="Say something..."
        />
        <button type="submit" disabled={status !== 'ready'}>
          Submit
        </button>
      </form>
    </>
  );
}

useChat 返回对象中包含：

messages 负责维护历史消息传输内容
sendMessage 是一个触发发送消息的函数
status 维护消息传输的状态

useChat 的参数定义传输系统对消息如何发送到您的 API 端点以及如何处理响应的细粒度控制。这对于 WebSocket 等替代通信协议、自定义认证模式或特定后端集成特别有用。

在 Next App 项目中， useChat 默认会从 api/chat 路由中获取传输方式。

const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport({
        api: '/api/chat',
    }),
});

 //  Next App 中可简写：
 const { messages, sendMessage, status } = useChat();

服务测可配合 AI SDK 实现

import { openai } from '@ai-sdk/openai';
import { convertToModelMessages, streamText, UIMessage } from 'ai';

// 允许流式处理响应长达 30 秒
export const maxDuration = 30;

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

  const result = streamText({
    model: openai('gpt-4.1'),
    system: 'You are a helpful assistant.',
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

AI SDK 也提供 Agent、Workflow、Loop Control 模式的支持, 可通过官网查看示例。

总结

优点：

Vercel AI产品矩阵提供了一个基于JavaScript/TypeScript技术栈的全面且强大的工具集，用于构建现代AI应用程序。从底层的AI SDK到UI组件AI Elements，再到基础设施增强的AI Gateway，这个生态旨在让开发者能够快速、高效地构建生产级的AI应用。
Vercel AI无疑是技术栈以前端为主导的开发者的首选： LangChain 文档比较散乱、版本升级较快，市面上教学文章也多以 Python 版本为主， Spring AI Alibaba 基于 java 技术栈，而 Vercel AI 完全基于 JavaScript/TypeScrip 实现： AI Elements 基于 React 技术栈又提供 shadcn/ui 模式的源码，在提供丰富预置组件的基础上又方便组件定制。 AI SDK 脱离框架限制， AI SDK Core 和 AI SDK UI 都允许使用主流前端全栈框架接入。 AI Gateway 提供了缓存、重试、监控等功能，适合生产环境需要高可用性和可观测性的场景。
Vercel官方博客和社区博客文章，提供最新动态和教程，提供的示例项目也涵盖常见用例。

缺点：

AI SDK 在对接模型时强依赖 Provider（提供者）, 而 Vercel 官方对国内主流大模型，如豆包、千问等并没有官方 Provider 支持，不过国内模型服务商基本兼容 openAI api，依旧可以借助 @ai-sdk/openai Provider 对接。但是国内大模型在工具链调用、mcp 调用上会存在消息格式不兼容，社区 Provider 也不够成熟。

总之，Vercel AI 矩阵代表了现代 AI 应用开发的前沿方向，特别适合追求开发效率和用户体验的团队。随着生态的不断完善，这一解决方案有望成为构建生产级 AI 应用的首选方案之一。

公众号会持续输出更多技术文章，欢迎关注。

Vercel AI 全栈解决方案深度剖析 ​

AI Gateway - 基础设施增强层 ​

使用示例 ​

AI Elements - UI 组件层 ​

核心价值：开箱即用的AI组件 ​

快速上手 ​

AI SDK - 基础设施层 ​

总结 ​

优点： ​

缺点： ​