本教程将手把手带你使用 React、LangChain 和 FastAPI，从零开始构建一个功能完整的前后端分离 AI 对话应用。你将掌握如何集成现代化的前端框架与强大的后端 AI 处理能力。
后端搭建：FastAPI + LangChain 服务
后端基于 Python 3.12，使用 LangChain 处理 AI 逻辑，FastAPI 提供 RESTful 接口，并借助 Chainlit 管理认证和 WebSocket 连接。
首先，安装所有必要的依赖包。
pip install -U langchain langchain-openai chainlit fastapi
安装完成后，你需要设置几个关键的环境变量来配置 AI 模型和认证。
OPENAI_API_KEY=你的key
OPENAI_BASE_URL=RESTful 地址 # 例如使用智谱AI：https://open.bigmodel.cn/api/paas/v4/
MODEL_NAME=模型名称 # 例如：glm-4-flash
# CHAINLIT_AUTH_SECRET 可以使用 `chainlit create-secret` 命令生成
CHAINLIT_AUTH_SECRET=_AQ2?V,vAsI4%IFegUSOBQwdt@pr_mNOhARhJF$-RyUvJYnT>MHAak_HIZxA6t=N
环境变量配置妥当后，运行后端主程序即可启动服务。
python app.py
服务启动后，终端会输出运行地址，例如 http://0.0.0.0:80。
前端实现：React + TypeScript 客户端
前端部分我们采用当前流行的技术栈：React + TypeScript + Vite 进行构建，并集成 @chainlit/react-client、recoil 和 tailwindcss。
使用 @chainlit/react-client 可以极大简化开发，它内置了 WebSocket 客户端和管理聊天状态的各种钩子（Hooks），无需手动处理复杂的连接逻辑。主要提供的钩子及其功能如下：
| 钩子 |
功能描述 |
useChatSession |
管理聊天会话与 WebSocket 服务器的连接 |
useChatMessages |
管理聊天消息的检索和渲染 |
useChatData |
访问与聊天相关的数据和状态 |
useChatInteract |
提供与聊天系统交互的方法 |
useAuth |
处理认证过程 |
useApi |
使用 SWR 简化数据获取和错误处理 |
注意：@chainlit/react-client 目前对 React 版本有要求，需要将项目中的 React 版本锁定在 18.3.1。
确保后端服务（FastAPI）已经运行，然后进入前端项目目录，安装依赖并启动开发服务器。
# 在 frontend 目录下运行命令
npm i
npm run dev
启动成功后，在浏览器中访问 http://localhost:5173/，你将看到一个简洁的聊天界面，可以与部署在后端的 AI 模型进行对话。
项目源码与结语
本项目的完整源代码，包含前后端所有配置和组件，你可以通过以下链接获取，用于学习和进一步开发。
整个构建过程清晰地展示了如何利用 LangChain 这类框架快速集成 AI 能力，并通过现代化的前后端分离架构（React + FastAPI）将其封装为一个可交互的 Web 应用。如果你在Python后端或 React 前端开发中遇到问题，欢迎在云栈社区与其他开发者交流探讨。
源码地址：https://pan.baidu.com/s/19MluPIxTpFZglfVzfIRsGg?pwd=seqk | 
发表于 2026-2-13 05:25:27
|
查看: 39|
回复: 0
