How to use streamObject in a NextJS API route?

[DavidMelnychuk]

I was following the documentation example here: https://sdk.vercel.ai/examples/next-app/basics/streaming-object-generation and set up similar code within a NextJS API Route like so,

export async function POST(req: Request) {
  const body = await req.json();
    const stream = createStreamableValue();

    (async () => {
      const { partialObjectStream } = await streamObject({
        model: openai('gpt-3.5-turbo'),
        messages,
        schema
      });

      for await (const partialObject of partialObjectStream) {
        stream.update(partialObject);
      }
      stream.done();
    })();

    const responseBody = { object: stream.value };
    return new Response(JSON.stringify(responseBody));
}

But how should I consume this stream from the client? Trying to use readStreamableValue leads to the error:
Error: Invalid value: this hook only accepts values created via 'createStreamableValue'.

I don't see an equivalent documentation page under NextJS pages router, so is streaming objects from an API route just not supported yet?

Thanks!

[lgrammel]

There is no hook / data transport for streamObject yet. You can use it with RSCs, e.g. createStreamableValue. See https://sdk.vercel.ai/docs/ai-sdk-rsc/overview

[DavidMelnychuk]

Thanks! Is there an ETA on when such a hook might be added or a place to upvote it as a feature request?

I want to use streamObject in an API route instead of a server action since the API route will also be consumed by mobile clients.

[lgrammel]

We have a useObject hook now: https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-object

[DavidMelnychuk]

Awesome, thank you!

[aaryanptl]

@DavidMelnychuk Hey, please can you send the full code, I am trying this but stuck with the errors.