👋 本文适合有前端基础的开发者阅读。我会从整体架构出发，详解如何用Vue3 + TypeScript做前端交互、Python3 + LangChain + 千问（Qwen）做后端推理，构建一个真正能落地的智能客服 Agent。代码干货较多，建议收藏 👍

传统规则式客服的问题显而易见：

💡 核心目标：

用户用自然语言提问，Agent 自动判断意图，调用后端工具链（知识库检索 → 商品查询 → 订单确认 → 生成回复），形成完整闭环。

系统分为三层：前端交互层、Agent 调度层、工具能力层。

3.1 环境依赖

pip install langchain langchain-community langchain-core

pip install fastapi uvicorn

pip install dashscope

pip install sentence-transformers faiss-cpu

pip install pydantic

3.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 Tools

from 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 “ ” .join([f “- {r.page_content}” for r in results])

@tool (description= “查询用户订单状态。” )

def check_order(order_id: str) -> str:

mock_orders = { 

“ORD”

“已发货，预计3天后送达” ,

“ORD”

“运输中，运单号：CN” ,

“ORD”

“已签收” ,

}

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(

agent=agent, tools=tools, memory=memory, verbose= 

True, max_iterations= 5 ,

handle_parsing_errors= 

True

)

def chat(user_input: str) -> str:

“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_model=ChatResponse)

async def chat_endpoint(req: ChatRequest):

reply = chat(req.message) 

return ChatResponse(reply=reply, session_id=req.session_id or “default” )

启动：uvicorn main:app –reload –port 8000

⚠️ 千问 API Key：

在 阿里云百炼平台 申请。生产环境务必限定 API 调用域名，防止 Key 泄漏。

4.1 项目初始化

npm create vite@latest customer-service – –template vue-ts

cd customer-service && npm install

npm install axios pinia

4.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 = ref ([])

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 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 组件

 :key= 

 class= 

 :class= 

 > 
     
       
       

 @keyup.enter= 

 placeholder= 

 :disabled= 

 />