The onFinish from the useCompletion function of the Vercel Ai sdk doesn't work

[aminamazlin]

I'm trying to build something with the Vercel ai sdk, Nextjs and Reactjs. I am using the useCompletions function in the front-end. How ever, the onFinish callback doesn't seem to return the completion. Even if I just console log something simple, it doesn't return anything. Also if I console log the completion outside of onFinish, it doesn't log. The onResponse callback does return the response object. In the api I use the streamText function.

Am I doing something wrong?

btw: htmlContent is just the json content from the front-end converted into html.

Front-end:

const { complete, completion, isLoading, stop } = useCompletion({
      id: "editor",
      api: "api/generatePrompt",
      body: {
        promptOption: promptOption,
        journalContent: content
      },
      onResponse: (response) => {
        console.log("response:", response)
      },
      onFinish: (_prompt, completion) => {
        console.log("worked")
        console.log("completion:", completion)
      }
    })

api:

const response = streamText({
        model: "gpt-4o-mini",
        messages: [
          {role: "system", content: selectedPrompt},
          {role: "user", content: htmlContent} 
        ]
    })
    
    console.log(response)
    return response.toDataStreamResponse();