本篇目标做一个真正可上线的 AI 智能助手支持 Agent RAG 用户系统 流式对话最终效果一个类似 ChatGPT 的 Web 应用可登录、可聊天、可查知识库技术栈FastAPI LangGraph ChromaDB Vue3 SQLite/PostgreSQL Nginx前置知识RAG Agent LangGraph 基础一、项目我们要做什么我们要做一个完整 AI Web 应用包含 1. AI 对话能力Agent可以问今天北京天气现在几点23*4是多少记录一个笔记 2. 知识库问答RAG上传 PDF / TXT / WordAI 可以基于文档回答问题 3. 用户系统注册登录JWT 鉴权 4. 流式对话AI 像 ChatGPT 一样“打字输出” 5. 对话历史每个用户有自己的聊天记录二、系统整体架构先建立全局认知前端 Vue3 ↓ HTTP / SSE FastAPI 后端 ↓ ┌─────────────────────────────┐ │ Agent系统LangGraph │ │ RAG系统ChromaDB │ │ 用户系统JWT │ └─────────────────────────────┘ ↓ SQLite / PostgreSQL 向量数据库三、项目初始化3.1 创建项目mkdir ai-assistant cd ai-assistant mkdir backend frontend3.2 后端安装依赖cd backend pip install fastapi uvicorn sqlalchemy python-jose passlib bcrypt \ python-multipart langchain langgraph chromadb \ langchain-openai pypdf2 python-docx3.3 requirements.txtfastapi uvicorn sqlalchemy python-jose[cryptography] passlib[bcrypt] python-multipart langchain langgraph chromadb langchain-openai pypdf2 python-docx四、后端基础搭建4.1 项目结构backend/ ├── main.py ├── database.py ├── models.py ├── auth.py ├── config.py ├── agent/ ├── rag/五、基础配置5.1 config.pyimport os from dotenv import load_dotenv load_dotenv() DEEPSEEK_API_KEY os.getenv(DEEPSEEK_API_KEY, ) DEEPSEEK_BASE_URL https://api.deepseek.com MODEL_NAME deepseek-chat SECRET_KEY os.getenv(SECRET_KEY) ALGORITHM HS256 ACCESS_TOKEN_EXPIRE_MINUTES 60 * 24 DATABASE_URL sqlite:///./app.db CHROMA_PATH ./chroma_db六、数据库设计6.1 为什么要用数据库因为我们要保存用户对话消息历史6.2 models.pyfrom sqlalchemy import Column, Integer, String, DateTime, ForeignKey, Text from sqlalchemy.orm import relationship from datetime import datetime from database import Base class User(Base): __tablename__ users id Column(Integer, primary_keyTrue) username Column(String, uniqueTrue) hashed_password Column(String) conversations relationship(Conversation, back_populatesuser) class Conversation(Base): __tablename__ conversations id Column(Integer, primary_keyTrue) user_id Column(Integer, ForeignKey(users.id)) title Column(String, default新对话) messages Column(Text, default[]) # 简化存储 user relationship(User, back_populatesconversations)七、JWT用户系统7.1 功能注册登录token鉴权7.2 核心代码auth.pyfrom jose import jwt from passlib.context import CryptContext from datetime import datetime, timedelta pwd_context CryptContext(schemes[bcrypt]) SECRET_KEY secret ALGORITHM HS256 def hash_password(pwd): return pwd_context.hash(pwd) def verify_password(pwd, hashed): return pwd_context.verify(pwd, hashed) def create_token(user_id): expire datetime.utcnow() timedelta(days1) return jwt.encode({sub: str(user_id), exp: expire}, SECRET_KEY, algorithmALGORITHM)八、FastAPI主入口8.1 main.py核心from fastapi import FastAPI, Depends from fastapi.middleware.cors import CORSMiddleware from database import Base, engine Base.metadata.create_all(bindengine) app FastAPI() app.add_middleware( CORSMiddleware, allow_origins[*], allow_methods[*], allow_headers[*] )九、Agent系统核心9.1 我们要做什么让 AI 能自动选择工具自动调用函数自动返回结果9.2 tools.pyfrom langchain_core.tools import tool from datetime import datetime tool def get_time(): return datetime.now().strftime(%Y-%m-%d %H:%M:%S) tool def calculator(expr: str): try: return str(eval(expr)) except: return 计算错误9.3 Agent创建from langgraph.prebuilt import create_react_agent from langchain_openai import ChatOpenAI def create_agent(): llm ChatOpenAI(modeldeepseek-chat, streamingTrue) return create_react_agent( modelllm, tools[get_time, calculator] )十、RAG知识库系统10.1 目标让 AI 可以读 PDF 并回答问题10.2 文档加载from PyPDF2 import PdfReader def load_pdf(path): reader PdfReader(path) return \n.join([p.extract_text() for p in reader.pages])10.3 向量数据库from langchain_chroma import Chroma vectorstore Chroma( persist_directory./chroma_db )10.4 RAG核心流程文档 → 切分 → 向量化 → 存储 → 检索 → LLM回答十一、API接口设计11.1 登录app.post(/login) def login(): return {token: xxx}11.2 聊天接口app.post(/chat) def chat(): return StreamingResponse(stream())11.3 流式输出def stream(): yield data: hello\n\n十二、前端 Vue312.1 页面结构LoginView ChatView12.2 聊天核心逻辑fetch(/chat).then(res { const reader res.body.getReader() })12.3 UI能力Markdown渲染实时输出对话列表十三、知识库上传app.post(/upload) async def upload(file: UploadFile): content await file.read()十四、运行项目后端uvicorn main:app --reload前端npm run dev十五、部署上线NginxVue3 → 静态文件 API → FastAPIHTTPScertbot --nginx十六、本项目你真正学到的东西技术能力FastAPI后端开发JWT认证系统AgentLangGraphRAG知识库系统SSE流式通信Vue3前端开发工程能力前后端分离模块化设计AI系统集成简易生产部署下一篇预告第八篇章进阶视野 面试准备——模型微调概览、多模态入门、MCP 协议、RAG/Agent 面试高频考点、八篇章结业总结。
第七篇章：项目实战——从零到上线
本篇目标做一个真正可上线的 AI 智能助手支持 Agent RAG 用户系统 流式对话最终效果一个类似 ChatGPT 的 Web 应用可登录、可聊天、可查知识库技术栈FastAPI LangGraph ChromaDB Vue3 SQLite/PostgreSQL Nginx前置知识RAG Agent LangGraph 基础一、项目我们要做什么我们要做一个完整 AI Web 应用包含 1. AI 对话能力Agent可以问今天北京天气现在几点23*4是多少记录一个笔记 2. 知识库问答RAG上传 PDF / TXT / WordAI 可以基于文档回答问题 3. 用户系统注册登录JWT 鉴权 4. 流式对话AI 像 ChatGPT 一样“打字输出” 5. 对话历史每个用户有自己的聊天记录二、系统整体架构先建立全局认知前端 Vue3 ↓ HTTP / SSE FastAPI 后端 ↓ ┌─────────────────────────────┐ │ Agent系统LangGraph │ │ RAG系统ChromaDB │ │ 用户系统JWT │ └─────────────────────────────┘ ↓ SQLite / PostgreSQL 向量数据库三、项目初始化3.1 创建项目mkdir ai-assistant cd ai-assistant mkdir backend frontend3.2 后端安装依赖cd backend pip install fastapi uvicorn sqlalchemy python-jose passlib bcrypt \ python-multipart langchain langgraph chromadb \ langchain-openai pypdf2 python-docx3.3 requirements.txtfastapi uvicorn sqlalchemy python-jose[cryptography] passlib[bcrypt] python-multipart langchain langgraph chromadb langchain-openai pypdf2 python-docx四、后端基础搭建4.1 项目结构backend/ ├── main.py ├── database.py ├── models.py ├── auth.py ├── config.py ├── agent/ ├── rag/五、基础配置5.1 config.pyimport os from dotenv import load_dotenv load_dotenv() DEEPSEEK_API_KEY os.getenv(DEEPSEEK_API_KEY, ) DEEPSEEK_BASE_URL https://api.deepseek.com MODEL_NAME deepseek-chat SECRET_KEY os.getenv(SECRET_KEY) ALGORITHM HS256 ACCESS_TOKEN_EXPIRE_MINUTES 60 * 24 DATABASE_URL sqlite:///./app.db CHROMA_PATH ./chroma_db六、数据库设计6.1 为什么要用数据库因为我们要保存用户对话消息历史6.2 models.pyfrom sqlalchemy import Column, Integer, String, DateTime, ForeignKey, Text from sqlalchemy.orm import relationship from datetime import datetime from database import Base class User(Base): __tablename__ users id Column(Integer, primary_keyTrue) username Column(String, uniqueTrue) hashed_password Column(String) conversations relationship(Conversation, back_populatesuser) class Conversation(Base): __tablename__ conversations id Column(Integer, primary_keyTrue) user_id Column(Integer, ForeignKey(users.id)) title Column(String, default新对话) messages Column(Text, default[]) # 简化存储 user relationship(User, back_populatesconversations)七、JWT用户系统7.1 功能注册登录token鉴权7.2 核心代码auth.pyfrom jose import jwt from passlib.context import CryptContext from datetime import datetime, timedelta pwd_context CryptContext(schemes[bcrypt]) SECRET_KEY secret ALGORITHM HS256 def hash_password(pwd): return pwd_context.hash(pwd) def verify_password(pwd, hashed): return pwd_context.verify(pwd, hashed) def create_token(user_id): expire datetime.utcnow() timedelta(days1) return jwt.encode({sub: str(user_id), exp: expire}, SECRET_KEY, algorithmALGORITHM)八、FastAPI主入口8.1 main.py核心from fastapi import FastAPI, Depends from fastapi.middleware.cors import CORSMiddleware from database import Base, engine Base.metadata.create_all(bindengine) app FastAPI() app.add_middleware( CORSMiddleware, allow_origins[*], allow_methods[*], allow_headers[*] )九、Agent系统核心9.1 我们要做什么让 AI 能自动选择工具自动调用函数自动返回结果9.2 tools.pyfrom langchain_core.tools import tool from datetime import datetime tool def get_time(): return datetime.now().strftime(%Y-%m-%d %H:%M:%S) tool def calculator(expr: str): try: return str(eval(expr)) except: return 计算错误9.3 Agent创建from langgraph.prebuilt import create_react_agent from langchain_openai import ChatOpenAI def create_agent(): llm ChatOpenAI(modeldeepseek-chat, streamingTrue) return create_react_agent( modelllm, tools[get_time, calculator] )十、RAG知识库系统10.1 目标让 AI 可以读 PDF 并回答问题10.2 文档加载from PyPDF2 import PdfReader def load_pdf(path): reader PdfReader(path) return \n.join([p.extract_text() for p in reader.pages])10.3 向量数据库from langchain_chroma import Chroma vectorstore Chroma( persist_directory./chroma_db )10.4 RAG核心流程文档 → 切分 → 向量化 → 存储 → 检索 → LLM回答十一、API接口设计11.1 登录app.post(/login) def login(): return {token: xxx}11.2 聊天接口app.post(/chat) def chat(): return StreamingResponse(stream())11.3 流式输出def stream(): yield data: hello\n\n十二、前端 Vue312.1 页面结构LoginView ChatView12.2 聊天核心逻辑fetch(/chat).then(res { const reader res.body.getReader() })12.3 UI能力Markdown渲染实时输出对话列表十三、知识库上传app.post(/upload) async def upload(file: UploadFile): content await file.read()十四、运行项目后端uvicorn main:app --reload前端npm run dev十五、部署上线NginxVue3 → 静态文件 API → FastAPIHTTPScertbot --nginx十六、本项目你真正学到的东西技术能力FastAPI后端开发JWT认证系统AgentLangGraphRAG知识库系统SSE流式通信Vue3前端开发工程能力前后端分离模块化设计AI系统集成简易生产部署下一篇预告第八篇章进阶视野 面试准备——模型微调概览、多模态入门、MCP 协议、RAG/Agent 面试高频考点、八篇章结业总结。
