Vercel 发布用于 React UI 集成的 AI Elements

Vercel 发布了AI Elements，这是一个基于shadcn/ui构建的开源React UI原语库，旨在与Vercel AI SDK集成。这些组件（如消息线程、输入框、推理面板和响应操作）可以通过 npx ai-elements@latest 快速搭建起来。该工具将组件文件注入到开发人员的项目中，支持检查和定制，特别是基于Tailwind CSS的样式。

AI Elements 的基础是AI SDK，这是一个 TypeScript 工具包，提供与多个提供商的模型标准化集成，用于聊天、补全和结构化对象流的 UI 无关钩子，以及用于模型生成、工具调用和跨框架（如 React、Next.js、Vue、Svelte 和 Node.js）的智能体编排的核心 API。

最近的AI SDK 5引入了对 React、Vue 和 Svelte 的功能支持。这个版本包括一个解耦的状态模型，可以轻松地与 Zustand 或 Redux 等外部存储集成；一个框架无关的 AbstractChat 类，用于构建自定义集成；以及一个向服务器发送事件（Server-Sent Events）的转变，用于流式传输，提高了 Vercel 的稳定性和可调试性。

社区对AI Elements公告的反应非常积极和好奇。用户Shannon Code表达了对动态创作的好奇，他说：

它们可以动态创建吗？就像在请求的时候完全推断出来的那样？如果是这样，这非常接近按需 jit ui。

与此同时，软件开发者Matt Pocock对其设计起源进行了猜测，他问道：

这是基于 Kibo UI 吗？

与其他专注于 AI 的 UI 框架相比，Vercel 的工具占据了一个独特的空间，比如 Vercel 的v0工具，它允许开发人员用自然语言描述 UI 组件，并使用 Next.js 和 Tailwind CSS 等框架生成代码。它支持 UI 和后端生成，并连接到 shadcn/ui 组件，支持从提示符到组件文件的快速原型。

更广泛的 AI UI 工具包括Cursor AI和Galileo AI。这些工具强调 AI 驱动的原型制作、自动布局生成、实时设计辅助和协作工作流，但在 UI 范例和开发人员关注点方面与 Vercel 的堆栈有所不同。

在后端，像Pydantic AI这样的 Python 框架提供了与 AI SDK 不同的方法。Pydantic AI 专为数据完整性和类型安全而设计，使用 Python 的类型驱动工作流和依赖注入，适合后端代理和结构化流验证。相比之下，Vercel 的 AI SDK 强调实时流式 UI 和 JavaScript 生态系统内的边缘优化操作。

总体而言，Vercel AI Elements和AI SDK为构建跨多个 JavaScript 框架的 AI 原生前端提供了一个内聚的、可定制的基础。这些工具与以 Web 为中心、以组件为先的用户保持一致，他们习惯于通过代码定制 UI 构建块。

原文链接：

https://www.infoq.com/news/2025/08/vercel-ai-sdk/