How to Add a custom request header to the getCompletion method of the AIChatProtocolClient

[markjones-WK]

I am trying to add a custom header to the getCompletion request of the AIChatProtocolClient and access that custom header in the chat controller in the web api. I am using this sample (react front end).
https://github.com/Azure-Samples/aspire-semantic-kernel-basic-chat-app

How do I do this?

I added a constant like this to the chat.tsx file:

   const client = new AIChatProtocolClient("/api/chat/");

    const reqOptions: AIChatCompletionOperationOptions = {
      sessionState: sessionState,
      requestOptions: { headers: { 'x-id': 'value' } },
    }

and I added it to the getCompletion method call as follows:

  const result = await client.getCompletion([message], reqOptions);

However, when the chat controller in the backend webapi is called, I cannot see or access the request headers.
The chatControlller Task looks like this:
public async Task ProcessMessage(AIChatRequest request)

[markjones-WK]

The sample is also here as well:

https://github.com/microsoft/ai-chat-protocol/blob/main/samples/frontend/js/react/src/Chat.tsx

[markjones-WK]

Thanks @glecaros! When do you anticipate that being merged into the client library Main branch?

[glecaros]

we just merged it today, I expect to release a new version of the library today too

[markjones-WK]

Thanks @glecaros , I have updated to the latest package.

Do I still add the custom header like I did here:

I added a constant like this to the chat.tsx file:

const client = new AIChatProtocolClient("/api/chat/");

const reqOptions: AIChatCompletionOperationOptions = {
  sessionState: sessionState,
  requestOptions: { headers: { 'x-id': 'value' } },
}

and I added it to the getCompletion method call as follows:

const result = await client.getCompletion([message], reqOptions);

However, when the chat controller in the backend webapi is called, I still cannot see or access the request headers in the AIChatRequest object.
The chatControlller Task looks like this:
public async Task ProcessMessage(AIChatRequest request)

What am I missing?

Thanks,
MJ

[glecaros]

yeah, you need to access the headers before the deserialization, so in case of the C# sample you would need to do something like

Request.Headers.TryGetValue("My-Header", out var myHeader);

[markjones-WK]

Got it. Thanks!