🦜️🔗 LangChain + Next.js 初学者模板

这个模板搭建了一个LangChain.js + Next.js的入门应用。它展示了如何在几个用例中使用和组合LangChain模块。具体包括：

• 简单聊天
• 从LLM调用返回结构化输出
• 使用代理回答复杂的多步骤问题
• 使用链和向量存储的检索增强生成（RAG）
• 使用代理和向量存储的检索增强生成（RAG）

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

代理使用LangGraph.js，这是LangChain用于构建代理工作流的框架。它们使用预配置的辅助函数来最小化样板代码，但您可以根据需要用自定义图表替换它们。

它也适用于免费套餐！查看下面的包大小统计。

您可以在这里查看此仓库的托管版本：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 Functions让模型根据特定模式返回输出。 点击导航栏中的结构化输出链接来尝试：

这个示例中的链使用一个流行的名为Zod的库来构建模式，然后以OpenAI期望的方式格式化它。 然后将该模式作为函数传递给OpenAI，并传递一个function_call参数以强制OpenAI以指定格式返回参数。

更多详情，请查看此文档页面。

🦜 代理

要尝试代理示例，您需要通过在.env.local中填写SERPAPI_API_KEY来让代理访问互联网。 如果您还没有API密钥，请前往SERP API网站获取一个。

然后您可以点击代理示例，尝试问一些更复杂的问题：

这个示例使用预构建的LangGraph代理，但您也可以自定义您自己的代理。

🐶 检索

检索示例都使用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/core 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的功能，请查看以下文档：

• https://js.langchain.com/docs/

▲ 在Vercel上部署

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

查看Next.js部署文档了解更多详情。

感谢！

感谢您的阅读！如果您有任何问题或评论，请通过Twitter @LangChainAI联系我们，或点击此处加入我们的Discord服务器。