LangChain + Next.js 入门级

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

• 

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

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

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

• 简单的聊天

• 从 LLM 调用返回结构化输出

• 与座席一起回答复杂的多步骤问题

• 具有链和向量存储的检索增强生成 （RAG）

• 具有代理和向量存储的检索增强生成 （RAG）

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

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

您可以在此处查看此存储库的托管版本：https://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.ts、app/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 - 您可以通过运行以下命令以交互方式浏览捆绑包大小：

$ ANALYZE=true yarn build

了解更多信息

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

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

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

在 Vercel 上部署

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

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