gen-ui-python
gen-ui-python
https://github.com/fanqingsong/gen-ui-python?tab=readme-ov-file
https://js.langchain.com/docs/how_to/generative_ui/
https://github.com/bracesproul/gen-ui-python
https://github.com/bracesproul/gen-ui
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更新 实时显示
工作原理
https://js.langchain.com/docs/how_to/generative_ui/
async function agent(inputs: {
input: string;
chat_history: [role: string, content: string][];
}) {
"use server";
return streamRunnableUI(agentExecutor, {
input: inputs.input,
chat_history: inputs.chat_history.map(
([role, content]) => new ChatMessage(content, role)
),
});
}
export const EndpointsContext = exposeEndpoints({ agent });
In order to ensure all of the client components are included in the bundle, we need to wrap all of the Server Actions into exposeEndpoints method. These endpoints will be accessible from the client via the Context API, seen in the useActions hook.
"use client";
import type { EndpointsContext } from "./agent";
export default function Page() {
const actions = useActions<typeof EndpointsContext>();
const [node, setNode] = useState();
return (
<div>
{node}
<button
onClick={async () => {
setNode(await actions.agent({ input: "cats" }));
}}
>
Get images of cats
</button>
</div>
);
}https://gitee.com/haishang001/langchain-nextjs
This template scaffolds a LangChain.js + Next.js starter app. It showcases how to use and combine LangChain modules for several use cases. Specifically:
- Simple chat
- Returning structured output from an LLM call
- Answering complex, multi-step questions with agents
- Retrieval augmented generation (RAG) with a chain and a vector store
- Retrieval augmented generation (RAG) with an agent and a vector store
Most of them use Vercel's AI SDK to stream tokens to the client and display the incoming messages.
It's free-tier friendly too! Check out the bundle size stats below.
You can check out a hosted version of this repo here: https://langchain-nextjs-template.vercel.app/
浙公网安备 33010602011771号