Tambo 生成式 UI 组件体系全解析Generative 与 Interactable 组件的注册、渲染与双向更新原理【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai本文基于 plugins/tambo/skills/generative-ui/references/components.md 展开全面讲解 TamboGenerative UI SDK for React中的两大类组件——由 AI 按需生成的Generative Components与预先放置在 UI 中、AI 可实时更新的Interactable Components。你将掌握TamboProvider组件注册、propsSchema声明、ComponentRenderer渲染、withTamboInteractable封装以及这些能力在tambo-ai/react源码中的底层实现机制从而在自己的 React 应用中构建出自然语言驱动的交互界面。组件体系总览两种组件两种职责Tambo 的组件体系由两种互补的组件类型构成它们回答同一个问题的两个不同侧面AI 应该在哪里创建 UI又在哪里修改 UI维度Generative生成式Interactable可交互式创建方式AI 按需创建开发者预先放置生命周期一次性渲染跨会话持久存在Props生成一次AI 可以反复更新典型场景聊天回复、仪表盘卡片设置面板、表单、任务看板Generative Components组件本身不预先出现在页面中AI 根据用户消息动态选择注册表中的组件并生成 props 完成渲染适用于回答中带出可视化结果的场景Interactable Components组件早已存在于你的 UI 中例如一张便签、一个任务卡片AI 通过工具调用观察其当前 props 并用自然语言指令更新它们适用于让 AI 帮你操作已有界面的场景。下面的 SKILL.md 将 generative-ui 技能定位为从自然语言创建丰富的、可交互的 React 组件而组件正是这一能力的核心载体。两者可以并存同一个应用中聊天区用 Generative 组件渲染 AI 生成的答案设置区用 Interactable 组件让 AI 替你改配置。快速上手一次注册两种能力在应用最外层通过TamboProvider传入components数组即可完成注册// Generative: AI creates when needed const components: TamboComponent[] [ { name: WeatherCard, component: WeatherCard, description: Shows weather. Use when user asks about weather., propsSchema: z.object({ city: z.string(), temp: z.number() }), }, ]; TamboProvider components{components} App / /TamboProvider;这段代码背后有一个关键信息TamboProvider会把components中的每一项注册进组件注册表registryAI 在生成回复时可以看到注册表里每个组件的名称、描述与 propsSchema从而决定何时使用哪个组件、传入什么 props。从源码看这一注册表由 tambo-registry-provider.tsx 维护componentList以组件名为键存放注册项并提供registerComponent、registerTool、registerMcpServer等能力是整套 SDK 的中心枢纽。Generative Components让 AI 按需生成 UIGenerative 组件是按需创建的AI 在对话流中根据用户的请求从注册表中挑选组件并生成 props。一个完整示例import { TamboProvider, TamboComponent } from tambo-ai/react; import { z } from zod; const WeatherCardSchema z.object({ city: z.string().describe(City name), temperature: z.number().describe(Temperature in Celsius), condition: z.string().describe(Weather condition), }); const components: TamboComponent[] [ { name: WeatherCard, component: WeatherCard, description: Displays weather for a city. Use when user asks about weather., propsSchema: WeatherCardSchema, }, ]; TamboProvider apiKey{apiKey} components{components} App / /TamboProvider;注册表条目Registry Entry的四个要素一个合法的注册条目需要四个字段对应 v1/types/component.ts 中TamboComponent接口的定义name组件唯一标识AI 依据它来引用组件component实际的 React 组件ComponentTypeany负责接收 props 并渲染description面向 AI 的使用说明书告诉模型这个组件是做什么的、什么情况下应该调用它。SKILL.md 强调 description 要尽量具体甚至可以写明触发短语propsSchema描述 props 结构的 Zod 对象AI 据此生成合法的 props。AvailableComponent还支持可选的stateSchema与initialState工厂函数用于声明组件内部状态。propsSchema 的约束在 SKILL.md 中schema 有两条硬性约束违反会在运行时被 Tambo 拒绝禁止z.record()动态键对象Record 类型在 schema 的任何位置都不被支持包括嵌套在数组或对象内部。请改用带显式命名键的z.object()禁止z.map()与z.set()用数组和对象替代。表格数据应写成z.array(z.object({ col1: z.string(), col2: z.number() }))而非z.array(z.record(z.string(), z.unknown()))。此外给每个字段加上.describe()描述是必须的——这是 AI 理解每个 prop 含义的唯一途径例如city: z.string().describe(City name)。流式渲染的四个要点Generative 组件由 AI 实时生成props 并非一次性完整到达propsSchemaZod 对象每个字段都要.describe()description告诉 AI 何时使用该组件是触发逻辑的关键流式Streamingprops 一开始为undefined会随 token 逐个字段到达因此字段要声明为 optional 或做好空值处理类型推导用z.infertypeof Schema得到 TypeScript 下的 props 类型保证组件内部类型安全。在生成组件时还有一个被 SKILL.md 强调的 React 最佳实践渲染列表.map()时务必提供稳定的key建议在 schema 中为数组元素声明id字段z.string().describe(Unique identifier)避免使用数组索引作为 key。使用 ComponentRenderer 渲染 AI 生成的组件注册只是第一步真正把 AI 生成的组件内容块渲染出来的是ComponentRenderer。它通常在消息列表的渲染逻辑中使用import { ComponentRenderer } from tambo-ai/react; function Message({ message, threadId, }: { message: TamboThreadMessage; threadId: string; }) { return ( div {message.content.map((block) { switch (block.type) { case text: return p key{${message.id}:text}{block.text}/p; case component: return ( ComponentRenderer key{block.id} content{block} threadId{threadId} messageId{message.id} / ); default: return null; } })} /div ); }消息内容块TamboThreadMessage.content是一个数组元素可能是text、component等类型。对于component类型的块用ComponentRenderer渲染并传入content、threadId、messageIdkey使用block.id保持组件身份稳定。ComponentRenderer 的源码工作原理查看 v1/components/v1-component-renderer.tsx 的实现可以还原它内部的四条流水线查表通过getComponentFromRegistry(content.name, registry.componentList)从注册表取出已注册的组件定义解析宽容对content.props做JSON.stringify后用partial-json解析——这正是为了兼容流式传输中props 尚未完整的中间状态解析出部分字段也不至于崩溃校验若注册组件带 schema通过 Standard Schema 的validate(parsedProps)校验校验失败时记录console.warn但仍然用原始 props 渲染保证界面不会因为一次校验失败而白屏异步校验返回 Promise不被支持会跳过校验渲染与上下文注入用React.createElement创建元素并用ComponentContentProvider包裹使得组件内部可以使用useTamboComponentState等钩子访问组件上下文。它的注释还阐明了一个重要设计只要key稳定ComponentRenderer就依赖 React 常规 reconciliation 保持组件实例不变——这对后面要讲到的组件状态持久化至关重要。另外它还支持fallbackprop当注册表中找不到组件时渲染兜底 UI。Interactable Components让 AI 观察并更新已有 UI与 Generative 组件不同Interactable 组件预先放在你的 UI 中AI 通过工具调用查看其当前 props并用自然语言指令更新它们。核心 API 是withTamboInteractable高阶组件import { withTamboInteractable } from tambo-ai/react; import { z } from zod; const NoteSchema z.object({ title: z.string().describe(Note title), content: z.string().describe(Note content), color: z.enum([white, yellow, blue]).optional(), }); function Note({ title, content, color white }: Props) { return ( div style{{ backgroundColor: color }} h3{title}/h3 p{content}/p /div ); } export const InteractableNote withTamboInteractable(Note, { componentName: Note, description: A note with editable title, content, and color, propsSchema: NoteSchema, });封装后InteractableNote与普通组件用法一致InteractableNote title我的便签 content内容 /。AI 可以随时看到这张便签当前的标题、内容和颜色并通过工具调用修改它们组件会立即反映更新。withTamboInteractable 的源码级行为阅读 with-tambo-interactable.tsx可以拆解出它的完整生命周期挂载时自动注册组件挂载后调用addInteractableComponent将componentName、description、propsSchema、stateSchema和当前 props 一并注册进TamboInteractableProvider维护的列表得到唯一的interactableId卸载时自动注销useEffect的 cleanup 中调用removeInteractableComponent避免内存泄漏与幽灵组件props 同步父组件传入的 props 变化时通过JSON.stringify比较调用updateInteractableComponentProps同步到注册表让 AI 看到的始终是最新值同时通过onPropsUpdate回调对外通知上下文注入为被包裹组件构造一个最小化的TamboThreadMessage包含 component 类型的内容块用TamboMessageProvider与ComponentContentProvider包裹使useTamboComponentState、useTamboCurrentComponent等钩子在独立组件上也能正常工作配置项扩展InteractableConfig还支持stateSchema状态更新校验和annotations工具注解默认tamboStreamableHint: true即 props/state 更新实时流式推送设为{ tamboStreamableHint: false }可关闭。Interactable 的工作机制四步闭环原文档总结的四步机制在源码中一一有对应实现自动注册Auto-registration组件挂载即注册卸载即注销开发者无需手动维护注册表上下文发送Context sending当前 props 自动对 AI 可见。源码层面tambo-interactable-provider.tsx 注册了名为get_all_interactable_components的工具AI 可以拉取所有可交互组件的 id、名称与当前 props工具注册Tool registration更新工具随组件自动注册。Provider 为每个组件注册 props 更新、state 更新等工具并维护toolComponentOwnershipRef记录工具与组件的归属关系组件卸载时自动注销其专属工具unregisterToolsForComponent双向更新Bidirectional用户手动编辑与 AI 工具调用两种更新路径并存。updateInteractableComponentProps对 props 做浅比较逐键对比无变化时直接返回原状态避免无意义重渲染有变化时执行部分更新{ ...component.props, ...newProps }即 AI 只需给出要修改的字段即可。反向路径上HOC 的 props 同步机制确保用户编辑后的新 props 也会回写注册表AI 下次读取到的就是最新状态。数据模型层面tambo-interactable.ts 定义了TamboInteractableComponent在TamboComponent基础上增加id、props、state、isSelected等实例级字段以及完整的TamboInteractableContext接口——包括setInteractableSelected将某组件标记为选中Tambo 会在下一条消息中聚焦该组件发送后自动清除、setInteractableState、clearAllInteractableComponents等能力供高级场景直接调用。何时使用哪种组件GenerativeInteractableAI 按需创建你预先放置在 UI 中一次性渲染跨会话持久Props 只生成一次AI 可以持续更新 props聊天回复、仪表盘设置、表单、任务看板选择原则可以概括为内容由 AI 决定、渲染一次就够的场景用 Generative如给我看看本周的天气生成一张天气卡片位置由你决定、需要被反复操作与持久化的场景用 Interactable如让 AI 帮你把任务看板里某张卡片的优先级改高。实际产品中二者常常组合出现聊天区是 Generative 的回复卡片页面主体是 Interactable 的可编辑面板。配套能力流式状态与渲染最佳实践Generative 组件的流式渲染与 Interactable 组件的持久状态是两套紧密配套的能力详见同一技能目录下的 component-rendering.mduseTamboStreamStatusProps()返回streamStatusisPending/isStreaming/isSuccess/isError与逐 prop 的propStatus可以据此渲染骨架屏、加载指示器或错误提示useTamboComponentState(key, initialValue, debounceTime)让组件状态对 AI 可见并跨会话持久支持setValue含 updater 函数与meta.flush立即冲刷防抖中的更新默认防抖 500ms适合用户可编辑内容、表单输入、刷新后仍需保留的状态流式最佳实践props 声明为 optional、缺失数据时显示骨架屏而非报错、使用可选链items?.map(...)、在streamStatus.isSuccess之前禁用交互。这些能力与本文的组件体系共同构成完整的生成式 UI 闭环Generative 负责生成Interactable 负责操作流式状态负责平滑。进一步阅读组件总览文档plugins/tambo/skills/generative-ui/references/components.md组件渲染与状态文档plugins/tambo/skills/generative-ui/references/component-rendering.md生成式 UI 技能总纲含注册模式、schema 约束、脚手架流程plugins/tambo/skills/generative-ui/SKILL.mdwithTamboInteractableHOC 源码react-sdk/src/hoc/with-tambo-interactable.tsxComponentRenderer源码react-sdk/src/v1/components/v1-component-renderer.tsxInteractable 运行时 Provider 源码react-sdk/src/providers/tambo-interactable-provider.tsx组件与交互数据模型react-sdk/src/model/tambo-interactable.ts、react-sdk/src/v1/types/component.ts组件注册中心实现react-sdk/src/providers/tambo-registry-provider.tsx【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Tambo 生成式 UI 组件体系全解析：Generative 与 Interactable 组件的注册、渲染与双向更新原理
Tambo 生成式 UI 组件体系全解析Generative 与 Interactable 组件的注册、渲染与双向更新原理【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai本文基于 plugins/tambo/skills/generative-ui/references/components.md 展开全面讲解 TamboGenerative UI SDK for React中的两大类组件——由 AI 按需生成的Generative Components与预先放置在 UI 中、AI 可实时更新的Interactable Components。你将掌握TamboProvider组件注册、propsSchema声明、ComponentRenderer渲染、withTamboInteractable封装以及这些能力在tambo-ai/react源码中的底层实现机制从而在自己的 React 应用中构建出自然语言驱动的交互界面。组件体系总览两种组件两种职责Tambo 的组件体系由两种互补的组件类型构成它们回答同一个问题的两个不同侧面AI 应该在哪里创建 UI又在哪里修改 UI维度Generative生成式Interactable可交互式创建方式AI 按需创建开发者预先放置生命周期一次性渲染跨会话持久存在Props生成一次AI 可以反复更新典型场景聊天回复、仪表盘卡片设置面板、表单、任务看板Generative Components组件本身不预先出现在页面中AI 根据用户消息动态选择注册表中的组件并生成 props 完成渲染适用于回答中带出可视化结果的场景Interactable Components组件早已存在于你的 UI 中例如一张便签、一个任务卡片AI 通过工具调用观察其当前 props 并用自然语言指令更新它们适用于让 AI 帮你操作已有界面的场景。下面的 SKILL.md 将 generative-ui 技能定位为从自然语言创建丰富的、可交互的 React 组件而组件正是这一能力的核心载体。两者可以并存同一个应用中聊天区用 Generative 组件渲染 AI 生成的答案设置区用 Interactable 组件让 AI 替你改配置。快速上手一次注册两种能力在应用最外层通过TamboProvider传入components数组即可完成注册// Generative: AI creates when needed const components: TamboComponent[] [ { name: WeatherCard, component: WeatherCard, description: Shows weather. Use when user asks about weather., propsSchema: z.object({ city: z.string(), temp: z.number() }), }, ]; TamboProvider components{components} App / /TamboProvider;这段代码背后有一个关键信息TamboProvider会把components中的每一项注册进组件注册表registryAI 在生成回复时可以看到注册表里每个组件的名称、描述与 propsSchema从而决定何时使用哪个组件、传入什么 props。从源码看这一注册表由 tambo-registry-provider.tsx 维护componentList以组件名为键存放注册项并提供registerComponent、registerTool、registerMcpServer等能力是整套 SDK 的中心枢纽。Generative Components让 AI 按需生成 UIGenerative 组件是按需创建的AI 在对话流中根据用户的请求从注册表中挑选组件并生成 props。一个完整示例import { TamboProvider, TamboComponent } from tambo-ai/react; import { z } from zod; const WeatherCardSchema z.object({ city: z.string().describe(City name), temperature: z.number().describe(Temperature in Celsius), condition: z.string().describe(Weather condition), }); const components: TamboComponent[] [ { name: WeatherCard, component: WeatherCard, description: Displays weather for a city. Use when user asks about weather., propsSchema: WeatherCardSchema, }, ]; TamboProvider apiKey{apiKey} components{components} App / /TamboProvider;注册表条目Registry Entry的四个要素一个合法的注册条目需要四个字段对应 v1/types/component.ts 中TamboComponent接口的定义name组件唯一标识AI 依据它来引用组件component实际的 React 组件ComponentTypeany负责接收 props 并渲染description面向 AI 的使用说明书告诉模型这个组件是做什么的、什么情况下应该调用它。SKILL.md 强调 description 要尽量具体甚至可以写明触发短语propsSchema描述 props 结构的 Zod 对象AI 据此生成合法的 props。AvailableComponent还支持可选的stateSchema与initialState工厂函数用于声明组件内部状态。propsSchema 的约束在 SKILL.md 中schema 有两条硬性约束违反会在运行时被 Tambo 拒绝禁止z.record()动态键对象Record 类型在 schema 的任何位置都不被支持包括嵌套在数组或对象内部。请改用带显式命名键的z.object()禁止z.map()与z.set()用数组和对象替代。表格数据应写成z.array(z.object({ col1: z.string(), col2: z.number() }))而非z.array(z.record(z.string(), z.unknown()))。此外给每个字段加上.describe()描述是必须的——这是 AI 理解每个 prop 含义的唯一途径例如city: z.string().describe(City name)。流式渲染的四个要点Generative 组件由 AI 实时生成props 并非一次性完整到达propsSchemaZod 对象每个字段都要.describe()description告诉 AI 何时使用该组件是触发逻辑的关键流式Streamingprops 一开始为undefined会随 token 逐个字段到达因此字段要声明为 optional 或做好空值处理类型推导用z.infertypeof Schema得到 TypeScript 下的 props 类型保证组件内部类型安全。在生成组件时还有一个被 SKILL.md 强调的 React 最佳实践渲染列表.map()时务必提供稳定的key建议在 schema 中为数组元素声明id字段z.string().describe(Unique identifier)避免使用数组索引作为 key。使用 ComponentRenderer 渲染 AI 生成的组件注册只是第一步真正把 AI 生成的组件内容块渲染出来的是ComponentRenderer。它通常在消息列表的渲染逻辑中使用import { ComponentRenderer } from tambo-ai/react; function Message({ message, threadId, }: { message: TamboThreadMessage; threadId: string; }) { return ( div {message.content.map((block) { switch (block.type) { case text: return p key{${message.id}:text}{block.text}/p; case component: return ( ComponentRenderer key{block.id} content{block} threadId{threadId} messageId{message.id} / ); default: return null; } })} /div ); }消息内容块TamboThreadMessage.content是一个数组元素可能是text、component等类型。对于component类型的块用ComponentRenderer渲染并传入content、threadId、messageIdkey使用block.id保持组件身份稳定。ComponentRenderer 的源码工作原理查看 v1/components/v1-component-renderer.tsx 的实现可以还原它内部的四条流水线查表通过getComponentFromRegistry(content.name, registry.componentList)从注册表取出已注册的组件定义解析宽容对content.props做JSON.stringify后用partial-json解析——这正是为了兼容流式传输中props 尚未完整的中间状态解析出部分字段也不至于崩溃校验若注册组件带 schema通过 Standard Schema 的validate(parsedProps)校验校验失败时记录console.warn但仍然用原始 props 渲染保证界面不会因为一次校验失败而白屏异步校验返回 Promise不被支持会跳过校验渲染与上下文注入用React.createElement创建元素并用ComponentContentProvider包裹使得组件内部可以使用useTamboComponentState等钩子访问组件上下文。它的注释还阐明了一个重要设计只要key稳定ComponentRenderer就依赖 React 常规 reconciliation 保持组件实例不变——这对后面要讲到的组件状态持久化至关重要。另外它还支持fallbackprop当注册表中找不到组件时渲染兜底 UI。Interactable Components让 AI 观察并更新已有 UI与 Generative 组件不同Interactable 组件预先放在你的 UI 中AI 通过工具调用查看其当前 props并用自然语言指令更新它们。核心 API 是withTamboInteractable高阶组件import { withTamboInteractable } from tambo-ai/react; import { z } from zod; const NoteSchema z.object({ title: z.string().describe(Note title), content: z.string().describe(Note content), color: z.enum([white, yellow, blue]).optional(), }); function Note({ title, content, color white }: Props) { return ( div style{{ backgroundColor: color }} h3{title}/h3 p{content}/p /div ); } export const InteractableNote withTamboInteractable(Note, { componentName: Note, description: A note with editable title, content, and color, propsSchema: NoteSchema, });封装后InteractableNote与普通组件用法一致InteractableNote title我的便签 content内容 /。AI 可以随时看到这张便签当前的标题、内容和颜色并通过工具调用修改它们组件会立即反映更新。withTamboInteractable 的源码级行为阅读 with-tambo-interactable.tsx可以拆解出它的完整生命周期挂载时自动注册组件挂载后调用addInteractableComponent将componentName、description、propsSchema、stateSchema和当前 props 一并注册进TamboInteractableProvider维护的列表得到唯一的interactableId卸载时自动注销useEffect的 cleanup 中调用removeInteractableComponent避免内存泄漏与幽灵组件props 同步父组件传入的 props 变化时通过JSON.stringify比较调用updateInteractableComponentProps同步到注册表让 AI 看到的始终是最新值同时通过onPropsUpdate回调对外通知上下文注入为被包裹组件构造一个最小化的TamboThreadMessage包含 component 类型的内容块用TamboMessageProvider与ComponentContentProvider包裹使useTamboComponentState、useTamboCurrentComponent等钩子在独立组件上也能正常工作配置项扩展InteractableConfig还支持stateSchema状态更新校验和annotations工具注解默认tamboStreamableHint: true即 props/state 更新实时流式推送设为{ tamboStreamableHint: false }可关闭。Interactable 的工作机制四步闭环原文档总结的四步机制在源码中一一有对应实现自动注册Auto-registration组件挂载即注册卸载即注销开发者无需手动维护注册表上下文发送Context sending当前 props 自动对 AI 可见。源码层面tambo-interactable-provider.tsx 注册了名为get_all_interactable_components的工具AI 可以拉取所有可交互组件的 id、名称与当前 props工具注册Tool registration更新工具随组件自动注册。Provider 为每个组件注册 props 更新、state 更新等工具并维护toolComponentOwnershipRef记录工具与组件的归属关系组件卸载时自动注销其专属工具unregisterToolsForComponent双向更新Bidirectional用户手动编辑与 AI 工具调用两种更新路径并存。updateInteractableComponentProps对 props 做浅比较逐键对比无变化时直接返回原状态避免无意义重渲染有变化时执行部分更新{ ...component.props, ...newProps }即 AI 只需给出要修改的字段即可。反向路径上HOC 的 props 同步机制确保用户编辑后的新 props 也会回写注册表AI 下次读取到的就是最新状态。数据模型层面tambo-interactable.ts 定义了TamboInteractableComponent在TamboComponent基础上增加id、props、state、isSelected等实例级字段以及完整的TamboInteractableContext接口——包括setInteractableSelected将某组件标记为选中Tambo 会在下一条消息中聚焦该组件发送后自动清除、setInteractableState、clearAllInteractableComponents等能力供高级场景直接调用。何时使用哪种组件GenerativeInteractableAI 按需创建你预先放置在 UI 中一次性渲染跨会话持久Props 只生成一次AI 可以持续更新 props聊天回复、仪表盘设置、表单、任务看板选择原则可以概括为内容由 AI 决定、渲染一次就够的场景用 Generative如给我看看本周的天气生成一张天气卡片位置由你决定、需要被反复操作与持久化的场景用 Interactable如让 AI 帮你把任务看板里某张卡片的优先级改高。实际产品中二者常常组合出现聊天区是 Generative 的回复卡片页面主体是 Interactable 的可编辑面板。配套能力流式状态与渲染最佳实践Generative 组件的流式渲染与 Interactable 组件的持久状态是两套紧密配套的能力详见同一技能目录下的 component-rendering.mduseTamboStreamStatusProps()返回streamStatusisPending/isStreaming/isSuccess/isError与逐 prop 的propStatus可以据此渲染骨架屏、加载指示器或错误提示useTamboComponentState(key, initialValue, debounceTime)让组件状态对 AI 可见并跨会话持久支持setValue含 updater 函数与meta.flush立即冲刷防抖中的更新默认防抖 500ms适合用户可编辑内容、表单输入、刷新后仍需保留的状态流式最佳实践props 声明为 optional、缺失数据时显示骨架屏而非报错、使用可选链items?.map(...)、在streamStatus.isSuccess之前禁用交互。这些能力与本文的组件体系共同构成完整的生成式 UI 闭环Generative 负责生成Interactable 负责操作流式状态负责平滑。进一步阅读组件总览文档plugins/tambo/skills/generative-ui/references/components.md组件渲染与状态文档plugins/tambo/skills/generative-ui/references/component-rendering.md生成式 UI 技能总纲含注册模式、schema 约束、脚手架流程plugins/tambo/skills/generative-ui/SKILL.mdwithTamboInteractableHOC 源码react-sdk/src/hoc/with-tambo-interactable.tsxComponentRenderer源码react-sdk/src/v1/components/v1-component-renderer.tsxInteractable 运行时 Provider 源码react-sdk/src/providers/tambo-interactable-provider.tsx组件与交互数据模型react-sdk/src/model/tambo-interactable.ts、react-sdk/src/v1/types/component.ts组件注册中心实现react-sdk/src/providers/tambo-registry-provider.tsx【免费下载链接】hydra-aiGenerative UI SDK for React项目地址: https://gitcode.com/GitHub_Trending/hy/hydra-ai创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考