Vercel AI SDK：使用流行前端框架构建AI驱动应用程序-首席AI分享圈

🚀邀请体验：中国首家 AI IDE 智能编程软件 Trae 中文版下载，不限量使用 DeepSeek-R1 和 Doubao-pro!

综合介绍

Vercel AI SDK 是一款由 Vercel 团队开发的开源工具，旨在帮助开发者使用 React、Svelte、Vue 和 Solid 等框架构建人工智能应用。它支持多种语言模型供应商，包括 OpenAI、Anthropic、Google Gemini 等，提供统一的 API 接口，使得开发者可以快速整合 AI 功能到他们的项目中。该 SDK 还提供了实时流式响应和生成用户界面的功能，极大地简化了 AI 应用的开发流程。

功能列表

统一的 API 接口：支持多个 AI 模型提供商，如 OpenAI、Anthropic、Google 等。
实时流式响应：允许实时生成和显示文本响应，提升用户体验。
生成用户界面：使用 React Server Components 生成动态 UI。
多框架支持：兼容 React、Svelte、Vue 和 Solid，提供广泛的适用性。
社区支持：提供 GitHub Discussions 社区，用户可以提出问题、分享项目。

使用帮助

安装

要开始使用 Vercel AI SDK，你需要：

环境准备：
- 确保你已经安装了 Node.js 18+ 和 pnpm。
- 创建一个新的项目或在现有项目中添加该 SDK。
安装 SDK：
- 打开你的终端，导航到你的项目目录。
- 运行命令 pnpm add ai 来安装 SDK。
配置环境变量：
- 根据你使用的 AI 模型提供商（例如 OpenAI），设置相应的 API 密钥。通常，你会需要在 .env 文件中添加 OPENAI_API_KEY 或其他相关的环境变量。

使用步骤

基本文本生成

import { generateText } from 'ai';
import { openai } from '@ai-sdk/openai';
async function main() {
const { text } = await generateText({
model: openai('gpt-4-turbo'),
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
console.log(text);
}
main();
import { generateText } from 'ai';
导入{OpenAi } '@ai-sdk/openai' ;
异步 功能 主要的（ ） {
const {text} =等待generateText（{
模型：OpenAi（ 'GPT-4-Turbo' ），
system: '你是一个友好的助手！',
prompt: '为什么天空是蓝色的？',
});
控制台.log（text）;
}
主要的（）;

说明：这段代码展示了如何使用 OpenAI 的模型生成文本。generateText 是 Vercel AI SDK 提供的核心功能之一，允许你快速生成 AI 驱动的文本回答。

构建聊天界面如果你想要构建一个聊天界面，可以使用 useChat 或 useCompletion 钩子：

import { useChat } from 'ai/react';
function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat();
return (
<div>
<ul>
{messages.map((m, index) => (
<li key={index}>{m.role}: {m.content}</li>
))}
</ul>
<form onSubmit={handleSubmit}>
<input 
value={input} 
onChange={handleInputChange} 
placeholder="Say something..."
/>
<button type="submit">Send</button>
</form>
</div>
);
}
import { useChat } from 'ai/react';
功能 聊天（ ） {
const {消息，输入，handleinputChange，handlesubmit} = usechat（）;
返回（
％3CDIV％3E
3cul％3E
{messages.map（（m，index）=％3E（
％3cli键= {index}％3E {m.role}：{m.content}％3C/li％3E
))}
％3C/ul％3E
％3cform onsubmit = {handlesubmit}％3E
％3点
价值

说明：这个示例展示了 useChat 钩子的使用，可以快速构建一个支持实时响应的聊天界面。每次用户提交消息时，AI 将实时生成并显示回应。

生成 UI对于生成用户界面，Vercel AI SDK 支持使用 React Server Components（RSC）：

import { streamUI } from 'ai/rsc';
async function submitMessage() {
'use server';
const stream = await streamUI({
// ... 这里填写你的配置
});
return { ui: stream.value };
}
import { streamUI } from 'ai/rsc';
异步 功能 subtmessage （ ） {
“使用服务器” ；
const stream =等待流ui（{
// ... 这里填写你的配置
});
返回{ ui ：stream.value};
}