🦜️🔗 LangChain + Next.js 入门模板

此模板搭建了一个 LangChain.js + Next.js 的入门应用。它展示了如何针对多种用例使用和组合 LangChain 模块。具体包括：

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

其中大多数示例都使用 Vercel 的 AI SDK 将 token 流式传输到客户端，并显示传入的消息。

代理部分使用了 LangGraph.js，这是 LangChain 用于构建代理工作流的框架。它们使用预配置的帮助函数来减少样板代码，但你也可以根据需要替换为自定义图。

https://github.com/user-attachments/assets/e389e4e4-4fb9-4223-a4c2-dc002c8f20d3

该模板也非常适合免费层级！请查看下方的 打包大小统计。

你可以在以下链接查看此仓库的托管版本：https://langchain-nextjs-template.vercel.app/

🚀 快速开始

首先，克隆此仓库并将其下载到本地。

接下来，你需要在项目的 .env.local 文件中设置环境变量。将 .env.example 文件复制到 .env.local。对于基础示例，你只需添加你的 OpenAI API 密钥即可。

由于此应用运行在无服务器边缘函数中，如果你使用 LangSmith 追踪，请确保将 LANGCHAIN_CALLBACKS_BACKGROUND 环境变量设置为 false，以保证追踪能够完成。

然后，使用你喜欢的包管理器（例如 yarn）安装所需的依赖包。

现在你可以启动开发服务器：

yarn dev

用浏览器打开 http://localhost:3000，你就能看到效果了！向机器人提问，你会看到流式响应：

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

后端逻辑位于 app/api/chat/route.ts 中。在这里，你可以更改提示词和模型，或添加其他模块和逻辑。

🧱 结构化输出

第二个示例展示了如何使用 OpenAI Functions 让模型按照特定模式返回输出。点击导航栏中的“Structured Output”链接来尝试：

此示例中的链使用了一个名为 Zod 的流行库来构建模式，然后将其格式化为 OpenAI 所期望的形式。接着，它将该模式作为函数传递给 OpenAI，并设置 function_call 参数，强制 OpenAI 按照指定格式返回参数。

更多详情，请参阅 此文档页面。

🦜 代理

要尝试代理示例，你需要通过在 .env.local 中填写 SERPAPI_API_KEY 来赋予代理访问互联网的权限。如果没有 API 密钥，可以前往 SERP API 官网 获取。

之后，你可以点击“Agent”示例，尝试向它提出更复杂的问题：

本示例使用了一个 预构建的 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 中。

之后，你可以切换到“Retrieval”和“Retrieval Agent”示例。默认文档文本取自 LangChain.js 的检索用例文档，但你可以将其替换为你想要的任何文本。

对于给定的文本，你只需点击一次“Upload”即可。再次点击会导致文档被重新摄取，从而产生重复内容。你可以通过导航到控制台并执行 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 服务器。

LangChain + Next.js 快速上手指南

本指南基于 langchain-nextjs-template 官方模板，帮助开发者快速构建集成了 LangChain.js 能力的 Next.js AI 应用。该模板支持流式对话、结构化输出、Agent 智能体以及 RAG（检索增强生成）等多种高级用例。

环境准备

在开始之前，请确保你的开发环境满足以下要求：

• Node.js: 建议安装 LTS 版本（v18+）。
• 包管理器: 推荐使用 yarn，也可使用 npm 或 pnpm。
• API Keys:
  • OpenAI API Key: 用于驱动大模型（必需）。
  • SerpApi Key: 仅在使用 Agent 联网功能时需要。
  • Supabase URL & Key: 仅在使用 RAG 向量检索功能时需要。
• 代码编辑器: 推荐 VS Code。

注意：由于该应用运行在 Serverless Edge Functions 中，若需使用 LangSmith 追踪，请务必将环境变量 LANGCHAIN_CALLBACKS_BACKGROUND 设置为 false，以确保追踪数据能正常完成上报。

安装步骤

1. 克隆项目

首先将模板仓库克隆到本地：

git clone https://github.com/langchain-ai/langchain-nextjs-template.git
cd langchain-nextjs-template

2. 配置环境变量

复制示例配置文件并填入你的密钥：

cp .env.example .env.local

编辑 .env.local 文件，至少填入 OpenAI 密钥：

OPENAI_API_KEY=sk-your-openai-api-key-here
# 若使用 Agent 联网功能，取消注释并填入：
# SERPAPI_API_KEY=your-serpapi-key
# 若使用 RAG 功能，取消注释并填入 Supabase 配置：
# SUPABASE_URL=your-supabase-url
# SUPABASE_PRIVATE_KEY=your-supabase-key
# 确保 LangSmith 追踪在 Edge 环境下正常工作：
LANGCHAIN_CALLBACKS_BACKGROUND=false

3. 安装依赖

使用你偏好的包管理器安装依赖（国内用户若遇网络问题，可临时切换淘宝镜像源）：

# 使用 yarn (推荐)
yarn install

# 或使用 npm
npm install

# 国内加速示例 (npm)
# npm config set registry https://registry.npmmirror.com
# npm install

4. 启动开发服务器

运行以下命令启动本地服务：

yarn dev

基本使用

启动成功后，在浏览器中访问 http://localhost:3000。

1. 体验流式对话 (Simple Chat)

这是最基础的功能。直接在首页输入框中输入问题（例如：“请用中文介绍什么是 LangChain？”），你将看到 AI 以流式方式逐字返回回答。

• 前端逻辑: 页面自动更新，无需刷新。
• 后端逻辑: 核心代码位于 app/api/chat/route.ts。你可以在此修改 Prompt、切换模型或添加其他 LangChain 模块。

2. 尝试结构化输出 (Structured Output)

点击导航栏中的 Structured Output 链接。 该示例展示了如何让 LLM 按照指定的 JSON Schema 返回数据（基于 Zod 库）。这对于需要程序化处理 LLM 输出的场景非常有用。

3. 进阶功能提示

• Agent 智能体: 点击 Agent 链接前，请确保已在 .env.local 中配置 SERPAPI_API_KEY。此功能允许 AI 自主调用工具回答复杂的多步问题。
• RAG 检索: 点击 Retrieval 链接前，需配置 Supabase 数据库。首次使用时，需在界面点击 Upload 按钮上传文档（默认使用 LangChain 文档片段），成功后即可针对该知识库进行问答。

4. 自定义开发

• 修改前端界面：编辑 app/page.tsx。
• 修改后端链式逻辑：编辑 app/api/chat/ 目录下的对应路由文件。
• 分析打包体积：运行 ANALYZE=true yarn build 可查看详细的 Bundle Size 分析。

现在你已经准备好了，可以开始基于此模板构建你的 AI 应用了！