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>
  );
}

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

interface Props {
  title?: string;
}

function EditableCard({ title: streamedTitle }: Props) {
  const [title, setTitle, setFromProp] = useTamboComponentState("title", "");
  const { streamStatus } = useTamboStreamStatus();

  // Sync streamed prop to state
  useEffect(() => {
    if (streamedTitle !== undefined) {
      setFromProp(streamedTitle);
    }
  }, [streamedTitle, setFromProp]);

  return (
    <input
      value={title}
      onChange={(e) => setTitle(e.target.value)}
      disabled={streamStatus.isStreaming}
    />
  );
}

const [value, setValue, setFromProp] = useTamboComponentState(
  key,
  initialValue,
);