Vercel AI SDK示例项目：从零开始构建AI聊天应用
项目地址: https://gitcode.com/GitHub_Trending/ai/ai 引言：为什么选择Vercel AI SDK？
还在为构建AI聊天应用而头疼吗？面对复杂的API集成、流式响应处理和状态管理感到无从下手？Vercel AI SDK（AI软件开发工具包）为你提供了一套完整的解决方案，让你能够快速构建现代化的AI聊天应用。
通过本文，你将学会：
- ✅ Vercel AI SDK的核心概念和架构设计
- ✅ 从零搭建Next.js + OpenAI聊天应用
- ✅ 实现流式消息处理和实时UI更新
- ✅ 掌握错误处理和状态管理最佳实践
- ✅ 部署和优化生产环境的AI应用
技术栈概览
| 技术组件 | 版本要求 | 主要功能 |
|---|---|---|
| Next.js | 14.0+ | React全栈框架 |
| Vercel AI SDK | 最新版 | AI应用开发工具包 |
| OpenAI API | GPT-4o | 大语言模型服务 |
| TypeScript | 5.0+ | 类型安全的开发体验 |
| Tailwind CSS | 3.0+ | 实用优先的CSS框架 |
环境准备与项目初始化
系统要求
- Node.js 18.0 或更高版本
- pnpm 8.0 或更高版本（推荐）
- OpenAI API密钥
创建Next.js项目
# 使用create-next-app创建项目
npx create-next-app@latest ai-chat-app --typescript --tailwind --eslint --app --src-dir --import-alias "@/*"
# 进入项目目录
cd ai-chat-app
# 安装AI SDK相关依赖
pnpm add ai @ai-sdk/react @ai-sdk/openai
环境变量配置
创建 .env.local 文件并添加你的OpenAI API密钥：
OPENAI_API_KEY=你的API密钥
核心架构设计
应用架构流程图
文件结构规划
src/
├── app/
│ ├── api/
│ │ └── chat/
│ │ └── route.ts # API路由处理
│ ├── globals.css # 全局样式
│ ├── layout.tsx # 应用布局
│ └── page.tsx # 主聊天页面
├── components/
│ └── ChatInput.tsx # 聊天输入组件
└── lib/
└── constants.ts # 常量配置
实现步骤详解
步骤1：创建API路由处理
在 src/app/api/chat/route.ts 中创建聊天API端点：
import { streamText } from 'ai';
import { openai } from '@ai-sdk/openai';
import { createOpenAI } from '@ai-sdk/openai';
// 创建OpenAI实例
const openai = createOpenAI({
apiKey: process.env.OPENAI_API_KEY!,
});
export async function POST(req: Request) {
try {
const { messages } = await req.json();
// 创建流式文本生成
const result = streamText({
model: openai('gpt-4o'),
system: '你是一个有帮助的AI助手，用中文回答用户的问题。',
messages,
});
// 返回UI消息流响应
return result.toUIMessageStreamResponse();
} catch (error) {
console.error('API Error:', error);
return new Response(
JSON.stringify({ error: '内部服务器错误' }),
{ status: 500, headers: { 'Content-Type': 'application/json' } }
);
}
}
步骤2：实现主聊天界面
在 src/app/page.tsx 中创建主聊天组件：
'use client';
import { useChat } from '@ai-sdk/react';
import { useState } from 'react';
export default function ChatPage() {
const {
messages,
input,
handleInputChange,
handleSubmit,
isLoading,
error,
stop,
reload
} = useChat({
api: '/api/chat',
initialMessages: [
{
id: '1',
role: 'assistant',
content: '你好！我是AI助手，有什么可以帮你的吗？'
}
],
onError: (error) => {
console.error('Chat error:', error);
}
});
return (
<div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
{/* 消息列表 */}
<div className="flex-1 overflow-y-auto space-y-4 mb-4">
{messages.map((message) => (
<div
key={message.id}
className={`p-4 rounded-lg ${
message.role === 'user'
? 'bg-blue-100 ml-8'
: 'bg-gray-100 mr-8'
}`}
>
<div className="font-semibold mb-1">
{message.role === 'user' ? '你' : 'AI助手'}
</div>
<div className="whitespace-pre-wrap">
{message.content}
</div>
</div>
))}
{isLoading && (
<div className="p-4 bg-gray-100 rounded-lg mr-8">
<div className="flex items-center space-x-2">
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
<div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
</div>
</div>
)}
</div>
{/* 错误提示 */}
{error && (
<div className="mb-4 p-3 bg-red-100 border border-red-300 rounded-lg">
<div className="text-red-700 font-medium">出错了</div>
<div className="text-red-600 text-sm">{error.message}</div>
<button
onClick={reload}
className="mt-2 px-3 py-1 bg-red-600 text-white rounded text-sm"
>
重试
</button>
</div>
)}
{/* 输入表单 */}
<form onSubmit={handleSubmit} className="flex space-x-2">
<input
value={input}
onChange={handleInputChange}
placeholder="输入你的问题..."
disabled={isLoading}
className="flex-1 p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50"
/>
<button
type="submit"
disabled={!input.trim() || isLoading}
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? '发送中...' : '发送'}
</button>
{isLoading && (
<button
type="button"
onClick={stop}
className="px-4 py-3 bg-gray-500 text-white rounded-lg hover:bg-gray-600"
>
停止
</button>
)}
</form>
</div>
);
}
步骤3：配置全局样式和布局
在 src/app/globals.css 中添加Tailwind CSS配置：
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
}
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(
to bottom,
transparent,
rgb(var(--background-end-rgb))
)
rgb(var(--background-start-rgb));
}
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}
高级功能扩展
1. 消息持久化存储
// 在useChat中添加本地存储功能
const { messages, setMessages } = useChat({
api: '/api/chat',
onFinish: (message) => {
// 保存到localStorage
const chatHistory = JSON.parse(localStorage.getItem('chatHistory') || '[]');
chatHistory.push(message);
localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
}
});
2. 多模态支持（图片处理）
// 支持图片附件的API处理
const result = streamText({
model: openai('gpt-4o'),
messages: messages.map(msg => ({
...msg,
content: msg.content.map(part => {
if (part.type === 'image') {
return {
type: 'image' as const,
image: part.image
};
}
return part;
})
}))
});
3. 速率限制和错误处理
// 添加API调用频率限制
let lastRequestTime = 0;
const REQUEST_DELAY = 1000; // 1秒间隔
export async function POST(req: Request) {
const now = Date.now();
if (now - lastRequestTime < REQUEST_DELAY) {
return new Response(
JSON.stringify({ error: '请求过于频繁，请稍后再试' }),
{ status: 429, headers: { 'Content-Type': 'application/json' } }
);
}
lastRequestTime = now;
// ...原有逻辑
}
部署与优化
Vercel部署配置
创建 vercel.json 配置文件：
{
"version": 2,
"builds": [
{
"src": "package.json",
"use": "@vercel/next"
}
],
"env": {
"OPENAI_API_KEY": "@openai_api_key"
},
"functions": {
"app/api/chat/route.ts": {
"maxDuration": 30
}
}
}
性能优化建议
- 启用Edge Runtime：对于AI应用，使用Edge Runtime可以获得更低的延迟
- 实现请求缓存：对常见问题添加缓存机制
- 监控API使用：跟踪token使用量和响应时间
- 错误重试机制：实现自动重试失败的请求
常见问题排查
Q1: API密钥配置错误
症状：收到401未授权错误 解决方案：检查环境变量名称和值是否正确
Q2: 流式响应中断
症状：消息显示不完整 解决方案：检查网络连接，增加超时时间
Q3: 内存使用过高
症状：应用变慢或崩溃 解决方案：优化消息历史管理，实现分页加载
总结与展望
通过Vercel AI SDK，我们成功构建了一个功能完整的AI聊天应用。这个解决方案的优势在于：
- 🚀 开发效率高：使用声明式API快速构建功能
- 🌐 跨框架支持：支持React、Vue、Svelte等多个框架
- ⚡ 性能优异：原生支持流式响应，用户体验流畅
- 🔧 扩展性强：易于添加新功能和多模态支持
未来可以进一步探索：
- 集成更多AI模型提供商（Anthropic、Google Gemini等）
- 实现语音输入输出功能
- 添加文件上传和分析能力
- 构建多语言支持界面
现在就开始你的AI应用开发之旅吧！这个基础架构将为你的项目提供强大的技术支撑，让你能够专注于创造有价值的AI体验。
提示：记得在实际部署前充分测试所有功能，并确保遵守相关API的使用条款和隐私政策。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
