LangChain + Next.js 入门级

Next.js中LangChain项目的入门模板和示例用例包括聊天、代理和检索。

代码仓库:LangChain + Next.js 入门级

此模板搭建了一个LangChain.js + Next.js入门应用。它展示了如何在多个用例中使用和组合LangChain模块。具体说来:

上述大多数使用 Vercel 的 AI SDK 将令牌流式传输到客户端并显示传入的消息。

它也是免费的,查看下面的捆绑包大小统计信息。

您可以在此处查看此存储库的托管版本:langchain-nextjs-template.vercel.app/

入门指南

首先,克隆此存储库并将其下载到本地。

接下来,您需要在存储库的 .env.local 文件中设置环境变量。将 .env.example 文件复制到 .env.local。要从基本示例开始,您只需添加 OpenAI API 密钥。

接下来,使用您首选的包管理器(例如,yarn)安装所需的包。

现在您已准备好运行开发服务器:

yarn dev

用浏览器打开 http://localhost:3000 查看结果,向机器人提问,就能看到流式回复:

你可以通过修改 app/page.tsx 开始编辑页面。编辑该文件时,页面会自动更新。

后台逻辑位于 app/api/chat/route.ts。您可以在这里更改提示和模型,或添加其他模块和逻辑。

结构化输出

第二个示例展示了如何使用 OpenAI 函数让模型根据特定模式返回输出。点击导航栏中的 "Structured Output"链接进行尝试:

此示例中的链使用名为Zod 的流行库来构建架构,然后按照 OpenAI 期望的方式对其进行格式化。然后,它将该架构作为函数传递到 OpenAI 中,并传递一个 function_call 参数以强制 OpenAI 以指定格式返回参数。

有关更多详细信息,请查看此文档页面

代理

若要试用代理示例,需要通过在 .env.local 中填充SERPAPI_API_KEY来授予代理对 Internet 的访问权限。如果您还没有 API 密钥,请前往 SERP API 网站并获取 API 密钥。

然后,您可以单击代理示例并尝试向其提出更复杂的问题:

此示例使用 OpenAI Functions 代理,但您也可以尝试其他一些选项。有关更多详细信息,请参阅此文档页面

检索

检索示例都使用 Supabase 作为向量存储。但是,如果愿意,可以通过更改 app/api/retrieval/ingest/route.tsapp/api/chat/retrieval/route.ts app/api/chat/retrieval_agents/route.ts 下的代码来交换另一个受支持的向量存储

对于 Supabase,请按照以下说明设置数据库,然后获取数据库 URL 和私钥并将它们粘贴到 .env.local 中。

然后,您可以切换到检索和检索代理示例。默认文档文本是从LangChain.js检索用例文档中提取的,但您可以将其更改为所需的任何文本。

对于给定的文本,您只需按一次上传。再次按下它将重新摄取文档,从而导致重复。您可以通过导航到控制台并运行 DELETE FROM documents 来清除 Supabase 向量存储。

拆分、嵌入和上传一些文本后,您就可以提出问题了。

有关检索链的详细信息,请参阅此页面。这里使用的对话检索链的特定变体是使用 LangChain 表达式语言编写的,您可以在此处阅读更多相关信息。除了流式响应之外,此链示例还将通过标头返回引用的源。

有关检索代理的详细信息,请参阅此页面

捆绑包大小

LangChain本身的捆绑包大小非常小。在压缩和块拆分后,对于 RAG 用例,LangChain 使用 37.32 KB 的代码空间(截至 @langchain/核心 0.1.15),不到 Vercel 免费层边缘功能总分配 1 MB 的 4%:

默认情况下,此软件包设置了 @next/bundle-analyzer - 您可以通过运行以下命令以交互方式浏览捆绑包大小:

ini 复制代码
$ ANALYZE=true yarn build

了解更多信息

app/api/chat/route.tsapp/api/chat/retrieval/route.ts 文件中的示例链使用 LangChain 表达式语言将不同的LangChain.js模块组合在一起。您也可以集成其他检索器、代理、预配置链等,但请记住,HttpResponseOutputParser 旨在直接与模型输出一起使用。

要了解有关 LangChain.js 功能的更多信息,请查看此处的文档

要了解国内版supabase的baas工具MemFire Cloud, 请看此处文档

在 Vercel 上部署

准备就绪后,您可以在 Vercel平台上部署您的应用程序。

有关详细信息,请查看Next.js部署文档

文章原文来自:github.com/langchain-a...

相关推荐
.生产的驴10 分钟前
SpringBoot 消息队列RabbitMQ 消息确认机制确保消息发送成功和失败 生产者确认
java·javascript·spring boot·后端·rabbitmq·负载均衡·java-rabbitmq
书中自有妍如玉1 小时前
layui时间选择器选择周 日月季度年
前端·javascript·layui
Riesenzahn1 小时前
canvas生成图片有没有跨域问题?如果有如何解决?
前端·javascript
f8979070701 小时前
layui 可以使点击图片放大
前端·javascript·layui
小贵子的博客1 小时前
ElementUI 用span-method实现循环el-table组件的合并行功能
javascript·vue.js·elementui
明似水1 小时前
掌握 Flutter 中的 `Overlay` 和 `OverlayEntry`:弹窗管理的艺术
javascript·flutter
忘不了情1 小时前
左键选择v-html绑定的文本内容,松开鼠标后出现复制弹窗
前端·javascript·html
笃励1 小时前
Angular面试题四
前端·javascript·angular.js
前端专业写bug1 小时前
jspdf踩坑 htmltocanvas
java·前端·javascript
哈哈哈hhhhhh1 小时前
vue 入门一
前端·javascript·vue.js