useChat not sending header options in request

[apat183]

Description

I can't get the headers option to work in VueJS. It doesn't get passed (specifically "authorization". The "Content-Type" appears to be changing. I'm calling api on nodejs backend with express. but see screenshot below I don't think that matters as the request is not including the header.

const { messages, input, handleSubmit } = useChat({
  api: '/api/ai/chat', headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${getToken()}`
  }
});

I've tried creating new headers object:

const { messages, input, handleSubmit } = useChat({
  api: '/api/ai/chat', headers: new Headers({
    'Content-Type': 'application/json',
    'Authorization': getToken()
  })
});

As you can see in dev tools, nothing is added to request headers. On express side it's not received as well.

Code example

import { useChat } from '@ai-sdk/vue';
import { getToken } from '@/lib/supabase'

console.log(getToken())
const { messages, input, handleSubmit } = useChat({
  api: '/api/ai/chat', headers: new Headers({
    'Content-Type': 'application/json',
    'Authorization': getToken()
  })
});

Additional context

Just add, this works with own code and using fetch. So can't see issue on backend or through other code as I'm just changing the request/tool

const response = await fetch('/api/ai/chat', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: getToken()
    },
    body: JSON.stringify({
      prompt: prompt
    })
  })

[apat183]

Update in some investigation.

Looks like useCompletion works.

I noticed in the use-chat.ts. The headers and body are never used?

[lgrammel]

Fix: https://github.com/vercel/ai/pull/2718

[lgrammel]

Fixed in @ai-sdk/vue@0.0.38