0

0

如何在 React 聊天机器人中集成 LangChain 对话记忆机制

心靈之曲

心靈之曲

发布时间:2026-01-13 23:44:02

|

563人浏览过

|

来源于php中文网

原创

如何在 React 聊天机器人中集成 LangChain 对话记忆机制

本文详解如何在前后端分离的 react + fastapi 架构中,利用 langchain 的 `conversationbufferwindowmemory` 实现上下文感知的多轮对话,支持自动保留最近 5 轮问答并注入 llm 提示词,无需前端维护完整历史。

要在 React 聊天机器人中实现真正的多轮对话(例如理解“它比上一个贵吗?”中的“它”和“上一个”),关键不在于前端存储所有消息——而在于后端智能地管理对话上下文,并将其结构化注入 LLM 调用。LangChain 提供了轻量、可控的内存机制,完美适配你的 FastAPI + GPT-3.5 流程。

✅ 后端:用 ConversationBufferWindowMemory 管理上下文

ConversationBufferWindowMemory 会自动缓存最近 k 轮(如 k=5)的 human(用户提问)与 ai(模型回复)交互对,并在每次调用 conversation.predict(input=...) 时,将这些历史拼接进提示词(prompt)的 history 部分。你无需手动序列化/反序列化消息数组——LangChain 已为你封装好。

以下是 FastAPI 中的典型集成示例:

# backend/main.py
from fastapi import FastAPI, HTTPException
from langchain.chains import ConversationChain
from langchain.memory import ConversationBufferWindowMemory
from langchain.prompts import PromptTemplate
from langchain_openai import ChatOpenAI

app = FastAPI()

# 初始化 LLM(请配置 OPENAI_API_KEY)
llm = ChatOpenAI(model="gpt-3.5-turbo", temperature=0.2)

# 定义带 history 占位符的 prompt(关键!)
PROMPT = PromptTemplate(
    input_variables=["history", "input"],
    template="""你是一个专业客服助手。请基于以下对话历史和最新问题,给出准确、简洁的回答。

对话历史:
{history}

最新问题:
{input}

回答:"""
)

# 全局共享 memory 实例(⚠️注意:生产环境应按 session_id 隔离!见下方说明)
memory = ConversationBufferWindowMemory(k=5, return_messages=True)

conversation_chain = ConversationChain(
    llm=llm,
    prompt=PROMPT,
    memory=memory,
    verbose=True  # 开发期建议开启,查看实际注入的 history
)

@app.post("/chat")
async def chat_endpoint(query: str):
    try:
        # 此处可插入你的 query 重写逻辑(如用 GPT 格式化为内部 API 查询语句)
        # …… your query rewriting logic ……

        # 调用 LangChain 对话链(自动注入最近 5 轮 history)
        response = conversation_chain.invoke({"input": query})
        return {"reply": response["response"]}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

⚠️ 重要注意事项(避免踩坑)

  • 不要全局复用 memory 实例:上述示例中 memory 是全局单例,仅适用于单用户开发测试。生产环境必须按用户会话隔离——推荐在 FastAPI 请求中通过 session_id(由前端传入,如 JWT 或 cookie)动态创建或检索 memory 实例,例如使用 ConversationTokenBufferMemory + Redis 缓存,或简单用字典 {session_id: memory} 管理(需加锁/考虑并发)。

    白果AI论文
    白果AI论文

    论文AI生成学术工具,真实文献,免费不限次生成论文大纲 10 秒生成逻辑框架,10 分钟产出初稿,智能适配 80+学科。支持嵌入图表公式与合规文献引用

    下载
  • 前端只需传递 session_id 和当前 query:React 端完全无需保存历史消息用于上下文构建。你只需在每次请求中带上唯一 session_id(如 localStorage.getItem('sessionId') || uuidv4()),后端据此加载对应对话窗口。这极大简化了前端逻辑:

// frontend/App.tsx
const sendMessage = async (text: string) => {
  const sessionId = localStorage.getItem('sessionId') || generateId();
  localStorage.setItem('sessionId', sessionId);

  const res = await fetch('/api/chat', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query: text, session_id: sessionId })
  });
  const data = await res.json();
  // 更新 UI...
};
  • return_messages=True 推荐启用:它使 memory.chat_memory.messages 返回 BaseMessage 对象列表(而非字符串),便于后续调试或扩展(如添加工具调用日志)。

✅ 总结:端到端协作逻辑

  1. 用户在 React 发送消息 → 带 session_id;
  2. FastAPI 接收后,根据 session_id 获取/初始化 ConversationBufferWindowMemory(k=5);
  3. LangChain 自动将该 session 最近 5 轮 HumanMessage/AIMessage 注入 prompt 的 {history};
  4. GPT-3.5 结合历史生成回答,并自动将本次 (query, reply) 存入 memory;
  5. 下次同一 session_id 请求时,窗口自动滑动,旧记录被剔除,新记录加入。

这样,你既获得了自然语言层面的上下文连贯性,又保持了前后端职责清晰——前端专注 UI 与状态管理,后端专注语义理解与状态持久化。

相关专题

更多
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API
Python FastAPI异步API开发_Python怎么用FastAPI构建异步API

Python FastAPI 异步开发利用 async/await 关键字,通过定义异步视图函数、使用异步数据库库 (如 databases)、异步 HTTP 客户端 (如 httpx),并结合后台任务队列(如 Celery)和异步依赖项,实现高效的 I/O 密集型 API,显著提升吞吐量和响应速度,尤其适用于处理数据库查询、网络请求等耗时操作,无需阻塞主线程。

25

2025.12.22

cookie
cookie

Cookie 是一种在用户计算机上存储小型文本文件的技术,用于在用户与网站进行交互时收集和存储有关用户的信息。当用户访问一个网站时,网站会将一个包含特定信息的 Cookie 文件发送到用户的浏览器,浏览器会将该 Cookie 存储在用户的计算机上。之后,当用户再次访问该网站时,浏览器会向服务器发送 Cookie,服务器可以根据 Cookie 中的信息来识别用户、跟踪用户行为等。

6416

2023.06.30

document.cookie获取不到怎么解决
document.cookie获取不到怎么解决

document.cookie获取不到的解决办法:1、浏览器的隐私设置;2、Same-origin policy;3、HTTPOnly Cookie;4、JavaScript代码错误;5、Cookie不存在或过期等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

340

2023.11.23

阻止所有cookie什么意思
阻止所有cookie什么意思

阻止所有cookie意味着在浏览器中禁止接受和存储网站发送的cookie。阻止所有cookie可能会影响许多网站的使用体验,因为许多网站使用cookie来提供个性化服务、存储用户信息或跟踪用户行为。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

406

2024.02.23

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

88

2025.08.19

session失效的原因
session失效的原因

session失效的原因有会话超时、会话数量限制、会话完整性检查、服务器重启、浏览器或设备问题等等。详细介绍:1、会话超时:服务器为Session设置了一个默认的超时时间,当用户在一段时间内没有与服务器交互时,Session将自动失效;2、会话数量限制:服务器为每个用户的Session数量设置了一个限制,当用户创建的Session数量超过这个限制时,最新的会覆盖最早的等等。

307

2023.10.17

session失效解决方法
session失效解决方法

session失效通常是由于 session 的生存时间过期或者服务器关闭导致的。其解决办法:1、延长session的生存时间;2、使用持久化存储;3、使用cookie;4、异步更新session;5、使用会话管理中间件。

732

2023.10.18

cookie与session的区别
cookie与session的区别

本专题整合了cookie与session的区别和使用方法等相关内容,阅读专题下面的文章了解更详细的内容。

88

2025.08.19

php与html混编教程大全
php与html混编教程大全

本专题整合了php和html混编相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.6万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.0万人学习

React核心原理新老生命周期精讲
React核心原理新老生命周期精讲

共12课时 | 1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号