前言

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

一、为什么需要 AI Agent 智能客服？

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

传统规则客服	AI Agent 智能客服
❌ 问答对数量有限，无法覆盖长尾	✅ 大模型理解任意自然语言
❌ 只能精确匹配关键词	✅ 精准意图识别 + 实体抽取
❌ 更新成本高，每次改规则	✅ 知识库更新无需改代码
❌ 无法多轮对话	✅ LangChain Memory 全程记忆

💡 核心目标：

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

二、系统整体架构

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

技术	选型理由
Vue3 + TypeScript	前端主流框架，类型安全 + Vite 极速开发
Python3 + FastAPI	LangChain 原生支持，AI 后端首选
LangChain	RAG / Memory / Tool Calling 开箱即用
千问（Qwen-Max）	中文能力强，支持 Function Calling
FAISS 向量数据库	高速语义检索，低成本部署

三、后端核心实现（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 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
"\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(

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

    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_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 泄漏。

四、前端实现（Vue3 + TypeScript）

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<Message[]>([])

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 = ref<HTMLElement>()

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_product
4. FAISS 检索 → 匹配到 Nike 跑步鞋 ￥699
5. 千问大模型综合检索结果 + 对话历史，生成自然语言回复
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%免费】