从后端到前端：AI Agent 跨语言全栈项目实战记录（Java + Python + Vue3）

AI Agent 全栈落地

智能体是折腾最久的部分。我单独起了一个 Python 微服务，用 FastAPI 暴露 HTTP 接口，Java 后端通过 RestTemplate 调它。为了防止网络抖动，连接超时设 2 秒，读超时 5 秒，还加了兜底文本。Agent 内部基于 LangChain + LangGraph 实现 ReAct 工作流，总共 7 个核心步骤，专门针对金融场景。模型用 10 万多条高质量金融标注数据微调后，专业问答准确率从 61% 提到 88%。

RAG 这块用 Milvus 向量数据库建了嵌套结构的知识库，文档向量化和混合检索都接进去，召回率到 92%。封装了 12 个金融专属工具，包括资质校验、风险评估、理财推荐，Agent 能自主决定何时调用哪个接口。服务不可用时自动回退兜底，核心功能没断过。

前端及接口安全

前端用 Vue3 + TypeScript + Vite 从头搭，Pinia 管状态，Vue Router 管路由，累计写了 32 个页面、56 个通用组件。Axios 拦截器处理 JWT 自动携带、过期刷新和异常，TypeScript 全链路类型安全，杜绝 any。配合后端联调了借款申请、授信列表、智能金融助手等页面，交互效果符合预期。

接口层面基于 JWT 做无状态认证，前端按角色控制菜单和按钮权限。RESTful API 总共 86 个，Swagger/OpenAPI 3.0 生成文档，Maven 多模块统一构建和依赖管理。日志用 SLF4J + Logback 全链路输出，满足合规审计要求。

AI 助学刷题系统 · Agent 全栈开发

项目地址：https://github.com/CelestialVisionary/studyforge

技术栈

Java 17、Spring Boot 3.0.5、MyBatis Plus 3.5.3.1、MySQL 8.0+、Redis 6.0+、Spring Cache、JWT、Swagger/Knife4j、GPT-3.5-turbo、Kimi AI、阿里云百炼（qwen3-max）、Ollama（mgegemma）、FastAPI、LangChain、LangGraph、PEFT、LoRA、Vue 3、Vite、Element Plus、Axios、Pinia、Vue Router、Docker、docker-compose

这个项目初衷是给同学用，所以架构没整太复杂——Spring Boot 单体搭配独立的 AI Module。围绕知识点检索、智能刷题、错题复盘三个核心流程，小范围服务了 200 多个学生，复习效率提升约 40%。

后端与缓存

后端基于 Spring Boot + MyBatis Plus 做了题库 CRUD、知识标签管理、用户练习记录和错题本等接口，事务用 @Transactional 控制。Redis + Spring Cache 缓存高频知识点和热门排行榜，接口响应速度提了 30%。JWT 做无状态认证，接口文档用 Swagger/Knife4j 自动生成。

AI 功能全栈对接

AI 这边接了多个模型：GPT-3.5、Kimi、阿里云百炼，还有本地跑 Ollama。独立 AI Module 用 FastAPI 暴露接口，LangChain + LangGraph 构建对话流程，支持 PEFT 参数高效微调，LoRA 适配自定义学习数据。所有模型都走标准 OpenAI API 格式，切换很方便。

以下是 LangGraph 里教育场景 ReAct Agent 的核心工作流代码：

# Python: 教育场景 ReAct Agent 工作流（LangGraph 实现）
from langgraph.graph import StateGraph, END
from typing import TypedDict, List

class StudyState(TypedDict):
    question: str
    thought_steps: List[str]
    tool_results: List[dict]
    final_answer: str

def plan(state: StudyState):
    """Step 1: 让 LLM 分步思考"""
    prompt = f"""你是一名资深教师。请分步解答：
    问题：{state['question']}
    要求：1. 判断知识点类别 2. 决定是否需查题库或知识点库"""
    response = llm.invoke(prompt)
    state["thought_steps"].append(response.content)
    return state

def execute_tools(state: StudyState):
    """Step 2: 根据思考结果调用工具"""
    last_step = state["thought_steps"][-1]
    if "知识点" in last_step:
        knowledge = rag_retriever.search(state["question"])
        state["tool_results"].append({"type":"knowledge","content": knowledge})
    elif "题目" in last_step:
        similar_questions = question_db.find_similar(state["question"])
        state["tool_results"].append({"type":"questions","items": similar_questions})
    return state

def generate_answer(state: StudyState):
    """Step 3: 融合工具结果生成教学式回答"""
    context = "\n".join([ item.get("content","") or str(item.get("items","")) for item in state["tool_results"]])
    final_prompt = f"""基于以下教学资料，用通俗易懂的方式回答：
    {context}
    问题：{state['question']}
    要求：分点解释，避免专业术语堆砌"""
    state["final_answer"] = llm.invoke(final_prompt).content
    return state

workflow = StateGraph(StudyState)
workflow.add_node("plan", plan)
workflow.add_node("tools", execute_tools)
workflow.add_node("answer", generate_answer)
workflow.set_entry_point("plan")
workflow.add_edge("plan", "tools")
workflow.add_edge("tools", "answer")
workflow.add_edge("answer", END)
study_agent = workflow.compile()

实时响应用流式输出，前端展示思考过程，体验提升不少。同样也有回退机制，高级模型挂了就切内置模型，服务可用性没掉过线。

前端与部署

前端用 Vue3 + Vite + Element Plus，Pinia 状态管理，核心页面包括知识点检索、智能刷题、错题本、练习统计。智能刷题页面集成 AI 答题按钮，流式结果展示用 EventSource 实现：

<!-- Vue3 + TypeScript: 流式 AI 回答组件 -->
<template>
  <div>
    <div v-html="streamedAnswer"></div>
    <button @click="fetchAIAnswer" :disabled="loading">
      {{ loading ? '思考中...' : '问 AI' }}
    </button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const streamedAnswer = ref('')
const loading = ref(false)
const fetchAIAnswer = () => {
  const question = '如何求解一元二次方程？'
  streamedAnswer.value = ''
  loading.value = true
  const eventSource = new EventSource(`/api/ai/stream?question=${encodeURIComponent(question)}`)
  eventSource.onmessage = (event) => {
    const data = JSON.parse(event.data)
    if (data.type === 'token') {
      streamedAnswer.value += data.text
    } else if (data.type === 'end') {
      eventSource.close()
      loading.value = false
    }
  }
  eventSource.onerror = () => {
    eventSource.close()
    loading.value = false
    streamedAnswer.value += '\n\n⚠️ 连接中断，请重试。'
  }
}
</script>
<style scoped>
.ai-response { font-family: 'Courier New', monospace; white-space: pre-wrap; }
</style>

部署用 docker-compose 编排了五个服务：后端、前端、AI Module、MySQL、Redis，一键启动。线上跑了 200 多个用户，未出现明显瓶颈。

小结

两个项目走下来，算是把 Java 后端、Python Agent、Vue3 前端这三者协作的路子摸了一遍。如果你的场景不需要极致的服务拆分，单体能先跑起来，验证模型效果和业务闭环后再切微服务，成本更低踩坑也少。跨语言通信的稳定性和调试是长期要留意的点，但整体来说，这套组合应对中小规模 AI 应用够用。