🤖 使用 Next Js、GPT 4 和 Vercel AI SDK 构建 AI 聊天机器人的超级简单方法
随着自然语言处理（NLP）模型的改进和变得更容易访问，人工智能聊天机器人正变得越来越流行和强大。但是，从头开始构建聊天机器人可能具有挑战性且耗时，尤其是在您想要创建支持流式文本响应的丰富交互式用户界面时。
幸运的是，有一个新工具可以帮助您在几分钟内创建AI聊天机器人：Vercel AI SDK。Vercel AI SDK是一个开源库，可帮助您在JavaScript和TypeScript中构建对话，流式处理和聊天用户界面。它支持 React/Next.js、Svelte/SvelteKit，即将支持 Nuxt/Vue。
Vercel AI SDK还集成了流行的开源和云LLM（大型语言模型），如OpenAI，Hugging Face和LangChain。这意味着您可以利用 GPT-4 等最先进的 NLP 模型的强大功能为您的用户生成逼真且引人入胜的聊天响应。
在这里，我们将学习如何使用 Next Js、GPT 4 和 Vercel AI SDK 创建一个简单的 AI 聊天机器人。
在我们开始之前
本文的风格很有见地，但易于理解，其中包含许多示例和代码示例，您可以将其应用于自己的项目。该博客经常更新，因此请务必订阅以掌握所有新教程和资源。
安装Vercel AI SDK
要安装 Vercel AI SDK，您需要在计算机上安装 Node.js 和 npm。您还需要使用 create-next-app 或任何其他方法创建 Next.js 项目。
准备好Next.js项目后，您可以通过在终端中运行以下命令来安装Vercel AI SDK：
npm install ai
这会将 ai 包添加到 package.json 中的依赖项中。
为您的聊天机器人设置 API 路由
接下来，您需要为聊天机器人创建 API 路由。在这里，您将处理来自聊天 UI 的请求，并使用 OpenAI API 将它们发送到 GPT-4。
要创建 API 路由，您需要在 Next.js 项目中的 pages/api 文件夹下创建一个文件。例如，您可以将其命名为聊天.js。
在此文件中，您需要从openai-edge导入配置和OpenAIApi模块。这些模块将帮助您配置和访问 OpenAI API。您还需要从 ai 导入 OpenAIStream 和 StreamingTextResponse 模块。这些模块将帮助您将文本响应从 GPT-4 流式传输到聊天界面。
您还需要导出两个变量：运行时和 POST。运行时变量告诉Next.js此API路由应在边缘上运行，这意味着它将在Vercel的边缘网络上执行。POST 变量是处理来自聊天 UI 的 POST 请求的函数。
在此函数中，您需要执行以下步骤：
- 从请求正文中获取消息数组。此数组包含用户和聊天机器人之间交换的先前消息。
- 使用 OpenAI API 密钥创建配置对象。您可以从 OpenAI 帐户仪表板获取此密钥。
- 使用您的配置对象创建 OpenAIApi 实例。
- 使用以下参数在 OpenAIApi 实例上调用 createChatCompletion方法：
model：要使用的 LLM 模型的名称。在这种情况下，我们将使用 gpt-4。stream：一个布尔值，指示是否要流式传输文本响应。在这种情况下，我们将它设置为 true。messages：来自请求正文的消息数组。- 此方法将返回一个响应对象，其中包含来自 GPT-4 的文本响应流。
- 使用响应对象创建一个 OpenAIStream 实例。此实例将帮助您将文本响应流转换为聊天 UI 可以使用的格式。
- 返回一个 StreamingTextResponse 实例和你的 OpenAIStream 实例。此实例会将流式文本响应作为数据块发送到聊天 UI。
以下是您的 API 路由文件的外观：
// pages/api/chat.js
import { Configuration, OpenAIApi } from 'openai-edge'
import { OpenAIStream, StreamingTextResponse } from 'ai'
const config = new Configuration({
apiKey: process.env.OPENAI_API_KEY
})
const openai = new OpenAIApi(config)
export const runtime = 'edge'
export async function POST(req) {
const { messages } = await req.json()
const response = await openai.createChatCompletion({ model: 'gpt-4', stream: true, messages }) const stream = OpenAIStream(response)
return new StreamingTextResponse(stream)
}
请注意，您需要提供 OpenAI API 密钥作为环境变量。为此，可以在 Next.js 项目的根目录中创建一个 .env.local 文件并添加以下行：
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
确保将 x 替换为您的实际密钥。
使用 useChat Hook 使用 React 创建一个聊天 UI
现在你已经准备好了 API 路由，你可以使用 ai/react 模块中的 useChat 钩子创建一个与 React 的聊天 UI。此挂钩将帮助您从 API 路由获取和呈现流文本响应，并处理用户输入和提交。
要使用此钩子，您需要在 Next.js 项目的 pages 文件夹下创建一个 React 组件。例如，您可以将其命名为聊天.js。
在这个组件中，你需要从 ai/react 导入 useChat 钩子。您还需要为聊天 UI 导入 React 和一些基本样式。
然后，您需要调用 useChat 钩子并获取以下值：
messages：包含角色（用户或机器人）和每条消息内容的消息对象数组。input：表示当前用户输入的字符串。handleInputChange：在用户键入内容时更新输入值的函数。handleSubmit：将输入值发送到您的 API 路由并在用户提交时清除该值的函数。
然后，您可以使用这些值呈现一个简单的聊天 UI，其中包含每条消息的 div 元素和用户输入的表单元素。您还可以添加一些基本样式以使其看起来更好。
以下是你的 React 组件应该是什么样子的：
// pages/chat.js
import { useChat } from 'ai/react'
import React from 'react'
import styles from './chat.module.css'
export default function Chat() {
const { messages, input, handleInputChange, handleSubmit } = useChat()
return (
<div className={styles.container}>
<div className={styles.messages}>
{messages.map((m) => (
<div key={m.id} className={styles.message}>
<span className={styles.role}>{m.role}:</span>
<span className={styles.content}>{m.content}</span>
</div>
))}
</div>
<form className={styles.form} onSubmit={handleSubmit}>
<input
className={styles.input}
value={input}
placeholder="Say something..."
onChange={handleInputChange}
/>
</form>
</div>
)
}
请注意，您需要在 pages 文件夹下创建一个 chat.module.css 文件，并为聊天 UI 添加一些基本样式。例如，您可以使用以下样式：
/* pages/chat.module.css */
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.messages {
flex: 1;
overflow-y: auto;
padding: 1rem;
}
.message {
margin-bottom: 0.5rem;
}
.role {
font-weight: bold;
}
.content {
margin-left: 0.5rem;
}
.form {
display: flex;
}
.input {
flex: 1;
padding: 0.5rem;
}
将您的聊天机器人部署到Vercel
最后，您可以使用Vercel CLI或Vercel GitHub集成将聊天机器人部署到Vercel。您只需要确保在 Vercel 项目设置中提供 OpenAI API 密钥作为环境变量。
要使用Vercel CLI进行部署，您需要通过在终端中运行以下命令来全局安装它：
npm install -g vercel
然后，您需要在 Next.js 项目文件夹中运行以下命令：
vercel
这将提示您使用您的Vercel帐户登录并将您的项目与Vercel项目链接。您还可以为部署 URL 选择唯一的名称。
之后，您需要在 Vercel 项目设置中添加 OpenAI API 密钥作为环境变量。您可以通过在终端中运行以下命令来执行此操作：
vercel env add OPENAI_API_KEY
这将提示你输入 OpenAI API 密钥，然后选择要使用它的环境（生产、预览或开发）。
将 OpenAI API 密钥添加为环境变量后，您可以通过在终端中运行以下命令将聊天机器人部署到 Vercel：
vercel --prod
这将创建聊天机器人的生产部署，并为您提供一个可以访问它的 URL。
要使用 Vercel GitHub 集成进行部署，您需要将您的 GitHub 帐户与您的 Vercel 帐户连接，并将您的 Next.js 项目作为 Vercel 项目导入。您可以按照此处的说明执行此操作：https://vercel.com/docs/git
然后，您需要在 Vercel 项目设置中添加 OpenAI API 密钥作为环境变量。您可以通过转到Vercel项目仪表板的“设置”选项卡并单击“环境变量”部分来执行此操作。然后，您可以添加一个名为 OPENAI_API_KEY 和 OpenAI API 密钥值的新变量。还可以选择要在其中使用它的环境（生产、预览或开发）。
将 OpenAI API 密钥添加为环境变量后，您可以通过将代码更改推送到 GitHub 来将聊天机器人部署到 Vercel。这将触发聊天机器人的部署，并为您提供可以访问它的 URL。
结论
Vercel AI SDK使使用Next构建AI聊天机器人变得非常容易.js并将它们与GPT-4等强大的NLP模型集成。IT 为创建由最先进的 LLM 提供支持的丰富对话界面开辟了许多可能性。无论您是想构建AI助手，聊天机器人还是虚拟角色，Vercel AI SDK都提供了一种在网络上开始使用NLP的简单方法。
要了解更多信息，您可以访问Vercel AI SDK的官方文档。您还可以查看 OpenAI API 文档，探索 GPT-4 和其他 LLM 的所有功能。人工智能世界正在迅速发展，Vercel AI SDK等工具使Web开发人员能够利用强大的NLP模型并构建下一代智能Web应用程序。