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 Property Description isPending No tokens received yet isStreaming Active streaming in progress isSuccess All props finished without error isError Fatal error occurred streamError Error object if failed PropStatus (per-prop) Property Description isPending No tokens for this prop yet isStreaming Prop has partial content isSuccess Prop finished streaming error Error 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) ) ; Return Description value Current state value setValue Update state (supports updater functions) meta.isPending Server sync in progress meta.error Sync error (if any) meta.flush Immediately 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 Make props optional in Zod schema: z . object ( { title : z . string ( ) . optional ( ) . describe ( "Card title" ) , items : z . array ( z . string ( ) ) . optional ( ) , } ) ; Show skeletons for missing data, not errors Use optional chaining : items?.map(...) Disable interactions until streamStatus.isSuccess