Hi,

I am using the AI toolkit from Vercel that allows you to execute tools based on user input.

I am trying to generate a simple fetch request to scan a URL.

It works fine, the UI renders but then dissapears from the application.

        tools: {
            submit_url: {
                description: "Submit a URL for a scan from the user.",
                parameters: z.object({
                    url: z.string().url(),
                }),
                generate: async function* ({ url }: { url: string }) {
                    console.log({ url });
                    yield <BotCard>Loading...</BotCard>;

                    try {
                        const response = await fetch("https://urlscan.io/api/v1/scan/", {
                            method: "POST",
                            headers: {
                                "Content-Type": "application/json",
                                "API-Key": env.URL_SCAN_API_KEY,
                            },
                            body: JSON.stringify({
                                url: url,
                                visibility: "public",
                                tags: ["demotag1", "demotag2"],
                            }),
                        });

                        if (!response.ok) {
                            throw new Error(`Error: ${response.statusText}`);
                        }

                        const submitoutput = await response.json();
                        console.log("Submission Output:", JSON.stringify(submitoutput, null, 4));

                        const uuid = await submitoutput.uuid;

                        history.done([
                            ...history.get(),
                            {
                                role: "assistant",
                                name: "submit_url",
                                content: `[The submitted URL details are ${uuid}]`
                            }
                        ]);

                        yield <BotCard>No problem, the submitted scan is: {uuid}</BotCard>;
                    } catch (error) {
                        console.error("Error during URL scan submission:", error);
                        yield <BotCard>Error in processing your request. Please check the URL or try again later.</BotCard>;
                    }
                }

            }
        }
    });

My generate has this error:

Type '({ url }: { url: string; }) => AsyncGenerator<Element, void, void>' is not assignable to type 'Renderer<[{ url: string; }, { toolName: string; toolCallId: string; }]>'.
  Type 'AsyncGenerator<Element, void, void>' is not assignable to type 'Streamable | Generator<Streamable, Streamable, void> | AsyncGenerator<Streamable, Streamable, void>'.
    Type 'AsyncGenerator<Element, void, void>' is not assignable to type 'AsyncGenerator<Streamable, Streamable, void>'.
      The types returned by 'next(...)' are incompatible between these types.
        Type 'Promise<IteratorResult<Element, void>>' is not assignable to type 'Promise<IteratorResult<Streamable, Streamable>>'.
          Type 'IteratorResult<Element, void>' is not assignable to type 'IteratorResult<Streamable, Streamable>'.
            Type 'IteratorReturnResult<void>' is not assignable to type 'IteratorResult<Streamable, Streamable>'.
              Type 'IteratorReturnResult<void>' is not assignable to type 'IteratorReturnResult<Streamable>'.
                Type 'void' is not assignable to type 'Streamable'.ts(2322)
index.d.ts(496, 5): The expected type comes from property 'generate' which is declared here on type 'RenderTool<ZodObject<{ url: ZodString; }, "strip", ZodTypeAny, { url: string; }, { url: string; }>>'
(property) generate?: Renderer<[{
    url: string;
}, {
    toolName: string;
    toolCallId: string;
}]> | undefined

Does anyone know why?

I tried troubleshooting my request loads, changed the way data is fetched, but the same problem.