当前位置: 首页 > news >正文

langchain-nextjs-template 模板安装与配置

前提条件:

  1. node安装
  2. yarn 安装:npm install -g yarn

目录

    • 1. 克隆项目
    • 2. 安装依赖
    • 3. 配置环境变量
    • 4. 修改模型配置
    • 5. 启动开发服务器
    • 6. 项目结构说明
    • 7. 功能说明
    • 8. 自定义提示模板
    • 部分过程文件截图

1. 克隆项目

首先,从 GitHub 克隆 LangChain Next.js 模板项目:

d:\agent-llm> git clone https://github.com/langchain-ai/langchain-nextjs-template.git

2. 安装依赖

进入项目目录并安装依赖:

d:\agent-llm> cd langchain-nextjs-template
d:\agent-llm\langchain-nextjs-template> yarn install

3. 配置环境变量

在项目根目录创建或编辑 .env 文件,配置必要的 API 密钥:

OPENAI_API_KEY="你的API密钥"
OPENAI_BASE_URL="https://dashscope.aliyuncs.com/compatible-mode/v1"
LANGCHAIN_CALLBACKS_BACKGROUND=false# 如果需要使用 SerpAPI 功能(用于 agents 示例)
# SERPAPI_API_KEY="你的SERPAPI_API_KEY"# 如果需要使用检索功能示例
# SUPABASE_PRIVATE_KEY="你的SUPABASE_PRIVATE_KEY"
# SUPABASE_URL="你的SUPABASE_URL"

注意:这里使用了阿里云的 DashScope 作为 OpenAI API 的兼容接口。

4. 修改模型配置

根据你的需求,可以修改代码中使用的模型。在项目中有两个主要的路由文件需要修改:

  1. app/api/chat/route.ts 文件中,修改模型为 “qwen-turbo”:
const model = new ChatOpenAI({temperature: 0.8,model: "qwen-turbo",
});
  1. app/api/chat/agents/route.ts 文件中,同样修改模型:
const chat = new ChatOpenAI({model: "qwen-turbo",temperature: 0,
});

5. 启动开发服务器

配置完成后,启动开发服务器:

d:\agent-llm\langchain-nextjs-template> yarn dev

服务器将在 http://localhost:3000 启动。

6. 项目结构说明

该项目的主要结构如下:

  • /app - Next.js 应用程序代码
    • /api - API 路由
      • /chat - 聊天相关 API
        • route.ts - 基本聊天 API
        • /agents - 代理相关 API
          • route.ts - 使用工具的代理 API
    • /components - UI 组件
    • /data - 数据文件
    • /public - 静态资源

7. 功能说明

该模板提供了两种主要的聊天模式:

  1. 基本聊天模式:使用 app/api/chat/route.ts 中的配置,提供基本的聊天功能。
  2. 代理模式:使用 app/api/chat/agents/route.ts 中的配置,提供带有工具调用能力的代理功能,如计算器和网络搜索。

8. 自定义提示模板

你可以根据需要修改聊天机器人的角色和风格:

  1. 在基本聊天模式中,修改 app/api/chat/route.ts 中的 TEMPLATE 常量:
const TEMPLATE = `你是一个有帮助的助手。请用简洁明了的语言回答问题。当前对话:
{chat_history}用户: {input}
AI:`;
  1. 在代理模式中,修改 app/api/chat/agents/route.ts 中的 AGENT_SYSTEM_TEMPLATE 常量:
const AGENT_SYSTEM_TEMPLATE = `你是一个有帮助的助手,能够使用工具来解决问题。`;

部分过程文件截图

安装
在这里插入图片描述
在这里插入图片描述

api 与 url 修改
在这里插入图片描述
在这里插入图片描述
启动
在这里插入图片描述
在这里插入图片描述

相关文章:

  • 【深度学习—李宏毅教程笔记】各式各样的 Attention
  • jupyter切换存储路径
  • C++入门基础:引用,auto自动关键字,内联函数,范围for循环
  • 【C++】 —— 笔试刷题day_22
  • Postgresql几个常用的json操作
  • 安卓手机怎样配置数据加速
  • 10 C 语言常量详解:#define 与 const 定义常量及其区别与应用
  • JavaScript 版本号比较
  • 软件设计师/系统架构师---计算机网络
  • C++:在条件判断时何时为if,何时为else (易混淆※※※)
  • Leetcode 3524. Find X Value of Array I
  • NFS服务共享和安装命令的补充
  • 辅助函数构造题目(缓慢更新,遇到更道)
  • next.js 如何实现动态路由?
  • 云点数据读写
  • 【小沐杂货铺】基于Three.JS绘制卫星轨迹Satellite(GIS 、WebGL、vue、react,提供全部源代码)
  • Java编程基础(第四篇:字符串初次介绍)
  • 8、constexpr if、inline、类模版参数推导、lambda的this捕获---c++17
  • PySide6 GUI 学习笔记——常用类及控件使用方法(常用类矩阵QRect)
  • 基于Spring AI Alibaba实现MCP协议的SSE实时流式服务深度解析
  • 上海车展上的双向奔赴:跨国车企融入中国创新,联手“在中国,为全球”
  • 医改经验如何因地制宜再创新?国家卫健委“以例说法”
  • 男粉丝咬伤女主播嘴后写的条子引争议:赔偿“十万元”还是“十5元”?
  • 神舟十九号航天员乘组计划于4月29日返回东风着陆场
  • 具身智能资本盛宴:3个月37笔融资,北上深争锋BAT下场,人形机器人最火
  • 医学泰斗客死他乡?AI小作文批量如何炮制?对话已被抓获的网络水军成员