AI Agent 赋能智能客服：Vue3 + LangChain + 千问落地实战

前言 本文适合有前端基础的开发者阅读。我会从整体架构出发详解如何用Vue3 TypeScript做前端交互、**Python3 LangChain 千问Qwen**做后端推理构建一个真正能落地的智能客服 Agent。代码干货较多建议收藏 一、为什么需要 AI Agent 智能客服传统规则式客服的问题显而易见传统规则客服AI Agent 智能客服❌ 问答对数量有限无法覆盖长尾✅ 大模型理解任意自然语言❌ 只能精确匹配关键词✅ 精准意图识别 实体抽取❌ 更新成本高每次改规则✅ 知识库更新无需改代码❌ 无法多轮对话✅ LangChain Memory 全程记忆 核心目标用户用自然语言提问Agent 自动判断意图调用后端工具链知识库检索 → 商品查询 → 订单确认 → 生成回复形成完整闭环。二、系统整体架构系统分为三层前端交互层、Agent 调度层、工具能力层。技术选型理由Vue3 TypeScript前端主流框架类型安全 Vite 极速开发Python3 FastAPILangChain 原生支持AI 后端首选LangChainRAG / Memory / Tool Calling 开箱即用千问Qwen-Max中文能力强支持 Function CallingFAISS 向量数据库高速语义检索低成本部署三、后端核心实现Python3 LangChain 千问3.1 环境依赖pip install langchain langchain-community langchain-core pip install fastapi uvicorn pip install dashscope pip install sentence-transformers faiss-cpu pip install pydantic3.2 RAG 商品知识库构建from langchain_community.embeddings import DashScopeEmbeddings from langchain_community.vectorstores import FAISS from langchain.text_splitter import RecursiveCharacterTextSplitter product_docs [ 商品运动跑步鞋品牌Nike货号AJ2024价格699分类运动鞋特点轻盈透气 , 商品无线蓝牙耳机品牌Sony型号WF-1000XM5价格1599分类数码特点主动降噪 , 商品智能手环品牌华为型号Band 8价格299分类穿戴设备特点心率监测、睡眠追踪 , ] splitter RecursiveCharacterTextSplitter(chunk_size 100 , chunk_overlap 20 ) docs splitter.create_documents(product_docs) embeddings DashScopeEmbeddings( model text-embedding-v3 , dashscope_api_key your-dashscope-api-key ) vectorstore FAISS.from_documents(docs, embeddings) vectorstore.save_local( faiss_product_index ) print(f 商品知识库构建完成共索引 {len(docs)} 条 )3.3 定义 Agent Toolsfrom langchain.agents import AgentExecutor, create_react_agent from langchain.tools import tool tool (description 检索平台商品信息。 ) def search_product(query: str) - str: results retriever.get_relevant_documents(query) if not results: return 未找到相关商品请联系人工客服。 return \n .join([f - {r.page_content} for r in results]) tool (description 查询用户订单状态。 ) def check_order(order_id: str) - str: mock_orders { ORD20240101 : 已发货预计3天后送达 , ORD20240102 : 运输中运单号CN123456789 , ORD20240103 : 已签收 , } return mock_orders. get(order_id, 未找到订单信息请核实订单号 ) tool (description 转人工客服处理。 ) def escalate_to_human(reason: str) - str: return f 正在为您转接人工客服请稍候...原因{reason} tools [search_product, check_order, escalate_to_human]3.4 构建 ReAct Agent核心from langchain_community.chat_models import ChatDashScope from langchain.memory import ConversationBufferMemory from langchain.prompts import PromptTemplate # 初始化千问大模型 llm ChatDashScope( model_name qwen-max , dashscope_api_key your-dashscope-api-key , temperature 0.3 ) # 对话记忆 memory ConversationBufferMemory( memory_key chat_history , return_messages True, output_key output ) # 构建 ReAct Agent prompt PromptTemplate.from_template( 你是一个专业的平台品类智能客服。 处理流程 1 . 理解用户问题意图识别 2 . 判断是否需要调用工具 3 . 综合信息生成回复 4 . 无法处理时转人工 历史对话{chat_history} 用户问题{input} {agent_scratchpad} ) agent create_react_agent(llm, tools, prompt) agent_executor AgentExecutor( agentagent, toolstools, memorymemory, verbose True, max_iterations 5 , handle_parsing_errors True ) def chat(user_input: str) - str: return agent_executor.invoke({ input : user_input})[ output ] # 测试 if __name__ __main__ : print(chat( 我想买一双跑步鞋有什么推荐吗 ))3.5 FastAPI 对接前端from fastapi import FastAPI, HTTPException from fastapi.middleware.cors import CORSMiddleware from pydantic import BaseModel app FastAPI(title AI 客服 Agent API ) app.add_middleware( CORSMiddleware, allow_origins[ * ], allow_credentials True, allow_methods[ * ], allow_headers[ * ], ) class ChatRequest(BaseModel): message: str session_id: str | None None class ChatResponse(BaseModel): reply: str session_id: str app .post( /api/chat ,response_modelChatResponse) async def chat_endpoint(req: ChatRequest): reply chat(req.message) return ChatResponse(replyreply, session_idreq.session_id or default ) # 启动uvicorn main:app --reload --port 8000⚠️ 千问 API Key在 阿里云百炼平台 申请。生产环境务必限定 API 调用域名防止 Key 泄漏。四、前端实现Vue3 TypeScript4.1 项目初始化npm create vitelatest customer-service -- --template vue-ts cd customer-service npm install npm install axios pinia4.2 Pinia 聊天状态管理import { defineStore } from pinia import { ref } from vue import axios from axios import type { Message } from ../types/chat export const useChatStore defineStore( chat , () { const messages refMessage[]([]) const isLoading ref( false) const addUser (content: string) messages.value.push({ id: crypto.randomUUID(), role: user , content, timestamp: Date.now(), }) const addAssistant () { const id crypto.randomUUID() messages.value.push({ id, role: assistant , content: , timestamp: Date.now(), loading: true, }) return id } const updateAssistant (id: string, content: string) { const m messages.value.find(x x.id id) if (m) { m.content content; m.loading false } } const sendMessage async (content: string) { addUser(content) isLoading.value true const loadingId addAssistant() try { const res await axios.post( http://localhost:8000/api/chat, { message: content } ) updateAssistant(loadingId, res.data.reply) } catch { updateAssistant(loadingId, 抱歉服务出错了请稍后再试 ) } finally { isLoading.value false } } return { messages, isLoading, sendMessage } })4.3 ChatWindow 组件template div class chat-window div class header 智能客服/div div class messages ref scrollRef div v- for msg in chatStore.messages :key msg.id class msg-item :class msg.role div class bubble span v- if !msg.loading {{ msg.content }}/span span v- else class loading 正在思考.../span /div /div /div div class input-area input v-model inputText keyup.enter handleSend placeholder 输入您的问题... :disabled chatStore.isLoading / button click handleSend 发送/button /div /div /template script setup lang ts import { ref, nextTick } from vue import { useChatStore } from ../stores/chat const chatStore useChatStore() const inputText ref( ) const scrollRef refHTMLElement() const handleSend async () { const t inputText.value.trim() if (!t || chatStore.isLoading) return inputText.value await chatStore.sendMessage(t) await nextTick() scrollRef.value?.scrollTo({ top: 9999, behavior: smooth }) } /script五、完整对话流程1.用户输入“我想买一双跑步鞋预算 800 以内”2.Vue3 前端 POST /api/chat → FastAPI 接收3.LangChain Agent 识别意图调用 search_product4.FAISS 检索 → 匹配到 Nike 跑步鞋 6995.千问大模型综合检索结果 对话历史生成自然语言回复6.回复写入 Memory返回前端展示 ✅ 效果整个对话在1-2 秒内完成用户感知到的是智能、流畅、能真正解决问题的客服体验——而非传统关键词机器人。 快速上手建议先用千问 API 跑通本地方案再逐步接入真实商品库和订单系统。建议先在测试环境跑通 LangChain Agent 的 Tool Calling 流程再做前端 UI。学AI大模型的正确顺序千万不要搞错了2026年AI风口已来各行各业的AI渗透肉眼可见超多公司要么转型做AI相关产品要么高薪挖AI技术人才机遇直接摆在眼前有往AI方向发展或者本身有后端编程基础的朋友直接冲AI大模型应用开发转岗超合适就算暂时不打算转岗了解大模型、RAG、Prompt、Agent这些热门概念能上手做简单项目也绝对是求职加分王给大家整理了超全最新的AI大模型应用开发学习清单和资料手把手帮你快速入门学习路线:✅大模型基础认知—大模型核心原理、发展历程、主流模型GPT、文心一言等特点解析✅核心技术模块—RAG检索增强生成、Prompt工程实战、Agent智能体开发逻辑✅开发基础能力—Python进阶、API接口调用、大模型开发框架LangChain等实操✅应用场景开发—智能问答系统、企业知识库、AIGC内容生成工具、行业定制化大模型应用✅项目落地流程—需求拆解、技术选型、模型调优、测试上线、运维迭代✅面试求职冲刺—岗位JD解析、简历AI项目包装、高频面试题汇总、模拟面经以上6大模块看似清晰好上手实则每个部分都有扎实的核心内容需要吃透我把大模型的学习全流程已经整理好了抓住AI时代风口轻松解锁职业新可能希望大家都能把握机遇实现薪资/职业跃迁这份完整版的大模型 AI 学习资料已经上传CSDN朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】