gen-ui-python
https://github.com/fanqingsong/gen-ui-python?tab=readme-ov-file
https://github.com/bracesproul/gen-ui-python
Generative UI with LangChain Python 🦜🔗
This application aims to provide a template for building generative UI applications with LangChain Python. It comes pre-built with a few UI features which you can use to play about with gen ui. The UI components are built using Shadcn.
- 框架: Next.js 14.2.3 (React 18)
- 语言: TypeScript
- 样式: Tailwind CSS + Shadcn/ui
- 状态管理: Jotai
- 图表库: Tremor React + MUI X Charts
- AI集成: LangChain.js + Vercel AI SDK
- UI组件: Radix UI + Lucide React
- 构建工具: Yarn
- 框架: FastAPI + Uvicorn
- 语言: Python 3.9-3.11
- AI框架: LangChain + LangGraph
- 数据库: MongoDB (Motor异步驱动)
- API服务: LangServe
- 依赖管理: UV (替代Poetry)
- 类型检查: MyPy + Ruff
- 容器化: Docker + Docker Compose
- 环境管理: 多环境配置 (开发/生产)
- 镜像加速: 华为云镜像仓库
- 热重载: 开发环境支持
gen-ui-python/
├── frontend/ # Next.js 前端应用
│ ├── app/ # App Router 页面
│ ├── components/ # UI 组件库
│ ├── ai/ # AI 相关工具和钩子
│ ├── lib/ # 工具函数
│ └── utils/ # 实用工具
├── backend/ # FastAPI 后端服务
│ └── gen_ui_backend/ # 后端核心模块
│ ├── server.py # FastAPI 服务器
│ ├── chain.py # LangChain 链式处理
│ ├── ai_config.py # AI 配置管理
│ ├── tools/ # 工具模块 (天气、GitHub等)
│ └── charts/ # 图表相关功能
├── docker-compose.yml # 开发环境配置
├── docker-compose.prod.yml # 生产环境配置
└── env.template # 环境变量模板
-
AI 对话系统
- 基于 LangChain 的对话链
- 支持多轮对话和上下文管理
- 集成 OpenAI GPT 模型
-
工具集成
- 天气查询工具
- GitHub 仓库操作
- 发票生成工具
- 可扩展的工具架构
-
图表可视化
- 动态图表生成
- 数据可视化组件
- 交互式图表展示
-
响应式UI
- 基于 Shadcn/ui 的现代设计
- 移动端适配
- 暗色/亮色主题支持
本项目采用先进的流式显示技术,让用户能够实时看到AI生成内容的过程,而不是等待完整响应。
传统方式:
用户: 请写一首关于春天的诗
[等待... 等待... 等待... 10秒后]
AI: 春风吹绿柳,花开满枝头...
流式显示:
用户: 请写一首关于春天的诗
AI: 春
AI: 春风
AI: 春风吹
AI: 春风吹绿
AI: 春风吹绿柳
AI: 春风吹绿柳,
AI: 春风吹绿柳,花
AI: 春风吹绿柳,花开满枝头...
用户输入 → 后端AI处理 → 流式事件 → 前端实时渲染↓ ↓ ↓ ↓聊天界面 LangChain server.tsx 浏览器显示
- 即时反馈: 用户立即知道系统在工作
- 减少等待焦虑: 看到进度而不是空白屏幕
- 更好的交互: 可以实时看到AI的"思考过程"
- 更自然的对话: 像真人对话一样逐步显示
-
服务端流式处理 (
frontend/utils/server.tsx
)createStreamableUI()
: 创建可流式更新的UI组件streamRunnableUI()
: 将LangChain流式事件转换为RSC流- 事件处理器实时处理每个流式事件
-
客户端实时渲染 (
frontend/components/prebuilt/chat.tsx
)element.ui
: 实时接收流式UI更新element.lastEvent
: 等待最终结果- 状态管理实时更新界面
-
数据流向
后端AI服务 → 前端服务端组件 → createStreamableUI → 客户端浏览器↓ ↓ ↓ ↓LangChain server.tsx 流式UI更新 实时显示