langchain-nextjs-template

克隆即跑的 AI 聊天应用起步模板

langchain-nextjs-template 是 LangChain 官方提供的全栈起步模板，把 LangChain 的 LLM 编排能力与 Next.js 的前后端一体化体验结合起来。它解决的是开发者从零搭建 AI 聊天应用时反复处理流式响应、消息历史、接口路由和前端渲染的问题。核心能力包括：基于 Next.js App Router 的 API 路由封装，直接调用 LangChain 的模型与链；内置流式输出，前端可逐字显示回答；支持对话历史与上下文管理；集成多种模型供应商的示例配置；提供可运行的最小聊天界面与组件结构。开发者克隆后填入 API Key 即可运行，再按需替换链、工具或向量库，适合作为 AI 应用原型的起点。

开源 free 开发框架

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 2531

维护状态活跃

是否开源是

定价模式 free

项目数据

分类开发框架

开发团队langchain-ai

所属国家

官网地址https://langchain-nextjs-template.vercel.app

GitHubhttps://github.com/langchain-ai/langchain-nextjs-template

定价模式free

价格说明开源免费模板，可部署至Vercel

访问状态

是否开源是

开源协议MIT

主要语言TypeScript

技术栈/模型

GitHub 星标★ 2531

30天Star增速

HF 下载量

上线时间2023-07-28 00:00:00

最近更新2026-09-18 00:00:00

维护状态活跃

中文支持

访问方式

移动端支持

综合评分

收录时间2026-09-12

浏览次数0

使用教程

难度：入门约 10 分钟部署方式：本地安装 7 步

环境要求

Node.js 运行环境（Next.js 应用所需）
包管理器，README 以 yarn 为例（也支持你惯用的 npm/pnpm）
git（用于克隆仓库）
OpenAI API Key（基础示例需要）

安装与启动步骤

1克隆项目仓库

把模板仓库下载到本地，进入项目目录后再进行后续操作。
```
git clone https://github.com/langchain-ai/langchain-nextjs-template.git
cd langchain-nextjs-template
```
2复制环境变量文件

README 要求把仓库根目录的 .env.example 复制为 .env.local，配置都写在这里。
```
cp .env.example .env.local
```
3填入 OpenAI API Key

基础示例只需在 .env.local 里加上你的 OpenAI API Key 即可跑通聊天。
4设置回调变量

应用运行在 serverless Edge function 上，必须把 LANGCHAIN_CALLBACKS_BACKGROUND 设为 false，否则 LangSmith tracing 可能来不及完成。
5安装依赖包

用你习惯的包管理器安装依赖，README 以 yarn 为例，在本项目目录下执行。
```
yarn install
```
6启动开发服务器

运行开发模式，Next.js 会自动编译并提供本地服务，改代码会自动热更新。
```
yarn dev
```
7浏览器访问验证

打开 http://localhost:3000，向机器人提问，能看到逐字流式返回即成功。

关键配置

配置项	必填	说明	示例
`OPENAI_API_KEY`	是	基础聊天示例使用的 OpenAI 密钥，填在 .env.local 中	`sk-xxxxxxxxxxxxxxxxxxxxxxxx`
`LANGCHAIN_CALLBACKS_BACKGROUND`	是	Edge 环境下必须设为 false，保证 tracing 能正常结束	`false`

如何确认成功

浏览器打开 http://localhost:3000，向机器人提问，页面能逐字流式输出回答即启动成功。

常见问题

Q：怎么更换模型或提示词？

A：后端逻辑在 app/api/chat/route.ts，可在其中修改 prompt 与 model，也能继续添加其他模块和逻辑。

Q：怎么修改前端界面？

A：编辑 app/page.tsx 即可，保存后页面会自动更新，无需重启服务。

Q：为什么要把 LANGCHAIN_CALLBACKS_BACKGROUND 设为 false？

A：因为应用部署在 serverless Edge function 中，进程不会常驻，设为 false 才能确保 LangSmith 追踪在函数结束前完成。

Q：模板包含哪些示例能力？

A：包含简单聊天、结构化输出、Agent 多步问答、基于向量库的 RAG 链以及 RAG Agent 五类接口示例。

Q：怎么部署上线？

A：README 建议直接部署到 Vercel 平台，参考 Next.js 官方部署文档即可。

注意事项

Agent 相关示例基于 LangGraph.js 实现，使用预置的辅助函数以减少样板代码，可按需替换为自定义图。
大多数示例使用 Vercel AI SDK 把 token 流式推送到客户端并渲染消息。
模板对免费额度友好，仓库中附有 bundle size 统计可参考。
线上体验版地址：https://langchain-nextjs-template.vercel.app/

核心亮点

官方维护，与 LangChain 和 Next.js 版本同步更新
内置流式输出和消息历史，省去前后端联调成本
结构清晰，API 路由与 UI 组件分离，便于替换模型或链

不足之处

功能偏基础，缺少鉴权、持久化和多用户支持
示例集中在聊天场景，复杂 Agent 与 RAG 需自行扩展

适用场景

快速验证 LLM 聊天应用的产品原型
学习 LangChain 与 Next.js 全栈集成方式
作为内部 AI 工具的前端与接口脚手架

替代项目

vercel/ai-chatbot、Chainlit、Gradio

项目介绍

langchain-nextjs-template 是开发框架领域的开源项目，由 langchain-ai 开发，2023 年首次发布。

在全站 12,822 个收录项目中，它的 GitHub 星标数（2,531）位列前 30%，在开发框架分类中处于中上游。

项目目前处于活跃维护状态，最近一次代码更新于 2026-09-18。开源免费模板，可部署至Vercel。从国内网络环境看，当前已无法正常访问。

它主要面向的使用场景是：快速验证LLM聊天应用的产品原型。同类可对比的替代方案包括 vercel/ai-chatbot、Chainlit、Gradio。

上一篇：langchain-mcp-adapters

下一篇：langchain-google