useChat hook in GenUI component not shared with main MyAssistant's useChat

[jackgurae]

Hi, I need help with ai sdk's useChat.
I try adding RetirementPlannerToolUI in
MyAssistant.tsx

'use client';

import { useChat } from 'ai/react';
import { Thread } from '@assistant-ui/react';
import { makeMarkdownText } from '@assistant-ui/react-markdown';
import { useVercelUseChatRuntime } from '@assistant-ui/react-ai-sdk';
import { GetStockPriceToolUI } from './GetStockPriceToolUI';
import { RetirementPlannerToolUI } from './RetirementFormUI';
import { ToolFallback } from './ToolFallBack';

const MarkdownText = makeMarkdownText();

export function MyAssistant() {
  // const runtime = useEdgeRuntime({ api: "/api/chat" });
  const chat = useChat({
    api: '/api/chat',
  });

  const runtime = useVercelUseChatRuntime(chat);

  return (
    <Thread
      runtime={runtime}
      assistantMessage={{ components: { Text: MarkdownText, ToolFallback } }}
      tools={[GetStockPriceToolUI, RetirementPlannerToolUI]} // Including the RetirementPlannerToolUI
    >      
    </Thread>
  );
}

What RetirementPlannerToolUI does is basically, show retirement form for user to input.
Now I want to inject user input as user chat message, so I add useChat in the element as shown below.
RetirementFormUI.tsx

'use client';

import { makeAssistantToolUI } from '@assistant-ui/react'
import { useState } from 'react'
import { useChat } from 'ai/react';
import { useEffect } from 'react';

const RetirementForm = ({ onSubmit }: { onSubmit: (args: RetirementPlannerArgs) => void }) => {
    console.log("Handling retirement form submission");
    const { messages, append, input, setInput, handleSubmit } = useChat();
    
    useEffect(() => {
        console.log('Current conversation history:', messages);
    }, [messages]);
    const message = 'test message'
    append({
            role: 'user',
            content: message
        });

        // Set the message in the chat input
        setInput(message);

        // Submit the chat form
        handleSubmit(e);

I thought that as RetirementFormUI is wrapped by MyAssistant, the useChat should be shared with RetirementPlannerToolUI component.
But when I try to log message using useChat's messages, it is empty. (append, setInput, handleSubmit do not work too).

I wonder if I am wrong on shared state concept of useChat?

[Yonom]

Pass in the same id to both useChat calls to share the state

https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-chat#id

[jackgurae]

Thank you, I manage to do it now.

By the way, as component is rendered on client side, in what other case I may want to set up id for useChat

[Yonom]

You may want to have multiple separate chats in your app and use a separate id per thread