拓冰网站定制 
CopilotKit 实战基于 LangGraph Tavily 构建带人工在环Human-in-the-Loop的研究画布应用 ANA【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit导读本篇文章以 CopilotKit 仓库中的open-research-ANA演示项目位于 examples/showcases/research-canvas/final为核心讲解如何将 LangGraph 状态机、Tavily 实时搜索与 CopilotKit 的 Agent Native 前端结合起来构建一款支持人工审核大纲 → 分节写作 → 实时进度展示的交互式研究画布应用。读完本文你将掌握从 LangGraph Agent 到 Next.js 前端的完整搭建链路、interrupt人工在环机制的实现原理以及 CopilotKit 状态渲染与流式输出 API 的实际用法。项目概览什么是 ANAAgent Native Applicationopen-research-ANA是一个研究画布Research Canvas演示应用README 将其定位为ANAAgent Native Application应用不再是单纯的聊天框而是把 Agent 的中间状态搜索进度、大纲提案、章节草稿直接渲染到页面上的一个结构化工作区。其核心能力组合如下Tavily 实时搜索为 Agent 提供真实的联网检索与页面内容抽取能力LangGraph 工作流编排搜索 → 提大纲 → 人工审核 → 分节写作的状态机流程CopilotKit Agent 界面负责 Agent 与前端的通信、状态渲染、中断interrupt处理与流式章节输出。项目目录中同时保留了start/起始骨架与final/完整实现两份副本final即本文讲解的成品。Agent 端为 PythonLangGraph CopilotKit Python SDK前端为 Next.jsReact CopilotKit React SDK两者通过 CopilotKit Runtime 桥接。整体架构Agent 与前端如何协同从代码结构看项目由两个相对独立的部分组成Agent 端examples/showcases/research-canvas/final/agent包含状态定义 state.py、模型配置 config.py、工作流图 graph.py以及tools/下的四个工具tavily_search、tavily_extract、outline_writer、section_writer。前端examples/showcases/research-canvas/final/frontendNext.js 15 应用页面通过 page.tsx 组织成左侧聊天 右侧文档视图的可拖拽分栏布局核心组件包括Chat、DocumentsView、StructureProposalViewer、Progress、SourcesModal等。前后端之间由 Next.js API 路由 route.ts 承接它使用copilotkit/runtime的CopilotRuntime与langGraphPlatformEndpoint指向 LangGraph 平台部署的agent描述为 Research assistant同时用OpenAIAdapter连接 OpenAI 服务。Agent 工作流的三节点设计graph.py 中的ResearchAgent类把研究流程建模为一张三个节点的状态图call_model_node入口与终点节点。动态构建 System Prompt调用绑定工具的 LLM若模型决定调用工具则跳转tool_node否则结束图执行__end__tool_node自定义异步工具节点。依次执行模型选择的工具把工具返回的新状态通过copilotkit_emit_state推送给前端其中review_proposal工具是特殊路由——命中它即跳转process_feedback_nodeprocess_feedback_node人工在环节点。调用interrupt(state.get(proposal, {}))挂起图的执行等待用户在前端审核大纲后返回结果。图的边定义非常简洁call_model_node是入口同时也是出口set_finish_pointtool_node与process_feedback_node执行完都回到call_model_node形成循环直到模型不再调用工具为止。状态的集中管理ResearchStatestate.py 中ResearchState继承自CopilotKitState后者扩展了 LangGraph 的MessagesState额外声明了研究任务所需的全部字段title报告标题proposal写作前提交给用户审核的提议结构含各章节的 title / description / approved 标记outline用户审核通过后的最终大纲sections已写好的章节列表每项含title、content、idxfootnotes与sources参考文献与来源数据URL 到来源对象的映射tool当前正在执行的工具名logs推送给前端展示的进度日志列表每项含message与done状态。所有关键中间产物都沉淀在状态里工具通过读写state实现数据共享这也是 Agent Native 界面能实时渲染搜索进度、大纲提案、章节草稿的数据基础。快速启动从零跑通 ANA以下是 README 给出的标准启动流程分为 Agent 与前端两大部分。1. 环境准备Prerequisites项目依赖以下工具pnpm 指定packageManager: pnpm10.2.1DockerLangGraph 本地开发服务依赖容器运行LangGraph CLI用于启动本地 Agent 服务Agent 端 requirements.txt 固定了langgraph-cli0.1.71。2. 需要准备的 API Key在本地运行时需要以下四组密钥分别配置在 Agent 与前端两个.env文件中OpenAI驱动 LLM 推理Agent 端模型配置见 config.py主流程使用gpt-4o-mini、温度 0.0大纲写作等任务用gpt-4/gpt-4o-miniTavily实时搜索与网页内容抽取LangSmithLangGraph 平台的追踪与链路观测CopilotKit云端 Dashboard 提供的NEXT_PUBLIC_COPILOT_CLOUD_API_KEY用于前端与 Agent 的安全通信。3. 启动 Agentcd agent # Create and populate .env cat EOF .env OPENAI_API_KEYyour_key TAVILY_API_KEYyour_key LANGSMITH_API_KEYyour_key EOF ## Start the agent langgraph up # Note the API URL from the output (e.g., http://localhost:8123)langgraph up会读取 langgraph.json其声明了图的入口agent: ./graph.py:graph即graph ResearchAgent().graph编译产物、Python 版本3.12与依赖声明dependencies: [.]。启动后请记录输出的 API URL默认形如http://localhost:8123后续隧道命令与前端环境变量会用到它。4. 为本地 Agent 打开隧道npx copilotkitlatest dev --port 8123这条命令通过 CopilotKit CLI 把本地 8123 端口的 LangGraph Agent 暴露为隧道地址供 CopilotKit Cloud 与前端连接本地开发模式下由DEPLOYMENTlocal与LOCAL_DEPLOYMENT_URL环境变量控制见 package.json 的dev脚本与 route.ts 中的部署地址选择逻辑。5. 启动前端cd frontend pnpm install # Create and populate .env cat EOF .env OPENAI_API_KEYyour_openai_key LANGSMITH_API_KEYyour_langsmith_key NEXT_PUBLIC_COPILOT_CLOUD_API_KEYyour_copilot_cloud_key EOF # Start the app pnpm run devpnpm run dev实际执行DEPLOYMENTlocal next dev。若你的 Agent 部署在 LangGraph Cloud 而非本地可改用remote-lgc-dev即DEPLOYMENTremote next dev此时 route.ts 会改用DEPLOYMENT_URL指向远程部署。深度解析人工在环Human-in-the-Loop是如何实现的ANA 最核心的交互体验是大纲提案 → 用户审核/修改 → 按批准章节写作。这条链路横跨 Agent 与前端两端Agent 端outline_writer工具基于已收集的sources生成结构化的 JSON 提案格式见PROPOSAL_FORMAT每个section含title、description、approved标记写入state[proposal]后主图路由到process_feedback_node该节点调用interrupt(state.get(proposal, {}))将图执行挂起等待前端返回。用户提交后节点解析返回的reviewed_outline只把approved True的章节写入outline状态同时追加一条 SystemMessage 告知 LLM用户已审核提案请据此处理反馈再回到call_model_node继续执行——若用户提出了修改意见模型会再次调用outline_writer重写提案。前端端page.tsx 通过useLangGraphInterrupt钩子监听中断事件渲染StructureProposalViewer组件用户确认/修改后调用resolve把{...proposal, approved}序列化回传给 Agent。从源码可以推断这套机制把模型自动生成与人类决策清晰地切分为两个阶段模型负责起草与迭代用户负责在关键节点把关从而避免生成方向性错误的内容这正是 Agent Native 应用区别于纯自动 Agent 的价值所在。深度解析四个工具的职责与状态流Agent 端 tools 目录下的四个工具对应研究工作流的四个阶段1. tavily_search多路并行搜索tavily_search.py 采用多子查询设计TavilySearchInput接收一组可独立回答的sub_queries每个子查询还带topicgeneral或news、days新闻回溯天数与domains限定可信域名参数。搜索时先向state[logs]追加 Searching the web日志并推送给前端然后通过asyncio.gather并发执行全部子查询结果按score 0.45过滤去重后合并进state[sources]并随 ToolMessage 返回给模型。注意它会在查询词后拼接当前月份%m-%Y以保证优先拿到最新资料。2. tavily_extract深度抽取页面正文tavily_extract.py 接收 URL 列表调用 Tavily 的extract接口抓取raw_content回填到state[sources][url][raw_content]供后续大纲与章节写作使用同时追加 Extracting additional content日志。3. outline_writer生成可审核的章节提案outline_writer.py 用json5解析模型输出以PROPOSAL_FORMAT作为单一事实来源定义提案结构sections下每个章节含title、description、approved并强制校验PROPOSAL_KEYS完整性。它还会读取现有proposal若存在则把已批准章节与未批准章节分别拼接进提示词指导模型保留用户批准的章节、按 remarks 修改、未提及的未批准章节则省略从而支持多轮迭代。生成的提案会附加timestamp、approved: False、remarks用户反馈字段。4. section_writer流式分节写作与局部修订section_writer.py 是产出最终报告的工具有两个关键设计流式中间状态通过copilotkit_customize_config注册emit_intermediate_state把WriteSection工具的content与footer参数映射为section_stream.content.{idx}.{section_id}.{section_title}这样的动态 state key前端据此实现章节内容的实时流式渲染对应 useStreamingContent.ts 钩子新增与修订双模式若章节idx尚不存在则走全新写作提示词要求输出完整 Markdown支持标题、列表、引用、代码块、表格、LaTeX 公式以及[^1]脚注并强制将参考文献写入 footer 字段而非正文若章节已存在则走修订模式提示词只按用户最新请求定位并修改对应位置其余内容保持不变。前端如何呈现 Agent 的思考过程ANA 前端把 Agent 的中间状态变成了可视化的研究画布主要通过两个 React 钩子实现useCoAgentStateRenderpage.tsx监听名为agent的 Agent 状态只要state.logs非空就渲染Progress进度组件把搜索中 / 思考大纲 / 写作章节等日志实时展示给用户页面每次发起新研究前会先清空 logs。useLangGraphInterrupt如上文所述负责渲染大纲审核弹层并把结果回传。页面主体由Chat左侧对话宽度 30%50% 可拖拽调节与DocumentsView右侧文档视图展示已写章节、流式写作中的章节、选中章节详情组成SourcesModal则聚合展示所有来源链接。整套 UI 依赖 copilotkit/react-core 的1.5.20版本见 package.json组件体系基于 shadcn/uicomponents.json与 Radix UI。结语与进一步探索open-research-ANA展示了一条可复制的 Agent Native 应用开发路径用 LangGraph 编排可中断的工作流用 Tavily 补足实时信息用 CopilotKit 把中间状态变成可交互的界面。你可以参考同目录下的 start 骨架版本从空白的 Agent 与前端逐步实现这套流程体会每个环节的接入点也可以深入 graph.py 与tools/目录把大纲审核、分节写作、来源管理这些模式迁移到你自己的研究、写作或报告类产品中。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 CopilotKit 实战：基于 LangGraph + Tavily 构建带人工在环（Human-in-the-Loop）的研究画布应用 ANA
CopilotKit 实战基于 LangGraph Tavily 构建带人工在环Human-in-the-Loop的研究画布应用 ANA【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit导读本篇文章以 CopilotKit 仓库中的open-research-ANA演示项目位于 examples/showcases/research-canvas/final为核心讲解如何将 LangGraph 状态机、Tavily 实时搜索与 CopilotKit 的 Agent Native 前端结合起来构建一款支持人工审核大纲 → 分节写作 → 实时进度展示的交互式研究画布应用。读完本文你将掌握从 LangGraph Agent 到 Next.js 前端的完整搭建链路、interrupt人工在环机制的实现原理以及 CopilotKit 状态渲染与流式输出 API 的实际用法。项目概览什么是 ANAAgent Native Applicationopen-research-ANA是一个研究画布Research Canvas演示应用README 将其定位为ANAAgent Native Application应用不再是单纯的聊天框而是把 Agent 的中间状态搜索进度、大纲提案、章节草稿直接渲染到页面上的一个结构化工作区。其核心能力组合如下Tavily 实时搜索为 Agent 提供真实的联网检索与页面内容抽取能力LangGraph 工作流编排搜索 → 提大纲 → 人工审核 → 分节写作的状态机流程CopilotKit Agent 界面负责 Agent 与前端的通信、状态渲染、中断interrupt处理与流式章节输出。项目目录中同时保留了start/起始骨架与final/完整实现两份副本final即本文讲解的成品。Agent 端为 PythonLangGraph CopilotKit Python SDK前端为 Next.jsReact CopilotKit React SDK两者通过 CopilotKit Runtime 桥接。整体架构Agent 与前端如何协同从代码结构看项目由两个相对独立的部分组成Agent 端examples/showcases/research-canvas/final/agent包含状态定义 state.py、模型配置 config.py、工作流图 graph.py以及tools/下的四个工具tavily_search、tavily_extract、outline_writer、section_writer。前端examples/showcases/research-canvas/final/frontendNext.js 15 应用页面通过 page.tsx 组织成左侧聊天 右侧文档视图的可拖拽分栏布局核心组件包括Chat、DocumentsView、StructureProposalViewer、Progress、SourcesModal等。前后端之间由 Next.js API 路由 route.ts 承接它使用copilotkit/runtime的CopilotRuntime与langGraphPlatformEndpoint指向 LangGraph 平台部署的agent描述为 Research assistant同时用OpenAIAdapter连接 OpenAI 服务。Agent 工作流的三节点设计graph.py 中的ResearchAgent类把研究流程建模为一张三个节点的状态图call_model_node入口与终点节点。动态构建 System Prompt调用绑定工具的 LLM若模型决定调用工具则跳转tool_node否则结束图执行__end__tool_node自定义异步工具节点。依次执行模型选择的工具把工具返回的新状态通过copilotkit_emit_state推送给前端其中review_proposal工具是特殊路由——命中它即跳转process_feedback_nodeprocess_feedback_node人工在环节点。调用interrupt(state.get(proposal, {}))挂起图的执行等待用户在前端审核大纲后返回结果。图的边定义非常简洁call_model_node是入口同时也是出口set_finish_pointtool_node与process_feedback_node执行完都回到call_model_node形成循环直到模型不再调用工具为止。状态的集中管理ResearchStatestate.py 中ResearchState继承自CopilotKitState后者扩展了 LangGraph 的MessagesState额外声明了研究任务所需的全部字段title报告标题proposal写作前提交给用户审核的提议结构含各章节的 title / description / approved 标记outline用户审核通过后的最终大纲sections已写好的章节列表每项含title、content、idxfootnotes与sources参考文献与来源数据URL 到来源对象的映射tool当前正在执行的工具名logs推送给前端展示的进度日志列表每项含message与done状态。所有关键中间产物都沉淀在状态里工具通过读写state实现数据共享这也是 Agent Native 界面能实时渲染搜索进度、大纲提案、章节草稿的数据基础。快速启动从零跑通 ANA以下是 README 给出的标准启动流程分为 Agent 与前端两大部分。1. 环境准备Prerequisites项目依赖以下工具pnpm 指定packageManager: pnpm10.2.1DockerLangGraph 本地开发服务依赖容器运行LangGraph CLI用于启动本地 Agent 服务Agent 端 requirements.txt 固定了langgraph-cli0.1.71。2. 需要准备的 API Key在本地运行时需要以下四组密钥分别配置在 Agent 与前端两个.env文件中OpenAI驱动 LLM 推理Agent 端模型配置见 config.py主流程使用gpt-4o-mini、温度 0.0大纲写作等任务用gpt-4/gpt-4o-miniTavily实时搜索与网页内容抽取LangSmithLangGraph 平台的追踪与链路观测CopilotKit云端 Dashboard 提供的NEXT_PUBLIC_COPILOT_CLOUD_API_KEY用于前端与 Agent 的安全通信。3. 启动 Agentcd agent # Create and populate .env cat EOF .env OPENAI_API_KEYyour_key TAVILY_API_KEYyour_key LANGSMITH_API_KEYyour_key EOF ## Start the agent langgraph up # Note the API URL from the output (e.g., http://localhost:8123)langgraph up会读取 langgraph.json其声明了图的入口agent: ./graph.py:graph即graph ResearchAgent().graph编译产物、Python 版本3.12与依赖声明dependencies: [.]。启动后请记录输出的 API URL默认形如http://localhost:8123后续隧道命令与前端环境变量会用到它。4. 为本地 Agent 打开隧道npx copilotkitlatest dev --port 8123这条命令通过 CopilotKit CLI 把本地 8123 端口的 LangGraph Agent 暴露为隧道地址供 CopilotKit Cloud 与前端连接本地开发模式下由DEPLOYMENTlocal与LOCAL_DEPLOYMENT_URL环境变量控制见 package.json 的dev脚本与 route.ts 中的部署地址选择逻辑。5. 启动前端cd frontend pnpm install # Create and populate .env cat EOF .env OPENAI_API_KEYyour_openai_key LANGSMITH_API_KEYyour_langsmith_key NEXT_PUBLIC_COPILOT_CLOUD_API_KEYyour_copilot_cloud_key EOF # Start the app pnpm run devpnpm run dev实际执行DEPLOYMENTlocal next dev。若你的 Agent 部署在 LangGraph Cloud 而非本地可改用remote-lgc-dev即DEPLOYMENTremote next dev此时 route.ts 会改用DEPLOYMENT_URL指向远程部署。深度解析人工在环Human-in-the-Loop是如何实现的ANA 最核心的交互体验是大纲提案 → 用户审核/修改 → 按批准章节写作。这条链路横跨 Agent 与前端两端Agent 端outline_writer工具基于已收集的sources生成结构化的 JSON 提案格式见PROPOSAL_FORMAT每个section含title、description、approved标记写入state[proposal]后主图路由到process_feedback_node该节点调用interrupt(state.get(proposal, {}))将图执行挂起等待前端返回。用户提交后节点解析返回的reviewed_outline只把approved True的章节写入outline状态同时追加一条 SystemMessage 告知 LLM用户已审核提案请据此处理反馈再回到call_model_node继续执行——若用户提出了修改意见模型会再次调用outline_writer重写提案。前端端page.tsx 通过useLangGraphInterrupt钩子监听中断事件渲染StructureProposalViewer组件用户确认/修改后调用resolve把{...proposal, approved}序列化回传给 Agent。从源码可以推断这套机制把模型自动生成与人类决策清晰地切分为两个阶段模型负责起草与迭代用户负责在关键节点把关从而避免生成方向性错误的内容这正是 Agent Native 应用区别于纯自动 Agent 的价值所在。深度解析四个工具的职责与状态流Agent 端 tools 目录下的四个工具对应研究工作流的四个阶段1. tavily_search多路并行搜索tavily_search.py 采用多子查询设计TavilySearchInput接收一组可独立回答的sub_queries每个子查询还带topicgeneral或news、days新闻回溯天数与domains限定可信域名参数。搜索时先向state[logs]追加 Searching the web日志并推送给前端然后通过asyncio.gather并发执行全部子查询结果按score 0.45过滤去重后合并进state[sources]并随 ToolMessage 返回给模型。注意它会在查询词后拼接当前月份%m-%Y以保证优先拿到最新资料。2. tavily_extract深度抽取页面正文tavily_extract.py 接收 URL 列表调用 Tavily 的extract接口抓取raw_content回填到state[sources][url][raw_content]供后续大纲与章节写作使用同时追加 Extracting additional content日志。3. outline_writer生成可审核的章节提案outline_writer.py 用json5解析模型输出以PROPOSAL_FORMAT作为单一事实来源定义提案结构sections下每个章节含title、description、approved并强制校验PROPOSAL_KEYS完整性。它还会读取现有proposal若存在则把已批准章节与未批准章节分别拼接进提示词指导模型保留用户批准的章节、按 remarks 修改、未提及的未批准章节则省略从而支持多轮迭代。生成的提案会附加timestamp、approved: False、remarks用户反馈字段。4. section_writer流式分节写作与局部修订section_writer.py 是产出最终报告的工具有两个关键设计流式中间状态通过copilotkit_customize_config注册emit_intermediate_state把WriteSection工具的content与footer参数映射为section_stream.content.{idx}.{section_id}.{section_title}这样的动态 state key前端据此实现章节内容的实时流式渲染对应 useStreamingContent.ts 钩子新增与修订双模式若章节idx尚不存在则走全新写作提示词要求输出完整 Markdown支持标题、列表、引用、代码块、表格、LaTeX 公式以及[^1]脚注并强制将参考文献写入 footer 字段而非正文若章节已存在则走修订模式提示词只按用户最新请求定位并修改对应位置其余内容保持不变。前端如何呈现 Agent 的思考过程ANA 前端把 Agent 的中间状态变成了可视化的研究画布主要通过两个 React 钩子实现useCoAgentStateRenderpage.tsx监听名为agent的 Agent 状态只要state.logs非空就渲染Progress进度组件把搜索中 / 思考大纲 / 写作章节等日志实时展示给用户页面每次发起新研究前会先清空 logs。useLangGraphInterrupt如上文所述负责渲染大纲审核弹层并把结果回传。页面主体由Chat左侧对话宽度 30%50% 可拖拽调节与DocumentsView右侧文档视图展示已写章节、流式写作中的章节、选中章节详情组成SourcesModal则聚合展示所有来源链接。整套 UI 依赖 copilotkit/react-core 的1.5.20版本见 package.json组件体系基于 shadcn/uicomponents.json与 Radix UI。结语与进一步探索open-research-ANA展示了一条可复制的 Agent Native 应用开发路径用 LangGraph 编排可中断的工作流用 Tavily 补足实时信息用 CopilotKit 把中间状态变成可交互的界面。你可以参考同目录下的 start 骨架版本从空白的 Agent 与前端逐步实现这套流程体会每个环节的接入点也可以深入 graph.py 与tools/目录把大纲审核、分节写作、来源管理这些模式迁移到你自己的研究、写作或报告类产品中。【免费下载链接】CopilotKitThe Frontend Stack for Agents Generative UI. React, Angular, Mobile, Slack, and more. Makers of the AG-UI Protocol项目地址: https://gitcode.com/GitHub_Trending/co/CopilotKit创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考