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            # 環境變量模板

1. AI 對話系統

   • 基于 LangChain 的對話鏈
   • 支持多輪對話和上下文管理
   • 集成 OpenAI GPT 模型

2. 工具集成

   • 天氣查詢工具
   • GitHub 倉庫操作
   • 發票生成工具
   • 可擴展的工具架構

3. 圖表可視化

   • 動態圖表生成
   • 數據可視化組件
   • 交互式圖表展示

4. 響應式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/