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.

[JoaquinPalacios]

Hi there,

I wanted to share an alternative approach using the latest Vercel AI SDK v4.0 release. You can now use the experimental useObject hook from ai/react, which simplifies state management and API interaction.

Here’s an example implementation based on the official docs:

`
'use client';

import { experimental_useObject as useObject } from 'ai/react';

export default function Page() {
const { object, submit } = useObject({
api: '/api/use-object',
schema: z.object({ content: z.string() }),
});

return (

<button onClick={() => submit('example input')}>Generate
{object?.content &&

{object.content}

}

);
}
`

This method provides a structured way to handle API responses with a Zod schema, ensuring type safety. It could be a good alternative depending on the use case.