给你一份可直接落地的前端实现：我已把完整的 React/Next.js 单文件示例（含自定义 Tool UI、样式与 Data Stream 运行时接入）放到右侧画布里。按下面步骤即可跑起来：
```
"use client";
// ------------------------------------------------------------
// assistant-ui × LangGraph(FastAPI) 流式前端 (Data Stream 协议)
// ------------------------------------------------------------
// 说明：
// 1) 该文件可作为 Next.js `app/page.tsx` 或任意 React 页面组件使用。
// 2) 依赖：
// npm i @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-data-stream \
// @assistant-ui/react-markdown remark-gfm @radix-ui/react-tooltip \
// @radix-ui/react-slot lucide-react class-variance-authority clsx tailwindcss-animate
// 3) 样式：
// - 在 tailwind.config.ts 中加入插件：
// plugins: [
// require("tailwindcss-animate"),
// require("@assistant-ui/react-ui/tailwindcss")({ components: ["thread", "thread-list"], shadcn: true })
// ]
// - 在全局布局文件(如 app/layout.tsx)中引入：
// import "@assistant-ui/react-ui/styles/index.css";
// 4) 运行约定：后端 FastAPI 暴露 POST /api/chat，返回基于 Data Stream 协议的 SSE。
// - 响应头需包含：'x-vercel-ai-ui-message-stream': 'v1'
// - 事件类型至少包含：start、text-start / text-delta / text-end、
// tool-input-start / tool-input-delta / tool-input-available、
// tool-output-available、start-step、finish-step、finish、[DONE]
// - 这些事件来自 LangGraph 的 run/工具事件映射（由后端转成 Data Stream 协议）。
// ------------------------------------------------------------
import React, { useMemo } from "react";
import {
AssistantRuntimeProvider,
makeAssistantToolUI,
} from "@assistant-ui/react";
import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";
import { Thread } from "@assistant-ui/react-ui";
import { Check, Globe, Search, Terminal } from "lucide-react";
// ---------------------------
// 1) 自定义 Tool UI（可选）
// ---------------------------
// 将 LangGraph 工具事件以特定工具名注册到前端 UI 中，
// toolName 需与后端发送的工具名完全一致。
// Web 搜索工具 UI（示例：toolName: "web_search"）
const WebSearchToolUI = makeAssistantToolUI<{ query: string }, { results: Array<{ title: string; url: string; snippet?: string }>; took_ms?: number }>({
toolName: "web_search",
render: ({ args, result, status }) => {
return (
Web 搜索
— {args?.query ?? ""}
{status.type === "running" && (
正在搜索…
)}
{status.type === "requires_action" && (
等待后端确认…
)}
{status.type === "incomplete" && (
搜索失败
)}
{status.type === "complete" && result && (
{result.results?.slice(0, 6).map((r, i) => (
-
{r.title}
{r.snippet &&
{r.snippet}
}
))}
{typeof result.took_ms === "number" && (
- 耗时 {result.took_ms}ms
)}
)}
);
},
});
// URL 抓取工具 UI（示例：toolName: "fetch_url"）
const FetchUrlToolUI = makeAssistantToolUI<{ url: string }, { title?: string; content?: string } | { error: string }>({
toolName: "fetch_url",
render: ({ args, result, status }) => {
return (
抓取网页
— {args?.url ?? ""}
{status.type === "running" && (
抓取中…
)}
{status.type === "complete" && result && "error" in result && (
错误：{result.error}
)}
{status.type === "complete" && result && !("error" in result) && (
{result.title &&
{result.title}
}
{result.content && (
{result.content}
)}
)}
);
},
});
// Python 代码执行 UI（示例：toolName: "python" 或 "run_python"）
const PythonToolUI = makeAssistantToolUI<{ code: string }, { stdout?: string; stderr?: string; elapsed_ms?: number }>({
toolName: "python",
render: ({ args, result, status }) => {
return (
执行 Python
{args?.code}
{status.type === "running" && (
运行中…
)}
{status.type === "complete" && result && (
{result.stdout && (
)}
{result.stderr && (
)}
{typeof result.elapsed_ms === "number" && (
用时 {result.elapsed_ms}ms
)}
)}
);
},
});
// ---------------------------
// 2) Runtime Provider（Data Stream 协议，SSE）
// ---------------------------
// useDataStreamRuntime 会：
// - 在发送消息后，自动通过 EventSource 连接到 /api/chat 的 SSE 流；
// - 解析 Data Stream 协议事件并更新到线程消息；
// - 支持多步/工具调用的可视化（配合上方 Tool UIs）。
function AssistantProvider({ children }: { children: React.ReactNode }) {
const runtime = useDataStreamRuntime({
api: "/api/chat", // 对应 FastAPI 的 POST /api/chat
// 如果需要自定义 headers/cookies，可传入 fetcher:
// fetcher: (input, init) => fetch(input, { ...init, credentials: "include" })
});
return (
{children}
);
}
// ---------------------------
// 3) 主界面：Thread（预设主题，开箱即用）
// ---------------------------
// 你也可以改用更细粒度的 primitives 自定义外观；此处采用 @assistant-ui/react-ui 的 Thread 组件。
export default function App() {
// 你可通过 URL 参数或路由传入 threadId 等信息（示例保留默认主线程）。
const header = useMemo(
() => (
LangGraph Agent · FastAPI · Streaming
assistant-ui × LangGraph(FastAPI) 演示
),
[]
);
return (
{header}
{/* 注册前端 Tool UI（顺序无关，可按需增减；未注册的工具将 fallback 到纯文本或你自定义的 ToolFallback）*/}
{/* 线程组件：包含消息视图 + 输入框，默认支持 Markdown、高亮、附件、撤回/编辑、自动滚动等 */}