前言

聊到智能客服，很多人第一反应就是那种"您好，请问有什么可以帮您"的固定话术机器人，问东它答西，稍微绕一点就卡壳。近两年大模型火起来之后，开始琢磨能不能做一个真正"听得懂人话"的客服——不仅能聊天，还能自己查天气、算订单、翻知识库，就像一个真正的客服人员那样会动手干活。

本文介绍一套从后端到前端完全自己搭建的 AI Agent 客服系统。

项目介绍

简单说，这就是一个基于 LangChain Agent 的智能客服系统。用户发来一句话，后端跑起来的 Agent 会判断需要调什么工具（查天气、算数、查订单、搜知识库等），拿到结果之后再组织成自然的回复，通过 SSE 流式推送到前端，实时显示在聊天界面上。整个过程支持多轮对话，Agent 能记住上下文，不会聊着聊着就失忆。

技术栈方面，后端用 FastAPI 提供接口，LangChain 负责 Agent 的调度和工具编排，前端则是 React 18 搭配 TypeScript 和 Tailwind CSS。前后端通过 SSE（Server-Sent Events）通信，实现类似打字机的流式输出效果。

项目架构流程图

┌─────────────────────────────────────────────────────────────┐│                        前端 (React)                          ││  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  ││  │ ChatInterface│  │MessageBubble│  │    LoadingDots     │  ││  │  聊天界面    │  │  消息气泡   │  │    加载动画        │  ││  └─────────────┘  └─────────────┘  └─────────────────────┘  ││         │                                    │               ││         └────────────── useChatStream ──────┘               ││                    (SSE 流式接收)                            │└─────────────────────────────────────────────────────────────┘                              │                              ▼ SSE 流式请求┌─────────────────────────────────────────────────────────────┐│                        后端 (FastAPI)                        ││  ┌─────────────┐  ┌─────────────┐  ┌─────────────────────┐  ││  │   main.py   │  │  agent.py   │  │     tools.py        │  ││  │  API入口    │  │ Agent核心   │  │  8个工具(天气/计算等) │  ││  │  /chat/stream│  │ 创建&执行   │  │  get_weather        │  ││  │  /history   │  │            │  │  calculate           │  ││  └─────────────┘  └─────────────┘  └─────────────────────┘  ││         │                                    │               ││  ┌──────┴──────┐                    ┌───────┴────────┐       ││  │  memory.py  │                    │   llm.py       │       ││  │ 对话记忆    │                    │ LangChain LLM │       ││  │ Conversation│                    │  ChatOpenAI   │       ││  │ BufferMemory│                    │               │       ││  └─────────────┘                    └────────────────┘       │└─────────────────────────────────────────────────────────────┘

数据流转说明：

1、用户在前端输入消息，useChatStream 发起 SSE 连接

2、后端 /api/chat/stream 接口接收请求，将消息和 conversation_id 传给 Agent

3、Agent 从 memory.py 拉取该会话的历史记忆，结合当前输入做推理

4、Agent 判断是否需要调用工具，如需调用则执行 tools.py 中对应的工具函数

5、工具返回结果后，Agent 组织成最终回复，通过 SSE 分块推送给前端

6、前端 MessageBubble 组件逐字渲染，形成打字机效果

7、对话历史通过 memory.py 持久化到 JSON 文件

项目功能

项目特点

项目技术

可用工具清单

项目效果

实际测试下来，几个典型场景的响应速度还不错：

项目源码

项目代码完整托管，目录结构清晰，前后端分离：

ai-customer-service/├── backend/                    # Python 后端│   ├── app/│   │   ├── main.py           # FastAPI 入口，路由定义│   │   ├── llm.py            # LLM 配置│   │   ├── agent.py          # Agent 核心创建和执行│   │   ├── tools.py          # 8 个工具定义│   │   ├── memory.py         # 对话记忆管理│   │   └── schemas.py        # Pydantic 数据模型│   ├── requirements.txt│   └── .env.example├── frontend/                  # React 前端│   ├── src/│   │   ├── components/│   │   │   ├── ChatInterface.tsx│   │   │   ├── MessageBubble.tsx│   │   │   └── LoadingDots.tsx│   │   ├── hooks/│   │   │   └── useChatStream.ts│   │   ├── api/│   │   │   └── chat.ts│   │   ├── App.tsx│   │   └── main.tsx│   ├── package.json│   ├── vite.config.ts│   └── tailwind.config.js├── README.md                   # 项目总览└── LICENSE

如果想本地跑起来，按下面的步骤操作：

# 1、后端cd backendpython -m venv venvsource venv/bin/activate  # Windows 用 venv\Scripts\activatepip install -r requirements.txtcp .env.example .env# 编辑 .env 填上 OPENAI_API_KEYuvicorn app.main:app --reload --port 8000# 2、前端（新开终端）cd frontendnpm installnpm run dev

然后打开 http://localhost:5173 就能用了。

API 接口说明

流式聊天接口

GET /api/chat/stream?message=你好&conversation_id=xxx

或 POST 方式：

POST /api/chat/stream{"message": "你好","conversation_id": "xxx"}

对话历史接口

# 获取历史GET /api/history/{conversation_id}# 清除历史DELETE /api/history/{conversation_id}

总结

做这个项目最大的感触是，LangChain 把 Agent 的门槛拉低了很多。以前要实现类似的工具调用能力，得自己写意图识别、参数抽取、工具路由一大堆逻辑，现在用 LangChain 的 create_openai_functions_agent 加几个 @tool 装饰器就搞定了。当然，它也不是银弹，复杂业务场景下 Agent 的稳定性和可控性还需要花功夫去打磨，但作为快速验证和搭建 MVP 来说，这套组合拳的效率确实很高。

后续想继续完善的方向有几个：一是接入更多的业务工具，比如查物流、退换货申请、工单流转；二是加上 RAG（检索增强生成）能力，让知识库问答更精准；三是前端可以补上多会话管理，支持同时开多个对话窗口。

关键词

LangChain、AI Agent、智能客服、FastAPI、React、SSE流式响应、工具调用、多轮对话、ConversationBufferMemory、TypeScript、Tailwind CSS、全栈开发、OpenAI API