TamboStreamProvider (Proof of Concept) #654

armfuldev · 2025-07-10T18:16:47Z

Here's the TamboStreamProvider proof of concept you asked for. It provides per-key state management with compound components (Loading, Empty, Content) that work with both streaming and static data, offering a more declarative alternative to manual prop status checking.

This was ported from another provider I wrote for Prisma Pulse, but I haven't been able to do proper testing yet. Would love to chat with someone about testing strategies so we can ensure we cover the edge cases you encounter in real usage.

Example usage:

<TamboStreamProvider data={{ title, content, createdAt }}>
  <div>
    <h3>{title}</h3>
    <p>{content}</p>
    
    <TamboStreamProvider.Loading key="createdAt">
      <p>Loading creation date...</p>
    </TamboStreamProvider.Loading>
    
    <TamboStreamProvider.Content key="createdAt">
      <p>Created: {createdAt}</p>
    </TamboStreamProvider.Content>
    
    <TamboStreamProvider.Empty key="createdAt">
      <p>No creation date available</p>
    </TamboStreamProvider.Empty>
  </div>
</TamboStreamProvider>

This is just a POC to see if this pattern feels good and could be useful. The idea is to replace stuff like propStatus["createdAt"]?.isSuccess && <p>{createdAt}</p> with something more declarative.

Would love to get your thoughts on whether this direction feels right! 🤔

…for managing stream states

vercel · 2025-07-10T18:16:53Z

@armfuldev is attempting to deploy a commit to the tambo ai Team on Vercel.

A member of the Team first needs to authorize it.

MichaelMilstead · 2025-07-10T18:57:47Z

Nice, looks like Content will render when the field is done streaming in, can we change the name to Complete or something similar?

Overall looks good!

alecf · 2025-07-10T19:09:31Z

react-sdk/src/providers/tambo-stream-provider.tsx

+
+export interface LoadingProps {
+  /** The key to identify this loading state */
+  key?: string;


At a very practical level, you can't use key here

I'm pretty sure that the value passed for key will not actually show up in your props, as it is reserved for react's reconciliation algorithm

Your sample code passes multiple children with the same key prop, which is definitely not allowed.

At the very lease this needs a new name, like propKey or something
https://legacy.reactjs.org/docs/lists-and-keys.html#keys-must-only-be-unique-among-siblings

totally, this was a very quick proof of concept for the team.

i missed that oversight while making the example.

i'm expecting a lot to change according to Tambo requirements

alecf

Overall I do like this approach! I'm a little wary of the generic name TamboStreamContext etc - I feel like this is very specifically for streaming in props and there are other aspects to streaming.

What about TamboStreamPropsProvider or something? I know it is kind of a mouthful...

armfuldev · 2025-07-10T21:16:11Z

Nice, looks like Content will render when the field is done streaming in, can we change the name to Complete or something similar?

Overall looks good!

Complete makes sense as well!

Overall I do like this approach! I'm a little wary of the generic name TamboStreamContext etc - I feel like this is very specifically for streaming in props and there are other aspects to streaming.

What about TamboStreamPropsProvider or something? I know it is kind of a mouthful...

i understand your concern, we can tweak this to make more sense. this was mostly to get the idea across to Michael as i showed him a quick example during todays stream.

michaelmagan · 2025-07-10T22:00:42Z

@alecf this is good feedback on naming.

I like TamboPropStreamProvider.

My feedback is mainly around naming. I think we should keep naming to closely match the hook.

I'm also wondering if we then provide a flexible When for when you want to show something during multiple state.

Gate/Wrapper	Renders when status matches…	Typical “OR” combos
Pending	isPending	–
Streaming	isStreaming	–
Success	isSuccess and data present	–
Empty	not isPending, isStreaming, isSuccess, isError and data empty	–
Error	isError	–
When any={[…]}	Current state ∈ passed array	e.g. ["streaming","success"], ["pending","streaming","success"]

I no longer like this:

import { TamboPropStreamProvider } from "@tambo/react";

export default function Note({ title, content, createdAt }) {
  return (
    <TamboPropStreamProvider data={{ title, content, createdAt }}>
      <h3>{title}</h3>
      <p>{content}</p>

      {/* single-state helper */}
      <TamboPropStreamProvider.Pending   prop="createdAt">
        <p>Thinking…</p>
      </TamboPropStream.Pending>

      <TamboPropStreamProvider.Streaming prop="createdAt">
        <p>⏳ streaming …</p>
      </TamboPropStreamProvider.Streaming>
      
      {/* multi-state gate */}
      <TamboPropStreamProvider.When prop="createdAt" any={["pending","streaming","success"]}>
        Show while pending through success: {createdAt}
      </TamboPropStreamProvider.When>

      <TamboPropStreamProvider.Success   prop="createdAt">
        <p>Only Show after Finished Streaming: {createdAt}</p>
      </TamboPropStreamProvider.Success>

      <TamboPropStreamProvider.Empty     prop="createdAt">
        <p>No creation date.</p>
      </TamboPropStreamProvider.Empty>

      <TamboPropStreamProvider.Error     prop="createdAt">
        <p>⚠️ failed to generate date.</p>
      </TamboPropStreamProvider.Error>


    </TamboPropStreamProvider>
  );
}

On the flip side When is a little word but it gives you very clear granular control.

michaelmagan · 2025-07-10T23:36:34Z

i actually kind of like this:

// Note.tsx – gates one prop, streams the rest inline
import {
  TamboPropStreamProvider as Stream,
  StreamStatus,
} from "@tambo/react";

export default function Note({ title, content, createdAt }: NoteProps) {

  return (
    <Stream data={{ title, content, createdAt }}>
      <h3>{title}</h3>
      <p>{content}</p>

      {/* gate createdAt with OR logic */}
      <Stream.When
        prop="createdAt"
        is={[StreamStatus.Pending, StreamStatus.Streaming]}
      >
        <p>⏳ fetching date…</p>
      </Stream.When>

      <Stream.When prop="createdAt" is={StreamStatus.Success}>
        <p>Created: {createdAt}</p>
      </Stream.When>

      <Stream.When prop="createdAt" is={StreamStatus.Empty}>
        <p>No creation date.</p>
      </Stream.When>

      <Stream.When prop="createdAt" is={StreamStatus.Error}>
        <p>⚠️ failed to generate date.</p>
      </Stream.When>
    </Stream>
  );
}

michaelmagan · 2025-07-11T16:28:56Z

Hey we synced and this is all we decided on:

TamboPropStreamProvider

content renamed to complete.

Then we can merge.

Thanks @armfuldev!

feat(sdk): proof of concept stream provider with compound components …

bedf13b

…for managing stream states

alecf reviewed Jul 10, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

TamboStreamProvider (Proof of Concept) #654

TamboStreamProvider (Proof of Concept) #654

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

TamboStreamProvider (Proof of Concept) #654

Are you sure you want to change the base?

TamboStreamProvider (Proof of Concept) #654

Conversation

Example usage:

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!