超智能的Next.js AI聊天机器人：开启智能交流新篇章

afa
394 阅读2分钟
  • ** 🤟** 一站式轻松构建小程序、Web网站、移动应用  ：👉****在线地址********
  • 💅小程序共同学习群，有两百多套小程序源码，可免费培训，一起畅谈摸鱼

使用 Next.js、Vercel AI SDK、OpenAI 以及 Supabase Auth 和 Postgres DB 构建的开源 AI 聊天机器人应用程序模板。

代码仓库：Next.js AI聊天机器人

特性

  • Next.js App 路由器

  • React 服务器组件 （RSC）、悬念和服务器操作

  • 用于流式聊天 UI 的 Vercel AI SDK

  • 支持 OpenAI（默认）、Anthropic、Hugging Face 或自定义 AI 聊天模型和/或 LangChain

  • 边缘运行时就绪

  • shadcn/ui

    • 使用 Tailwind CSS 进行样式设计
    • 用于无头组件基元的 Radix UI
    • 来自 Phosphor Icons 的图标

  • 与Supabase Postgres DB的聊天记录

  • 用于身份验证的 Supabase 身份验证

模型提供程序

此模板默认附带 OpenAI gpt-3.5-turbo。但是，多亏了 Vercel AI SDK，您只需几行代码即可将 LLM 提供程序切换到 Anthropic、Hugging Face 或使用 LangChain。

部署

您可以一键将自己版本的 Next.js AI 聊天机器人部署到 Vercel：

设置 GitHub OAuth

此演示使用 GitHub Oauth。按照 Supabase 项目上的 GitHub OAuth 设置步骤进行操作。

配置站点网址

在 Supabase Dashboard 中，导航到 Auth > URL 配置，并将 Vercel URL 设置为站点 URL。

本地运行

您需要使用 .env.example 中定义的环境变量来运行 Next.js AI 聊天机器人。建议您为此使用 Vercel 环境变量，但只需要一个 .env 文件。

注意：您不应提交 .env 文件，否则它会暴露机密，从而允许其他人控制对您的各种 OpenAI 和身份验证提供商帐户的访问。

复制 .env.example 文件并填充所需的 env vars：

cp .env.example .env

安装 Supabase CLI 并启动本地 Supabase 堆栈：

npm install supabase --save-dev
npx supabase start

安装本地依赖项并启动开发模式：

pnpm install
pnpm dev
avatar
文章
阅读
粉丝