mcpField
C
component-rendering

component-rendering

github.com/tambo-aiDevelopment11.2k97 installsUpdated 3w ago
Repository

About component-rendering

A Tambo skill for handling streamed component props and state that persists across sessions. It is intended for developers who need to track generation progress and keep editable UI state synchronized with the server.

Key features

  1. 01Overall stream status tracking
  2. 02Per-prop stream status
  3. 03Persistent component state
  4. 04Debounced state updates
  5. 05Streaming-friendly rendering guidance

Use cases

  1. 01Show loading states during generation
  2. 02Handle partial component props
  3. 03Persist editable form inputs
  4. 04Keep AI-visible UI state across reloads

Install

Copy the command and run it in a terminal.

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

After installing, type/component-renderingin Claude Code to confirm it loaded.

Details

From the project README

Component Rendering

Handles streaming props and persistent component state.

Quick Start

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

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

Stream Status

Track overall and per-prop streaming status:

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 Properties
PropertyDescription
isPendingNo tokens received yet
isStreamingActive streaming in progress
isSuccessAll props finished without error
isErrorFatal error occurred
streamErrorError object if failed
PropStatus (per-prop)
PropertyDescription
isPendingNo tokens for this prop yet
isStreamingProp has partial content
isSuccessProp finished streaming
errorError for this prop (if any)

Component State

Make state visible to AI and persist across sessions:

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
valueCurrent state value
setValueUpdate state (supports updater functions)
meta.isPendingServer sync in progress
meta.errorSync error (if any)
meta.flushImmediately flush pending debounced updates
setValue Patterns
// Direct value
setTitle("New title");

// Updater function
setCount((prev) => prev + 1);
When to Use Component State
  • User-editable content AI should see
  • Form inputs requiring persistence
  • State that survives page reloads
  • Streaming props that user can modify after generation

Streaming Best Practices

  1. Make props optional in Zod schema:

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

  2. Show skeletons for missing data, not errors

  3. Use optional chaining: items?.map(...)

  4. Disable interactions until streamStatus.isSuccess

Comments

Markdown supported