How to streamObject() from within a streamUI() call?

[wecr3at3]

Hello guys, I am working on a project where an AI tutor chatbot will provide notes (only when asked by the user) on a given topic. During a normal chat, it needs to respond without using any tools but whenever the user needs notes on a topic, the AI should acknowledge in plain text and then start streaming the text inside the Notes Component. It should not create the UI will the entire notes' content at once. Instead, the content should be streamed within the Notes Component.

I have been trying to make another call to an LLM using streamObject call inside the tools provided by streamUI function. But its not working at all.

I am not sure if I am doing the right thing here to achieve what I want. Please help!!!!!

My actions.tsx code -

import { streamUI, createStreamableValue, readStreamableValue, useStreamableValue, StreamableValue } from "ai/rsc";
import { google } from "@ai-sdk/google";
import { z } from "zod";
import { insertNote } from "@/app/lib/dataActions";
import { nanoid } from "nanoid";
import { notesSchema } from "./schema";
import { streamObject } from "ai";
import { PartialNote } from "./schema";

const LoadingComponent = () => (
  <div className="animate-pulse p-4">Generating notes...</div>
);

interface NotesProps {
  topic: string;
  content: string;
  sections: Array<{ title: string; content: string }>;
}

function NotesComponent({
    noteStream,
  }: {
    noteStream: StreamableValue<PartialNote>;
}){
    const [data, pending, error] = useStreamableValue(noteStream);

    <div className="border border-neutral-200 p-4 rounded-lg">
    <h2 className="text-xl font-bold">{data?.topic}</h2>
    <div className="mt-2">{data?.content}</div>
    {data?.sections?.map((section, index) => (
      <div key={index} className="mt-4">
        <h3 className="text-lg font-semibold">{section?.title}</h3>
        <div>{section?.content}</div>
      </div>
    ))}
  </div>
}

export async function generateNotes(topic: string) {
    const noteStream = createStreamableValue<PartialNote>();
  
    streamObject({
      model: google("models/gemini-1.5-flash-latest"),
      system: `You are an expert study assistant. Create comprehensive and well-structured notes on the given topic. Use markdown formatting for better readability.`,
      temperature: 0.3,
      prompt: `Create comprehensive and well-structured notes on the topic: ${topic}`,
      schema: notesSchema,
      maxTokens: 2048,
    })
      .then(async ({ partialObjectStream }) => {
        for await (const partialObject of partialObjectStream) {
          noteStream.update(partialObject);
        }
      })
      .finally(() => {
        noteStream.done();
      });
  
    return noteStream.value;
  }

export async function POST(req: Request) {
  const { messages, conversationId } = await req.json();
  console.log(messages);

  let currentConversationId = conversationId || nanoid();

  const result = await streamUI({
    model: google("models/gemini-1.5-flash-latest"),
    messages,
    system: `You are Pratham, a helpful and friendly study assistant for school going students. When asked to create notes on a topic, respond with an acknowledgment and use the createNote tool to create and save the notes. Always respond in the user's language. Output any math expressions in LaTeX format (use $ for inline math and $$ for display math).`,
    temperature: 0.3,
    maxTokens: 4096,
    text: ({ content }) => <div>{content}</div>,
    tools: {
      createNote: {
        description: "Create and save notes on a given topic.",
        parameters: z.object({
          topic: z.string().describe("The topic to create notes on"),
        }),
        generate: async function* ({ topic }) {
          yield <LoadingComponent />;
          const note = await generateNotes(topic);
          return (
            <NotesComponent
              noteStream={note}
            />
          );
        },
      },
    },
  });

  return new Response(JSON.stringify(result.value), {
    headers: {
      "Content-Type": "application/json",
      "X-Conversation-Id": currentConversationId,
    },
  });
}

My page.tsx code -

import { fetchConversations } from "@/app/lib/dataActions";
import { Conversation } from "./lib/types";

export default async function Home() {
  const conversations = await fetchConversations("dummy-user");

  return (
    <div className="flex flex-col items-center justify-center min-h-screen py-2">
      <h1 className="text-4xl font-bold mb-8">AI Chatbot</h1>
      <Link
        href="/chat/new"
        className="mb-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Start New Chat
      </Link>
      <div className="w-full max-w-md">
        <h2 className="text-2xl font-bold mb-4">Your Conversations</h2>
        {conversations.map((conversation: Conversation) => (
          <Link
            href={`/chat/${conversation.id}`}
            key={conversation.id}
            className="block p-4 mb-2 bg-gray-100 rounded hover:bg-gray-200"
          >
            {conversation.title}
          </Link>
        ))}
      </div>
    </div>
  );
}

[luizv]

Any solution for this?
I'm investigating how to do something similar: making a tool stream an object and not add it as a message.