入门 AI SDK | 在 Next.js 中实现 AI 聊天机器人

进击的松鼠
344 阅读5分钟

前言

随着近几年大语言模型（LLM）在国内外爆发式的增长，AI 应用也随之应运而生。

而将大型语言模型（LLM）集成到应用程序中很复杂，并且严重依赖于您使用的特定模型提供商。

而 AI SDK 的出现，解决的就是此类问题，我们只需要使用 AI SDK 提供的统一 API，就可以在应用中调用不同的 LLM；我们只需要使用 AI SDK 提供的 UI 库，就可以快速生成流式聊天界面。

什么是 AI SDK

AI SDK 是一款专为帮助开发者使用 React、Next.js、Vue、Svelte、Node.js 等构建人工智能驱动的应用程序而设计的 TypeScript 工具包。

2025-01-20_021914.png

AI SDK 主要包含 AI SDK Core 和 AI SDK UI 这两部分。

AI SDK Core：用于使用 LLM 生成文本、结构化对象和工具调用的统一API。

AI SDK UI：一组与框架无关的钩子，用于快速构建聊天和生成用户交互界面。

2025-01-20_124727.png

AI SDK 还支持多种 LLM 提供商，即使用同一套 API，就可以在应用程序中集成多种大语言模型。

例如，您可以在应用程序中集成 OpenAI 或者是微软的 Azure。

2025-01-20_123534.png

亦或是在应用中集成国内知名的 DeepSeek，本文将在 Next.js 应用中集成 DeepSeek 作为示例。

2025-01-20_123604.png

关于 AI SDK 的相关技术还有很多，前提是我们还需要对 LLM 相关术语做一个深度的理解。

例如什么是 LLM、什么是 Prompts、什么是 RAG、我们平时所说的多模态（multi-modal）又是什么。

使用 AI SDK 开发聊天机器人

AI SDK 目前支持 Next.js、Nuxt、Svelte、Node.js 和 Expo。

2025-01-20_130250.png

本文以 Next.js 的 APP Router 为例，参照 AI SDK 官方文档搭建一个带有流式用户交互界面的简单 AI 聊天问答机器人，并快速入门 Vercel 出品的 AI SDK。

创建 Next.js 应用

确保本地 Node.js 版本为 18+，推荐使用 pnpm。

如果不熟悉 Prompt Engineering 和 HTTP Streaming，可以点击进行查阅。

在项目根目录命令行终端输入 pnpm create next-app@latest nextjs-learn-aisdk。

值得注意的是，next-app@latest 后为需要创建项目的名称，本文以 nextjs-learn-aisdk 为例。

2025-01-20_151438.png

接下来，create next-app 会帮我们自动安装需要的依赖项。

2025-01-20_151517.png

此时，创建 Next.js 项目完成，在 VSCode IDE 中打开项目，在终端命令行输入 pnpm run dev 运行。

2025-01-20_154422.png

打开浏览器，输入 http://localhost:3000 出现下图页面，则表示 Next.js 项目启动成功。

2025-01-20_155113.png

安装 AI SDK 核心依赖项

在项目终端命令行输入 pnpm add ai @ai-sdk/deepseek zod。

2025-01-20_161342.png

注册 DeepSeek 获取 API keys

打开 DeepSeek 开放平台 注册，DeepSeek 官网目前表示，在 2 月 8 日之前调用 API 可享受优惠政策。

2025-01-20_164306.png

因此，我们可以先充值 1 元进行测试。

2025-01-20_150204.png

然后创建 API key，一定要保存起来，否则再次打开该页面的时候，看到的是加密的 API key。

2025-01-20_150408.png

配置 API key

在项目终端命令行输入 npx touch .env.local 配置 API key 进行身份验证。

2025-01-20_161959.png

值得注意的是，不同的模型，环境变量是不一样的，DeepSeek 的环境变量是 DEEPSEEK_API_KEY。

所以，在使用不同的模型时，一定要参考 AI SDK Providers 文档进行使用。

2025-01-20_162318.png

在 .env.local 中添加 DEEPSEEK_API_KEY 环境变量，值为上述 DeepSeek 开放平台中保存的 API key。

2025-01-20_162636.png

创建路由处理程序

在 Next.js 中创建路由处理程序，也就是我们平时所说的 API 接口，而在 Next.js 中有它自己的专业术语。

在项目中新建 app/api/chat/route.ts 文件，并新增如下代码：

import { deepseek } from '@ai-sdk/deepseek'
import { streamText } from 'ai'

// Allow streaming responses up to 30 seconds
export const maxDuration = 30

export async function POST(req: Request) {
  const { messages } = await req.json()

  const result = streamText({
    model: deepseek('deepseek-chat'),
    messages
  })

  return result.toDataStreamResponse()
}

上述代码的含义是什么，下面是来自官方的解释：

  • 定义异步 POST 请求处理器并从请求体中提取消息。messages 变量包含了你与聊天机器人之间的对话历史记录，并为聊天机器人提供了生成下一步响应所需的上下文。

  • 调用 streamText 函数，该函数从 ai 包中引入。streamText 接受一个配置对象，其中包含一个模型提供者（从 @ai-sdk/deepseek 引入）以及 messages（在第一步中定义）。你还可以传递额外的设置，以进一步自定义模型的行为。

  • streamText 函数返回一个 StreamTextResult 对象。该结果对象包含 toDataStreamResponse 方法，该方法可将结果转换为流式响应对象。

  • 最终，将结果返回给客户端以流式传递响应。

创建 UI 界面，在前端进行展示

AI SDK 的 UI 包将聊天界面的复杂性抽象为一个钩子，useChat。我们便可以构建一个简易的流式聊天界面。

在项目中新建 app/chat/page.tsx 文件，并新增如下内容：

'use client'

import { useChat } from 'ai/react'

export default function Chat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat()
  return (
    <div className="flex flex-col w-full max-w-md py-24 mx-auto stretch">
      {messages.map((m) => (
        <div key={m.id} className="whitespace-pre-wrap">
          {m.role === 'user' ? 'User: ' : 'AI: '}
          {m.content}
        </div>
      ))}

      <form onSubmit={handleSubmit}>
        <input className="fixed bottom-0 w-full max-w-md p-2 mb-8 border border-gray-300 rounded shadow-xl" value={input} placeholder="Say something..." onChange={handleInputChange} />
      </form>
    </div>
  )
}

上述代码的含义是什么，下面是来自官方的解释：

该页面使用了 useChat 钩子，默认情况下会使用你之前创建的 POST API 路由（/api/chat）。

这个钩子提供了一些处理用户输入和表单提交的功能及状态。useChat 钩子包含以下实用函数和状态变量：

  1. messages：当前的聊天消息（一个对象数组，每个对象包含 id、role 和 content 属性）。
  2. input：用户输入字段的当前值。
  3. handleInputChange 和 handleSubmit：分别用于处理用户交互（输入字段的输入和表单的提交）的函数。

这些功能和状态变量帮助你轻松地管理聊天页面的用户输入和消息处理。

此时，一个简易版的聊天机器人便构建完毕，打开浏览器，输入 http://localhost:3000/chat 。

vkrsn-2mlke.gif

至此，我们便使用 AI SDK 仅仅用了不到 50 行的代码，便构建了一个简易 AI 聊天机器人。

这只是 AI SDK 的功能的冰山一角，还有更多的功能值得我们去探索：

  • 如何使用 Tool Calling 与外部世界进行交互（例如获取天气）

  • 如何使用 RAG 向 LLM 询问训练数据之外的信息

  • 如何使用 Multi-modal 让 LLM 理解和生成多种格式响应的能力（例如文本、图像和视频）

参考资料

AI SDK 官网

avatar
文章
阅读
粉丝