CopilotKit 工具调用默认渲染Default Catch-all实战指南基于 Langroid 的零配置内置卡片方案【免费下载链接】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导读本指南以 Langroid 集成示例中的tool-rendering-default-catchall演示QA 文档位于 showcase/integrations/langroid/qa/tool-rendering-default-catchall.md为核心系统讲解 CopilotKit 前端工具调用渲染体系中最简单的一种形态零配置调用useDefaultRenderTool()让所有工具调用统一走包内置的DefaultToolCallRenderer卡片。读完本文你将掌握内置默认卡片的工作原理、*通配符注册与useRenderToolCall匹配优先级、状态机与展开式 Arguments/Result 面板的实现细节并能以此为基准设计自己的自定义兜底渲染器。一、背景CopilotKit 工具渲染的三种形态在 CopilotKit 的 React v2 体系中工具调用tool call的 UI 渲染存在一条从定制到通用的演进路径。以 Langroid 集成为例showcase/integrations/langroid/qa/目录下同时提供了三份对照 QA 文档形态QA 文档渲染方式按工具定制渲染tool-rendering.md通过useRenderTool({ name: ... })为每个工具注册专属卡片如 WeatherCard含主题色、图标、多字段展示自定义通配兜底tool-rendering-custom-catchall.mduseDefaultRenderTool({ render: CustomCatchallRenderer })所有工具统一走同一个品牌化卡片内置默认兜底本文tool-rendering-default-catchall.mduseDefaultRenderTool()无参数调用全部走包内置DefaultToolCallRenderer本文聚焦第三种——它是整个体系中接入成本最低的形态适合快速验证工具链路是否打通也适合作为自定义渲染器之前的降级基线。二、前置条件与运行环境在执行本文的验证步骤之前需要确认以下前提对应 QA 文档 PrerequisitesDemo 已部署且可访问Langroid 集成应用已启动启动方式参考 showcase/integrations/langroid/README.md 与根目录 README.mdAgent 后端健康通过/api/health检查后端状态Agent slug 已注册tool-rendering-default-catchall这一 agent 标识必须在/api/copilotkit路由下注册其注册逻辑位于 showcase/integrations/langroid/src/app/api/copilotkit/route.ts。环境前提该示例基于 Next.js 与 React v2 APIcopilotkit/react-core/v2使用 Langroid 作为 Python 侧 Agent 后端。从源码结构看后端暴露了一组 mock 工具get_weather、search_flights、get_stock_price、roll_dice等前端仅做渲染展示无需真实外部 API。三、核心概念useDefaultRenderTool()与*通配符3.1 零配置调用的本质useDefaultRenderTool是 CopilotKit 提供给前端应用的兜底渲染入口。它本质上是对useRenderTool的一层封装固定以通配符名称*注册渲染器。其实现位于 packages/react-core/src/v2/hooks/use-default-render-tool.tsxexport function useDefaultRenderTool( config?: { render?: (props: DefaultRenderProps) React.ReactElement | null; }, deps?: ReadonlyArrayunknown, ): void { const userRender config?.render; const registered: (props: RawRendererProps) React.ReactElement | null userRender ? (raw) userRender(adaptRendererProps(raw)) : (raw) DefaultToolCallRenderer {...adaptRendererProps(raw)} /; useRenderTool( { name: *, render: registered as unknown as (props: unknown) React.ReactElement, }, deps, ); }关键结论不传config时注册的渲染器是包内置的DefaultToolCallRenderer——这就是默认兜底名称的由来传入config.render时自定义渲染函数会被包装用于替换内置卡片对应tool-rendering-custom-catchall演示deps参数可在渲染函数依赖变化时刷新注册如紧凑模式开关示例代码注释中给出了useDefaultRenderTool({ render }, [compactMode])的用法。3.2 为什么必须显式注册兜底这是最容易踩坑的一点。在 packages/react-core/src/v2/hooks/use-render-tool-call.tsx 中useRenderToolCall的匹配优先级为按工具名精确匹配存在多个同名渲染器时优先 agentId 匹配者再按无 agentId、注册顺序兜底命中*通配符渲染器都没有则返回null——工具调用在界面上完全不可见。源码中的注释明确说明了这一设计动机Auto-painting a default card here would leak internal tool names plus raw args/result JSON into every apps chat in production, so the card must be explicitly enabled.即生产环境下自动渲染默认卡片会暴露内部工具名与原始参数/结果 JSON因此显示未处理工具调用必须是显式 opt-in行为。若未注册*渲染器开发模式下还会输出一次按工具名去重的 console 警告提示用useRenderTool({ name: ... })或useDefaultRenderTool()补上渲染器。这也是为什么 demo 页面顶部注释强调Without this hook the runtime has NO*renderer ... tool calls are invisible。四、Demo 页面实现解析Demo 页面源码位于 showcase/integrations/langroid/src/app/demos/tool-rendering-default-catchall/page.tsx核心结构如下use client; import { CopilotKit, CopilotChat, useDefaultRenderTool, } from copilotkit/react-core/v2; import { useSuggestions } from ./suggestions; export default function ToolRenderingDefaultCatchallDemo() { return ( CopilotKit runtimeUrl/api/copilotkit agenttool-rendering-default-catchall div classNameflex justify-center items-center h-screen w-full div classNameh-full w-full max-w-4xl Chat / /div /div /CopilotKit ); } function Chat() { // region[default-catchall-zero-config] useDefaultRenderTool(); // endregion[default-catchall-zero-config] useSuggestions(); return ( CopilotChat agentIdtool-rendering-default-catchall classNameh-full rounded-2xl / ); }需要关注的实现细节runtimeUrlagentCopilotKitProvider 声明后端运行时地址本 demo 为/api/copilotkit与默认 agent 名tool-rendering-default-catchalluseDefaultRenderTool()位于Chat组件内、CopilotChat渲染之前调用注册内置兜底卡片代码中以region[default-catchall-zero-config]标记便于文档生成工具提取布局h-screenmax-w-4xlrounded-2xl构成了 QA 文档描述的居中全高、最大宽度 4xl、圆角 2xl的聊天界面建议词useSuggestions()提供三枚建议 pillWeather in SF、Find flights、Weather in Tokyo对应演示中的快捷点击路径。五、内置DefaultToolCallRenderer的 UI 细节与状态机内置卡片的完整实现同样在 packages/react-core/src/v2/hooks/use-default-render-tool.tsx。它接收的DefaultRenderProps契约如下export type DefaultRenderProps { /** 被调用的工具名称 */ name: string; /** 当前工具调用的 id */ toolCallId: string; /** 解析后的工具调用参数 */ parameters: unknown; /** 工具调用当前执行状态 */ status: inProgress | executing | complete; /** 工具调用结果字符串仅当 status 为 complete 时可用 */ result: string | undefined; };5.1 状态映射Running / Done 从何而来QA 文档要求验证状态从Running过渡到Done这一映射由mapToolCallStatus完成框架内部使用ToolCallStatus枚举InProgress/Executing/Complete而对外契约使用字符串联合类型。DefaultToolCallRenderer内部进一步映射为status inProgress || status executing→ 徽标显示Running琥珀色圆点 琥珀色徽标status complete→ 徽标显示Done翠绿色圆点 翠绿色徽标。对于未知/未来的枚举值mapToolCallStatus会通过模块级Set去重仅首次遇到时打印一次 console 警告并回退到inProgress避免卡死状态每秒刷屏日志。5.2 可展开的 Arguments / Result 面板卡片头部始终展示工具名与状态徽标头部整体是一个带aria-expanded的可访问button支持键盘 Enter/Space 切换展开。展开后显示两个区块Arguments对parameters做格式化 JSON 输出safeStringifyForPre做了防御处理——遇到循环引用会降级为String()甚至[unserializable]避免整个 React 树崩溃Result仅在result ! undefined时渲染字符串直接展示对象则格式化 JSON。为便于测试与 DOM 断言卡片根节点携带了data-testidcopilot-tool-render、data-tool-name、data-tool-call-id、data-status、data-args、data-result等属性工具名与状态徽标分别有data-testidcopilot-tool-render-name与data-testidcopilot-tool-render-status。5.3 渲染器的 Props 适配useRenderToolCall内部实际以{ name, toolCallId, args, status: ToolCallStatus, result }调用注册的渲染器useDefaultRenderTool通过adaptRendererProps把框架内部的args/ 枚举状态转换为文档化的parameters/ 字符串联合状态保证自定义render函数始终看到的是对外稳定的契约。同时useRenderToolCall用React.memo的ToolCallRenderer组件包裹渲染仅在 toolCall id、工具名、参数串、结果内容、执行态、渲染函数引用发生变化时才重渲染避免父组件更新引发不必要的重绘。六、逐步验证内置默认兜底卡片以下步骤完整继承自 QA 文档 tool-rendering-default-catchall.md并补充了可观测依据。6.1 基础功能检查访问tool-rendering-default-catchalldemo 页面确认聊天界面以居中全高布局加载max-width: 4xl、rounded-2xl确认聊天输入框占位文案Type a message可见发送一条普通消息确认 Langroid agent 正常回复。6.2 建议词可见性Weather in SF 建议 pill 可见Find flights 建议 pill 可见Weather in Tokyo 建议 pill 可见。6.3get_weather走内置默认卡片点击Weather in SF确认出现一张默认工具调用卡片头部为get_weather确认状态徽标按Running → Done过渡对应inProgress/executing → complete的状态机确认页面中不存在data-testidcustom-catchall-card与data-testidweather-card——即只有内置卡片在绘制既没有自定义兜底卡片也没有针对该工具的专属 WeatherCard后两者分别对应tool-rendering-custom-catchall与tool-rendering两个演示的断言特征。6.4search_flights复用同一张内置卡片点击Find flights确认出现第二张默认卡片头部为search_flights确认状态最终落在Done。6.5 预期结果汇总没有任何按工具区分的品牌化卡片No per-tool branded cards没有任何自定义通配渲染器No custom wildcard renderer每一次工具调用都使用包提供的默认卡片Every tool call uses the package-provided default card。七、与自定义兜底形态的对照排查必读若你在验证中发现页面出现了data-testidcustom-catchall-card说明应用实际走的是自定义兜底逻辑而非内置默认卡片。两个形态的判定要点特征内置默认本文自定义通配对照文档Hook 调用useDefaultRenderTool()无参useDefaultRenderTool({ render: CustomCatchallRenderer })关键 testidcopilot-tool-render系列custom-catchall-card/custom-catchall-tool-name/custom-catchall-status状态徽标文案Running → Donestreaming / running → done默认卡片有无被自定义 render 完全替换两份对照 QA 文档位于同一目录内置默认见 tool-rendering-default-catchall.md自定义兜底见 tool-rendering-custom-catchall.md按工具专属渲染的完整用例见 tool-rendering.md。八、源码级结论与下一步关键实现文件索引内置默认渲染器与useDefaultRenderTool实现packages/react-core/src/v2/hooks/use-default-render-tool.tsx工具调用匹配与优先级逻辑精确匹配 →*通配 → 不可见兜底 开发警告packages/react-core/src/v2/hooks/use-render-tool-call.tsx通配符注册的底层 Hook含agentId作用域packages/react-core/src/v2/hooks/use-render-tool.tsx由use-default-render-tool.tsx内部引用Demo 页面showcase/integrations/langroid/src/app/demos/tool-rendering-default-catchall/page.tsx后端 agent 注册路由showcase/integrations/langroid/src/app/api/copilotkit/route.ts实践建议快速验证工具链路新接入工具时先用一行useDefaultRenderTool()确认后端工具调用能被前端正确接收与展示再逐工具升级为useRenderTool({ name })的专属卡片兜底与定制共存useDefaultRenderTool()注册的是*通配渲染器与精确匹配的useRenderTool渲染器互不冲突——有专属渲染器的工具走专属卡片其余工具统一落到默认卡片注意生产行为未注册任何渲染器的工具调用在界面上是静默不可见的设计上避免泄漏内部工具名与原始参数必须显式注册才能展示相关开发警告仅在生产构建以外输出。【免费下载链接】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 工具调用默认渲染（Default Catch-all）实战指南：基于 Langroid 的零配置内置卡片方案
CopilotKit 工具调用默认渲染Default Catch-all实战指南基于 Langroid 的零配置内置卡片方案【免费下载链接】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导读本指南以 Langroid 集成示例中的tool-rendering-default-catchall演示QA 文档位于 showcase/integrations/langroid/qa/tool-rendering-default-catchall.md为核心系统讲解 CopilotKit 前端工具调用渲染体系中最简单的一种形态零配置调用useDefaultRenderTool()让所有工具调用统一走包内置的DefaultToolCallRenderer卡片。读完本文你将掌握内置默认卡片的工作原理、*通配符注册与useRenderToolCall匹配优先级、状态机与展开式 Arguments/Result 面板的实现细节并能以此为基准设计自己的自定义兜底渲染器。一、背景CopilotKit 工具渲染的三种形态在 CopilotKit 的 React v2 体系中工具调用tool call的 UI 渲染存在一条从定制到通用的演进路径。以 Langroid 集成为例showcase/integrations/langroid/qa/目录下同时提供了三份对照 QA 文档形态QA 文档渲染方式按工具定制渲染tool-rendering.md通过useRenderTool({ name: ... })为每个工具注册专属卡片如 WeatherCard含主题色、图标、多字段展示自定义通配兜底tool-rendering-custom-catchall.mduseDefaultRenderTool({ render: CustomCatchallRenderer })所有工具统一走同一个品牌化卡片内置默认兜底本文tool-rendering-default-catchall.mduseDefaultRenderTool()无参数调用全部走包内置DefaultToolCallRenderer本文聚焦第三种——它是整个体系中接入成本最低的形态适合快速验证工具链路是否打通也适合作为自定义渲染器之前的降级基线。二、前置条件与运行环境在执行本文的验证步骤之前需要确认以下前提对应 QA 文档 PrerequisitesDemo 已部署且可访问Langroid 集成应用已启动启动方式参考 showcase/integrations/langroid/README.md 与根目录 README.mdAgent 后端健康通过/api/health检查后端状态Agent slug 已注册tool-rendering-default-catchall这一 agent 标识必须在/api/copilotkit路由下注册其注册逻辑位于 showcase/integrations/langroid/src/app/api/copilotkit/route.ts。环境前提该示例基于 Next.js 与 React v2 APIcopilotkit/react-core/v2使用 Langroid 作为 Python 侧 Agent 后端。从源码结构看后端暴露了一组 mock 工具get_weather、search_flights、get_stock_price、roll_dice等前端仅做渲染展示无需真实外部 API。三、核心概念useDefaultRenderTool()与*通配符3.1 零配置调用的本质useDefaultRenderTool是 CopilotKit 提供给前端应用的兜底渲染入口。它本质上是对useRenderTool的一层封装固定以通配符名称*注册渲染器。其实现位于 packages/react-core/src/v2/hooks/use-default-render-tool.tsxexport function useDefaultRenderTool( config?: { render?: (props: DefaultRenderProps) React.ReactElement | null; }, deps?: ReadonlyArrayunknown, ): void { const userRender config?.render; const registered: (props: RawRendererProps) React.ReactElement | null userRender ? (raw) userRender(adaptRendererProps(raw)) : (raw) DefaultToolCallRenderer {...adaptRendererProps(raw)} /; useRenderTool( { name: *, render: registered as unknown as (props: unknown) React.ReactElement, }, deps, ); }关键结论不传config时注册的渲染器是包内置的DefaultToolCallRenderer——这就是默认兜底名称的由来传入config.render时自定义渲染函数会被包装用于替换内置卡片对应tool-rendering-custom-catchall演示deps参数可在渲染函数依赖变化时刷新注册如紧凑模式开关示例代码注释中给出了useDefaultRenderTool({ render }, [compactMode])的用法。3.2 为什么必须显式注册兜底这是最容易踩坑的一点。在 packages/react-core/src/v2/hooks/use-render-tool-call.tsx 中useRenderToolCall的匹配优先级为按工具名精确匹配存在多个同名渲染器时优先 agentId 匹配者再按无 agentId、注册顺序兜底命中*通配符渲染器都没有则返回null——工具调用在界面上完全不可见。源码中的注释明确说明了这一设计动机Auto-painting a default card here would leak internal tool names plus raw args/result JSON into every apps chat in production, so the card must be explicitly enabled.即生产环境下自动渲染默认卡片会暴露内部工具名与原始参数/结果 JSON因此显示未处理工具调用必须是显式 opt-in行为。若未注册*渲染器开发模式下还会输出一次按工具名去重的 console 警告提示用useRenderTool({ name: ... })或useDefaultRenderTool()补上渲染器。这也是为什么 demo 页面顶部注释强调Without this hook the runtime has NO*renderer ... tool calls are invisible。四、Demo 页面实现解析Demo 页面源码位于 showcase/integrations/langroid/src/app/demos/tool-rendering-default-catchall/page.tsx核心结构如下use client; import { CopilotKit, CopilotChat, useDefaultRenderTool, } from copilotkit/react-core/v2; import { useSuggestions } from ./suggestions; export default function ToolRenderingDefaultCatchallDemo() { return ( CopilotKit runtimeUrl/api/copilotkit agenttool-rendering-default-catchall div classNameflex justify-center items-center h-screen w-full div classNameh-full w-full max-w-4xl Chat / /div /div /CopilotKit ); } function Chat() { // region[default-catchall-zero-config] useDefaultRenderTool(); // endregion[default-catchall-zero-config] useSuggestions(); return ( CopilotChat agentIdtool-rendering-default-catchall classNameh-full rounded-2xl / ); }需要关注的实现细节runtimeUrlagentCopilotKitProvider 声明后端运行时地址本 demo 为/api/copilotkit与默认 agent 名tool-rendering-default-catchalluseDefaultRenderTool()位于Chat组件内、CopilotChat渲染之前调用注册内置兜底卡片代码中以region[default-catchall-zero-config]标记便于文档生成工具提取布局h-screenmax-w-4xlrounded-2xl构成了 QA 文档描述的居中全高、最大宽度 4xl、圆角 2xl的聊天界面建议词useSuggestions()提供三枚建议 pillWeather in SF、Find flights、Weather in Tokyo对应演示中的快捷点击路径。五、内置DefaultToolCallRenderer的 UI 细节与状态机内置卡片的完整实现同样在 packages/react-core/src/v2/hooks/use-default-render-tool.tsx。它接收的DefaultRenderProps契约如下export type DefaultRenderProps { /** 被调用的工具名称 */ name: string; /** 当前工具调用的 id */ toolCallId: string; /** 解析后的工具调用参数 */ parameters: unknown; /** 工具调用当前执行状态 */ status: inProgress | executing | complete; /** 工具调用结果字符串仅当 status 为 complete 时可用 */ result: string | undefined; };5.1 状态映射Running / Done 从何而来QA 文档要求验证状态从Running过渡到Done这一映射由mapToolCallStatus完成框架内部使用ToolCallStatus枚举InProgress/Executing/Complete而对外契约使用字符串联合类型。DefaultToolCallRenderer内部进一步映射为status inProgress || status executing→ 徽标显示Running琥珀色圆点 琥珀色徽标status complete→ 徽标显示Done翠绿色圆点 翠绿色徽标。对于未知/未来的枚举值mapToolCallStatus会通过模块级Set去重仅首次遇到时打印一次 console 警告并回退到inProgress避免卡死状态每秒刷屏日志。5.2 可展开的 Arguments / Result 面板卡片头部始终展示工具名与状态徽标头部整体是一个带aria-expanded的可访问button支持键盘 Enter/Space 切换展开。展开后显示两个区块Arguments对parameters做格式化 JSON 输出safeStringifyForPre做了防御处理——遇到循环引用会降级为String()甚至[unserializable]避免整个 React 树崩溃Result仅在result ! undefined时渲染字符串直接展示对象则格式化 JSON。为便于测试与 DOM 断言卡片根节点携带了data-testidcopilot-tool-render、data-tool-name、data-tool-call-id、data-status、data-args、data-result等属性工具名与状态徽标分别有data-testidcopilot-tool-render-name与data-testidcopilot-tool-render-status。5.3 渲染器的 Props 适配useRenderToolCall内部实际以{ name, toolCallId, args, status: ToolCallStatus, result }调用注册的渲染器useDefaultRenderTool通过adaptRendererProps把框架内部的args/ 枚举状态转换为文档化的parameters/ 字符串联合状态保证自定义render函数始终看到的是对外稳定的契约。同时useRenderToolCall用React.memo的ToolCallRenderer组件包裹渲染仅在 toolCall id、工具名、参数串、结果内容、执行态、渲染函数引用发生变化时才重渲染避免父组件更新引发不必要的重绘。六、逐步验证内置默认兜底卡片以下步骤完整继承自 QA 文档 tool-rendering-default-catchall.md并补充了可观测依据。6.1 基础功能检查访问tool-rendering-default-catchalldemo 页面确认聊天界面以居中全高布局加载max-width: 4xl、rounded-2xl确认聊天输入框占位文案Type a message可见发送一条普通消息确认 Langroid agent 正常回复。6.2 建议词可见性Weather in SF 建议 pill 可见Find flights 建议 pill 可见Weather in Tokyo 建议 pill 可见。6.3get_weather走内置默认卡片点击Weather in SF确认出现一张默认工具调用卡片头部为get_weather确认状态徽标按Running → Done过渡对应inProgress/executing → complete的状态机确认页面中不存在data-testidcustom-catchall-card与data-testidweather-card——即只有内置卡片在绘制既没有自定义兜底卡片也没有针对该工具的专属 WeatherCard后两者分别对应tool-rendering-custom-catchall与tool-rendering两个演示的断言特征。6.4search_flights复用同一张内置卡片点击Find flights确认出现第二张默认卡片头部为search_flights确认状态最终落在Done。6.5 预期结果汇总没有任何按工具区分的品牌化卡片No per-tool branded cards没有任何自定义通配渲染器No custom wildcard renderer每一次工具调用都使用包提供的默认卡片Every tool call uses the package-provided default card。七、与自定义兜底形态的对照排查必读若你在验证中发现页面出现了data-testidcustom-catchall-card说明应用实际走的是自定义兜底逻辑而非内置默认卡片。两个形态的判定要点特征内置默认本文自定义通配对照文档Hook 调用useDefaultRenderTool()无参useDefaultRenderTool({ render: CustomCatchallRenderer })关键 testidcopilot-tool-render系列custom-catchall-card/custom-catchall-tool-name/custom-catchall-status状态徽标文案Running → Donestreaming / running → done默认卡片有无被自定义 render 完全替换两份对照 QA 文档位于同一目录内置默认见 tool-rendering-default-catchall.md自定义兜底见 tool-rendering-custom-catchall.md按工具专属渲染的完整用例见 tool-rendering.md。八、源码级结论与下一步关键实现文件索引内置默认渲染器与useDefaultRenderTool实现packages/react-core/src/v2/hooks/use-default-render-tool.tsx工具调用匹配与优先级逻辑精确匹配 →*通配 → 不可见兜底 开发警告packages/react-core/src/v2/hooks/use-render-tool-call.tsx通配符注册的底层 Hook含agentId作用域packages/react-core/src/v2/hooks/use-render-tool.tsx由use-default-render-tool.tsx内部引用Demo 页面showcase/integrations/langroid/src/app/demos/tool-rendering-default-catchall/page.tsx后端 agent 注册路由showcase/integrations/langroid/src/app/api/copilotkit/route.ts实践建议快速验证工具链路新接入工具时先用一行useDefaultRenderTool()确认后端工具调用能被前端正确接收与展示再逐工具升级为useRenderTool({ name })的专属卡片兜底与定制共存useDefaultRenderTool()注册的是*通配渲染器与精确匹配的useRenderTool渲染器互不冲突——有专属渲染器的工具走专属卡片其余工具统一落到默认卡片注意生产行为未注册任何渲染器的工具调用在界面上是静默不可见的设计上避免泄漏内部工具名与原始参数必须显式注册才能展示相关开发警告仅在生产构建以外输出。【免费下载链接】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），仅供参考