langchain-nextjs-template

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

开源 🏷️完全免费 🚫 站点已失效 开发框架 🍴 复刻 571 🐛 待处理 32 👀 关注 17
访问官网 ↗ GitHub ↗
GitHub 星标 ★ 2547
维护状态 活跃
是否开源 开源
定价模式 🏷️完全免费 开源免费模板，可部署至Vercel

项目预览

langchain-nextjs-template 项目界面预览图
图片来源：GitHub 官方仓库名片

项目数据

分类开发框架
开发团队langchain-ai
官网地址https://langchain-nextjs-template.vercel.app
GitHubhttps://github.com/langchain-ai/langchain-nextjs-template
定价模式🏷️完全免费
价格说明开源免费模板，可部署至Vercel
访问状态🚫 站点已失效
是否开源是
开源协议MIT
主要语言TypeScript
GitHub 星标★ 2547
上线时间2023-07-28 00:00:00
代码更新2026-11-03
仓库体积26.0 MB
本站数据更新2026-11-05
维护状态活跃
收录时间2026-09-12
浏览次数1

项目介绍

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

Star 增长趋势

本站每日记录该项目 GitHub 星标变化，观测越久曲线越完整

数据来源：GitHub API 逐日快照 · 收录于 2026-09-12 · 当前星标 ★ 2547

使用教程

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

环境要求

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

安装与启动步骤

  1. 1克隆项目仓库

    把模板仓库下载到本地，进入项目目录后再进行后续操作。

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

  2. 2复制环境变量文件

    README 要求把仓库根目录的 .env.example 复制为 .env.local，配置都写在这里。

    cp .env.example .env.local

  3. 3填入 OpenAI API Key

    基础示例只需在 .env.local 里加上你的 OpenAI API Key 即可跑通聊天。

  4. 4设置回调变量

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

  5. 5安装依赖包

    用你习惯的包管理器安装依赖，README 以 yarn 为例，在本项目目录下执行。

    yarn install

  6. 6启动开发服务器

    运行开发模式，Next.js 会自动编译并提供本地服务，改代码会自动热更新。

    yarn dev

  7. 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-mcp-adapters

下一篇：langchain-google

同类项目推荐

agents-js 开源

用 Node.js 快速搭建能听会说的实时多模态 AI 智能体

Build realtime multimodal AI agents with Node.js

★ 957 2026-09-12
Conduit 开源

用 Swift 一套代码，连接所有大模型

Unified Swift SDK for LLM inference across local and cloud providers

★ 121 2026-08-09
magentic 开源

用装饰器把大模型变成普通 Python 函数，调用即得结果

Seamlessly integrate LLMs as Python functions

★ 2428 2026-08-09
Ollama 开源

让 .NET 应用几行代码接入本地大模型

Ollama SDK for .NET

★ 208 2026-10-15
Graphite 开源

把多个 AI 模型拖进节点图，边想边画边出结果

A private, modular node based AI workspace for thinking and creation. Seamlessly con···

★ 146 2026-08-09
reachat 开源

用 React 组件快速搭建 AI 聊天界面，省时又专业

UI Building Blocks for LLM/Chat UIs. Maintained by @goodcodeus.

★ 219 2026-08-09
onellm 开源

一个接口调用数百种大模型，自动缓存和故障回退，省心又稳定。

Unified interface for interacting with various LLMs hundreds of models, caching, fal···

★ 52 2026-08-09
PyOmniTS 开源

任意模型跑任意时序数据集，Agent 也能帮你做实验

A Researcher&Agent-Friendly Framework for Time Series Analysis. Train Any Model on A···

★ 108 2026-10-13