Vue3 can't access toolResponse client side

[cosbgn]

Description

On my backend I have:

		const result = await streamText({
			model: openai('gpt-4o-mini'),
			system: system_prompt,
			tools: {
				search_files: tool({
					description: `foo`,
					parameters: z.object({
						search_queries: z.array(z.string()).describe('The search query'),
					}),
					execute: async ({ search_queries }) => await search(search_queries)
				})
			},
			maxSteps: 5, // allow up to 5 steps,
			messages
		})
		return result.toDataStreamResponse()

On my frontend:

import { useChat } from '@ai-sdk/vue';
const { messages, handleSubmit } = useChat()

Tool responses are initially added to the messages but when the callback finished (the message stop streaming) they get removed.

Code example

No response

Additional context

No response

[lgrammel]

@cosbgn shortened urls like cln.sh are suspicious. please embed the screencast directly here

[lgrammel]

Please check out this example https://github.com/vercel/ai/tree/main/examples/nuxt-openai and make sure that you use the latest versions of @ai-sdk/vue and ai

[cosbgn]

Hey @lgrammel thanks for the quick answer. I tested with the example and I get the same results.

I attach the video directly here, but as a summary toolInvocations disappears client side once the streaming ends.

Not sure if related but openAI has a similar bug (openai/openai-node#1060).

j04Cz8iyX3HuUZnZKnaUcuNqhPxOZ5vrt4TdGXGT.mp4

[lgrammel]

Not related to openai and def strange. What is your frontend code?

[cosbgn]

@lgrammel it's identical to the linked example, I only alias the lib name.

<script setup lang="ts">
import { useChat as useAiChat } from '@ai-sdk/vue';
const space = ref({id:123})
const { messages, input, handleSubmit, isLoading, completion, error, data } = useAiChat({ 
	api:`/api/spaces/${space.value.id}/rag/chat_aisdk`,
  	maxSteps: 5,
})
</script>

[lgrammel]

I have tried reproducing the issue with our standard vue example ( https://github.com/vercel/ai/tree/main/examples/nuxt-openai ) w/o success. The tool results do not disappear. Are you on the latest version of @ai-sdk/vue (0.0.50) and @ai (3.3.43)? Can you check if that example works for you ( http://localhost:3000/use-chat-tools )

[cosbgn]

@lgrammel I still get the bug on both chome and firefox, could you test this: https://github.com/cosbgn/ai_sdk_bug I really don't understand what it could be.

Here a video of the code running:

2024-09-20_14.58.59.mp4

[lgrammel]

Here you define messages instead of taking them from the request: https://github.com/cosbgn/ai_sdk_bug/blob/main/server/api/chat.js

They should be extract from the request, see e.g.
https://github.com/vercel/ai/blob/main/examples/nuxt-openai/server/api/use-chat-tools.ts

[cosbgn]

Hi @lgrammel that was hard-coded to simplify the repo and make sure functions get called, but that isn't the issue.

I just pushed a new version where I parse the body and the error is definitely still happening.

[lgrammel]

Thanks! Was able to reproduce with your example, looks like a bug.

[lgrammel]

Identified the issue

[lgrammel]

#3081

[lgrammel]

releasing @ai-sdk/[email protected] with a fix

[cosbgn]

Works! Thank you!