gen-ui-python

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 🦜🔗

Overview

 

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            # 环境变量模板

 

核心功能模块

1. AI 对话系统

   • 基于 LangChain 的对话链
   • 支持多轮对话和上下文管理
   • 集成 OpenAI GPT 模型

2. 工具集成

   • 天气查询工具
   • GitHub 仓库操作
   • 发票生成工具
   • 可扩展的工具架构

3. 图表可视化

   • 动态图表生成
   • 数据可视化组件
   • 交互式图表展示

4. 响应式UI

   • 基于 Shadcn/ui 的现代设计
   • 移动端适配
   • 暗色/亮色主题支持

流式显示技术

🔄 实时流式显示原理

本项目采用先进的流式显示技术，让用户能够实时看到AI生成内容的过程，而不是等待完整响应。

传统方式 vs 流式显示

传统方式：

用户: 请写一首关于春天的诗
[等待... 等待... 等待... 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更新      实时显示