mcpField
C
component-rendering

component-rendering

github.com/tambo-ai开发11.2k97 次安装3 周前更新
代码仓库

关于 component-rendering

这是用于处理组件属性流式传输和跨会话持久状态的 Tambo 技能，面向需要跟踪生成进度并同步可编辑界面状态的开发者。

主要功能

  1. 01跟踪整体流状态
  2. 02跟踪各属性的流状态
  3. 03持久化组件状态
  4. 04防抖状态更新
  5. 05流式渲染建议

适用场景

  1. 01生成期间显示加载状态
  2. 02处理尚未完整的组件属性
  3. 03持久保存可编辑表单输入
  4. 04重新加载后保留 AI 可见状态

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tambo-ai/tambo --skill component-rendering

安装后在 Claude Code 中输入/component-rendering确认已加载。

详细介绍

组件渲染

处理流式属性和持久化组件状态。

快速入门

const { streamStatus, propStatus } = useTamboStreamStatus<Props>();

if (streamStatus.isPending) return <Skeleton />;
if (streamStatus.isStreaming) return <LoadingIndicator />;

流式状态

跟踪整体和各属性的流式状态：

import { useTamboStreamStatus } from "@tambo-ai/react";

function MyComponent({ title, items }: Props) {
  const { streamStatus, propStatus } = useTamboStreamStatus<Props>();

  // Global status
  if (streamStatus.isPending) return <Skeleton />;
  if (streamStatus.isStreaming) return <LoadingIndicator />;
  if (streamStatus.isError) return <Error message={streamStatus.streamError} />;

  // Per-prop status
  return (
    <h2 className={propStatus.title?.isStreaming ? "animate-pulse" : ""}>
      {title}
    </h2>
  );
}
StreamStatus 属性
PropertyDescription
isPending尚未收到任何 token
isStreaming正在进行流式传输
isSuccess所有属性均已完成，且没有错误
isError发生致命错误
streamError失败时的错误对象
PropStatus（各属性）
PropertyDescription
isPending此属性尚未收到任何 token
isStreaming属性包含部分内容
isSuccess属性已完成流式传输
error此属性的错误（如果有）

组件状态

让 AI 能够看到状态，并在会话间持久保存：

import { useTamboComponentState, useTamboStreamStatus } from "@tambo-ai/react";

function EditableCard({ title: streamedTitle }: { title?: string }) {
  const [title, setTitle, { isPending, flush }] = useTamboComponentState(
    "title",
    "",
  );
  const { streamStatus } = useTamboStreamStatus();

  return (
    <input
      value={title}
      onChange={(e) => setTitle(e.target.value)}
      disabled={streamStatus.isStreaming || isPending}
    />
  );
}
useTamboComponentState API
const [value, setValue, meta] = useTamboComponentState(
  key, // Unique state key within the component
  initialValue, // Initial value if no server state
  debounceTime, // Debounce ms (default: 500)
);
ReturnDescription
value当前状态值
setValue更新状态（支持更新函数）
meta.isPending正在与服务端同步
meta.error同步错误（如果有）
meta.flush立即刷新待处理的防抖更新
setValue 用法
// Direct value
setTitle("New title");

// Updater function
setCount((prev) => prev + 1);
何时使用组件状态
  • AI 应能看到的、可由用户编辑的内容
  • 需要持久保存的表单输入
  • 页面重新加载后仍需保留的状态
  • 生成后可由用户修改的流式属性

流式传输最佳实践

  1. 将属性设为可选（在 Zod schema 中）：

    z.object({
  title: z.string().optional().describe("Card title"),
  items: z.array(z.string()).optional(),
});

  2. 对缺失的数据显示骨架屏，而非错误提示

  3. 使用可选链：items?.map(...)

  4. 在 streamStatus.isSuccess 前禁用交互

评论

支持 Markdown