Vercel AI SDK：构建现代化AI聊天应用的完整指南

【免费下载链接】aiBuild AI-powered applications with React, Svelte, Vue, and Solid项目地址: https://gitcode.com/GitHub_Trending/ai/ai

引言：为什么选择Vercel AI SDK？

在当今AI技术快速发展的时代，构建高效、可靠的AI聊天应用已成为许多开发者的需求。Vercel AI SDK提供了一套完整的解决方案，让开发者能够快速构建现代化的AI聊天应用。本文将详细介绍如何使用Vercel AI SDK从零开始构建一个功能完整的AI聊天应用。

技术栈概览

技术组件	主要功能
Next.js	React全栈框架
Vercel AI SDK	AI应用开发工具包
OpenAI API	大语言模型服务
TypeScript	类型安全的开发体验
Tailwind CSS	实用优先的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 pnpm add ai @ai-sdk/react @ai-sdk/openai

环境变量配置

创建.env.local文件并添加OpenAI API密钥：

OPENAI_API_KEY=你的API密钥

核心架构设计

应用架构流程图

AI聊天应用的核心架构遵循清晰的请求-响应流程：

用户通过界面输入消息
使用useChat Hook管理状态
发送API请求到后端路由
调用OpenAI API服务
处理流式响应数据
实时更新用户界面

文件结构规划

项目采用清晰的文件组织结构：

src/ ├── app/ │ ├── api/ │ │ └── chat/ │ │ └── route.ts │ ├── 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'; export async function POST(req: Request) { try { const { messages } = await req.json(); const result = streamText({ model: openai('gpt-4o'), system: '你是一个有帮助的AI助手，用中文回答用户的问题。', messages, }); 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'; 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; body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); }

高级功能扩展

1. 消息持久化存储

实现本地存储功能保存聊天记录：

const { messages, setMessages } = useChat({ api: '/api/chat', onFinish: (message) => { 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; 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 } } }