Example: "streamObject" from "ai" in Hono?

[hugocxl]

Hi there 👋,
I'm trying to use the "streamObject" in a Hono API from a React App.

Most examples (express, Next.js) make use of the "toTextStreamResponse()" that directly works along the "useObject" React hook.
Any guidance on how to make this work?

Docs:
https://sdk.vercel.ai/examples/next/basics/streaming-object-generation

Here's a working repo in Next.js:
https://github.com/vercel-labs/ai-sdk-preview-array-output-mode/blob/main/app/(preview)/api/array/route.ts

Thanks so much in advance ❤️

[EdamAme-x]

I think just returning it as normal to use c.body seems to work.

app.get("/ai", () => {
  const result = await streamObject({
    schema: vacationSchema,
    output: "array",
    model: openai("gpt-4o-mini"),
    prompt: "Generate 3 vacation destinations",
  });

  return result.toTextStreamResponse();
})

[wottpal]

This doesn't work for me and my useObject hook is throwing [ReferenceError: Property 'TextDecoderStream' doesn't exist]

[EdamAme-x]

hmm...
The function will create a Response object, which should work.
Could you show me stacks of that error?

[hugocxl]

On my side I can confirm it works as @EdamAme-x suggested.

[wottpal]

Oh okay, thanks for the quick follow up. Maybe it's a client-side issue then 🤔 Will investigate!

[leohxj]

You can stream the object like below:

export const GET = createRoute(async (c) => {
  if (!openai) {
    openai = createOpenAI({
      baseURL: c.env.OPENAI_PROXY_BASE_URL,
      apiKey: c.env.OPENAI_PROXY_API_KEY,
    });
  }

  const result = streamObject({
    model: openai("gpt-4o"),
    prompt: "Generate a lasagna recipe",
    schema: z.object({
      recipe: z.object({
        name: z.string(),
        ingredients: z.array(z.string()),
        steps: z.array(z.string()),
      }),
    }),
    output: "object",
  });

  // Mark the response as a v1 data stream:
  c.header("X-Vercel-AI-Data-Stream", "v1");
  c.header("Content-Type", "application/json; charset=utf-8");

  return stream(c, async (stream) => {
    for await (const chunk of result.partialObjectStream) {
      await stream.write(JSON.stringify(chunk));
    }
  });
});

[hugocxl]

Pd: As a side note, I had to disabled compression for those routes returning a stream.