使用 Python + LangChain + Vue3 构建 LLM 聊天应用

使用 Python LangChain Vue3 构建 LLM 聊天应用从零搭建一个支持流式对话的全栈 LLM 应用FastAPI 后端 Vue3 前端 DeepSeek API。目录使用 Python LangChain Vue3 构建 LLM 聊天应用目录项目结构技术栈技术栈选择AI Agent 主流框架环境配置1. 安装 Python2. 配置 API 密钥3. 编辑器学习路径1. Python 基础2. FastAPI 入门核心概念快速示例Pydantic 要点CORS3. LLM 与 OpenAI 接口核心代码关键概念消息角色4. LangChain 框架安装 运行LCEL 链式语法相关文件消息模板对照5. 后端实现SSE 流式协议API 接口6. 前端实现创建项目功能清单文件说明SSE 前端处理要点运行与验证后端前端请求链路拓展阅读项目结构simple-llm-app/ ├── test/ # 学习 实验代码 │ ├── test.py # 环境变量 OpenAI 接口测试 │ ├── server.py # FastAPI 路由 / Pydantic / CORS 示例 │ ├── llm-app.py # LangChain 链式调用入门 │ ├── llm-app-message.py # LangChain 消息模板 │ └── prompt-template.py # PromptTemplate 示例 ├── backend/ # 生产后端 │ ├── server.py # API 层路由 SSE CORS 启动入口 │ ├── llm_app.py # 业务层LLM 封装与流式生成 │ ├── models.py # 数据层Pydantic 模型 │ ├── test.py # SSE 流式响应实验脚本 │ └── requirements.txt # Python 依赖 └── frontend/ # 聊天窗口前端 └── src/ ├── App.vue # 聊天页面 ├── style.css # 全局样式 ├── types/chat.ts # 类型定义 ├── api/chat.ts # API 请求封装 └── composables/useChat.ts # 聊天逻辑 Hook技术栈层级技术说明后端Python 3 · FastAPI · LangChain · UvicornWeb 框架 LLM 编排 ASGI 服务器前端Vue 3 · TypeScript · Vite组件化 UI 类型安全 构建工具模型DeepSeek API兼容 OpenAI 接口格式说明后端也可替换为 Node.js/Java但 AI 生态在 Python 侧仍具明显优势技术栈选择AI Agent 主流框架框架语言特点适合场景LangChainPython/JS生态最全组件多快速原型、学习入门LlamaIndexPython专注 RAG 和知识检索知识库类应用AutoGenPython微软出品多 Agent 对话多 Agent 协作CrewAIPython角色化 Agent 团队任务分工类场景LangGraphPython状态机式 Agent 流程复杂工作流DifyPython/低代码国产可视化编排快速交付、企业内部阿里百炼 / 腾讯元器等托管平台国内合规部署简单国内商业落地环境配置1. 安装 Python从 Python 官网 下载安装包安装时勾选Add Python to PATH验证安装python--versionpip--version2. 配置 API 密钥在 DeepSeek 控制台 申请 API Key在项目根目录创建.env文件DEEPSEEK_API_KEYsk-xxxxxx安装依赖并验证读取pipinstallpython-dotenv python test/test.py完整示例见test/test.py。3. 编辑器推荐 VS Code / Cursor安装Python语言扩展。学习路径按以下顺序阅读代码由浅入深环境变量 → FastAPI → OpenAI 接口 → LangChain → 后端分层 → 前端聊天页1. Python 基础Python 适合 AI 开发的核心原因特点说明简洁语法接近自然语言快速验证想法丰富生态TensorFlow、PyTorch、LangChain、Hugging Face 等动态类型交互式开发迭代效率高胶水语言底层 C/C/CUDA 计算 Python 高层编排语法速览name张三# 无需声明关键字AGE25# 全大写表示常量约定is_studentTrue# 单行注释用 #多行用 或 GIL 与并发与 Web 服务相关CPU 密集型GIL 限制多线程并行 → 用多进程或 GPUI/O 密集型网络请求、LLM 调用多线程 /asyncio仍然有效FastAPI Uvicorn 的异步模型适合 LLM 推理服务2. FastAPI 入门核心概念组件职责FastAPI路由、验证、序列化、依赖注入UvicornHTTP 解析、并发处理、连接管理ASGI 服务器两者配合才能发挥 FastAPI 的异步性能。快速示例pipinstallfastapi uvicorn python test/server.py访问http://127.0.0.1:9528查看响应访问/docs查看自动生成的 API 文档。完整代码见test/server.py包含基础路由与启动路径参数 查询参数/items/{id}?qxxxPydantic 请求体 / 响应模型HTTP 中间件 CORS 跨域配置Pydantic 要点基于类型注解的运行时数据验证FastAPI 自动生成 OpenAPI 文档/docs典型场景API 请求校验、配置管理、JSON 序列化CORS跨域指协议、域名、端口任一不同。后端需配置CORSMiddleware允许前端跨域访问详见test/server.py。3. LLM 与 OpenAI 接口DeepSeek 兼容 OpenAI API 格式使用openai库即可对接。pipinstallopenai python test/test.py核心代码fromopenaiimportOpenAI clientOpenAI(api_keyos.getenv(DEEPSEEK_API_KEY),base_urlhttps://api.deepseek.com)responseclient.chat.completions.create(modeldeepseek-chat,temperature0.5,messages[{role:user,content:你是谁}])print(response.choices[0].message.content)关键概念概念说明详见choices字段模型返回的候选回复列表test/test.py注释流式响应streamTrue逐 token 输出打字机效果test/test.pytemperature控制随机性低确定性高创造性test/test.py注释消息角色system/user/assistant/tool见下表消息角色角色用途示例场景system设定助手行为规则“你是专业翻译只翻译中英文”user用户输入必填“什么是机器学习”assistant历史回复保持多轮连贯上一轮 AI 的回答tool/function工具调用结果Function Calling 场景4. LangChain 框架Java 开发者可选 LangChain4j · 实战指南LangChain 在 OpenAI 原生接口之上提供链式编排简化 Prompt → LLM → Parser 流程。安装 运行pipinstalllangchain_openai langchain_core python-dotenv python test/llm-app.pyLCEL 链式语法chainprompt|llm|parser# 输入 → 模板填充 → AI 处理 → 解析输出resultchain.invoke({question:你是谁})|是 LangChain 重载的操作符语法糖等价于逐步invoke。相关文件文件内容test/llm-app.py最简链式调用test/llm-app-message.py消息模板系统test/prompt-template.pyPromptTemplate用法消息模板对照LangChain 类角色对应 OpenAISystemMessagePromptTemplatesystemsystemHumanMessagePromptTemplatehumanuserAssistantMessagePromptTemplateassistantassistantAIMessagePromptTemplateaiassistantToolMessagePromptTemplatetooltool5. 后端实现采用单一职责分层架构HTTP POST前端 Vue3API 层backend/server.py业务层backend/llm_app.pyDeepSeek API数据层backend/models.py层级文件职责API 层backend/server.py路由、SSE 流式响应、CORS、Uvicorn 启动业务层backend/llm_app.pyLLM 交互、对话历史、流式生成数据层backend/models.pyChatRequest/ChatMessage等 Pydantic 模型实验脚本backend/test.py独立验证 SSE 流式逻辑开发阶段原型依赖backend/requirements.txt类似前端的package.jsonSSE 流式协议大模型逐字生成场景首选Server-Sent Events (SSE)特性SSEWebSocket长轮询协议HTTP自定义 TCPHTTP方向单向服务器→客户端双向单向复杂度低高高适用LLM 流式输出实时游戏、协作旧系统兼容SSE 事件格式data: {json}\n\nbackend/server.py中chat_stream接口流程原型见backend/test.py发送start事件逐 token 发送token事件发送end事件含完整回复API 接口接口方法说明/api/chat/streamPOSTSSE 流式对话/api/healthGET健康检查6. 前端实现创建项目npmcreate vitelatest frontend ----templatevue-tscdfrontendnpminstall功能清单消息列表用户 / AI 气泡流式打字机效果Enter 发送 · ShiftEnter 换行清空对话 · 自动滚动 · 在线状态文件说明文件职责frontend/src/types/chat.tsMessage·ChatRequest·SSEEvent类型frontend/src/api/chat.tsfetchReadableStream处理 SSEPOST 不支持原生 EventSourcefrontend/src/composables/useChat.ts消息状态、发送、流式更新、取消请求frontend/src/App.vue聊天 UI 组件frontend/src/style.css全局样式SSE 前端处理要点// EventSource 不支持 POST故用 fetch ReadableStreamconstreaderresponse.body?.getReader()// 按 \n\n 分割解析 data: {...} 行// type: start | token | end | error完整实现见frontend/src/api/chat.ts。运行与验证后端cdbackend pipinstall-rrequirements.txt# 确保 backend/.env 中已配置 DEEPSEEK_API_KEYpython server.py# → http://0.0.0.0:8000前端cdfrontendnpminstallnpmrun dev浏览器打开 Vite 提示的本地地址输入问题并发送即可。请求链路DeepSeek APILangChainFastAPIVue3 前端用户浏览器DeepSeek APILangChainFastAPIVue3 前端用户浏览器loop[逐 token]输入问题点击发送POST /api/chat/streamstream_chat(message, history)chat.completions (streamTrue)chunktokenSSE data: {type: token}打字机效果更新SSE data: {type: end}显示完整回复一句话前端 → FastAPI → LangChain → DeepSeek API → 流式返回拓展阅读主题链接CGI / WSGI / ASGI 对比掘金文章FastAPI 官方文档fastapi.tiangolo.com/zhFastAPI 源码github.com/fastapi/fastapiUvicorn 文档uvicorn.orgJS → Python 对照学习langshift.dev