Streaming Issue with Blazor WebAssembly and Sematic Kernel and Open AI

Question

I am using Blazor WebAssembly connecting to Azure Open AI. When I try to stream the response. I get the error message below.

This is my code:

public partial class HomeView

{

[Inject] Kernel Kernel { get; set; }

private string message;

private string response = string.Empty;

private async Task Send()

{

    response = "";

    var chunks = Kernel.InvokePromptStreamingAsync<string>(message);

    await foreach (var chunk in chunks)

    {

        response += chunk;

        StateHasChanged();


       

    }

}
```}

I am following the tutorial at; 

[https://www.youtube.com/watch?v=z7V-_JVF_Zo](https://www.youtube.com/watch?v=z7V-_JVF_Zo)

Error message: 

invoke-js.ts:242 info: InvokePromptStreamingAsync_25f2e9305729443c99143d019c8d35b8[0]

```yaml
  Function (null)-InvokePromptStreamingAsync_25f2e9305729443c99143d019c8d35b8 streaming completed. Duration: 21.6097999s.
```blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

```yaml
  Unhandled exception rendering component: Content stream position is not at beginning of stream.
```System.InvalidOperationException: Content stream position is not at beginning of stream.

   at System.ClientModel.Primitives.HttpClientPipelineTransport.HttpClientTransportResponse.BufferContentSyncOrAsync(CancellationToken cancellationToken, Boolean async)

   at System.ClientModel.Internal.TaskExtensions.EnsureCompleted[BinaryData]

   at System.ClientModel.Primitives.HttpClientPipelineTransport.HttpClientTransportResponse.BufferContent(CancellationToken cancellationToken)

   at System.ClientModel.Primitives.HttpClientPipelineTransport.HttpClientTransportResponse.Dispose(Boolean disposing)

   at System.ClientModel.Primitives.HttpClientPipelineTransport.HttpClientTransportResponse.Dispose()

   at OpenAI.Chat.InternalAsyncStreamingChatCompletionUpdateCollection.AsyncStreamingChatUpdateEnumerator.DisposeAsyncCore()

   at OpenAI.Chat.InternalAsyncStreamingChatCompletionUpdateCollection.AsyncStreamingChatUpdateEnumerator.DisposeAsync()

   at OpenAI.Chat.InternalAsyncStreamingChatCompletionUpdateCollection.GetValuesFromPageAsync(ClientResult page)+MoveNext()

   at OpenAI.Chat.InternalAsyncStreamingChatCompletionUpdateCollection.GetValuesFromPageAsync(ClientResult page)+System.Threading.Tasks.Sources.IValueTaskSource<System.Boolean>.GetResult()

   at System.ClientModel.AsyncCollectionResult`1.<GetAsyncEnumerator>d__1[[OpenAI.Chat.StreamingChatCompletionUpdate, OpenAI, Version=2.1.0.0, Culture=neutral, PublicKeyToken=b4187f3e65366280]].MoveNext()

   at System.ClientModel.AsyncCollectionResult`1.<GetAsyncEnumerator>d__1[[OpenAI.Chat.StreamingChatCompletionUpdate, OpenAI, Version=2.1.0.0, Culture=neutral, PublicKeyToken=b4187f3e65366280]].MoveNext()

   at System.ClientModel.AsyncCollectionResult`1.<GetAsyncEnumerator>d__1[[OpenAI.Chat.StreamingChatCompletionUpdate, OpenAI, Version=2.1.0.0, Culture=neutral, PublicKeyToken=b4187f3e65366280]].MoveNext()

   at System.ClientModel.AsyncCollectionResult`1.<GetAsyncEnumerator>d__1[[OpenAI.Chat.StreamingChatCompletionUpdate, OpenAI, Version=2.1.0.0, Culture=neutral, PublicKeyToken=b4187f3e65366280]].System.Threading.Tasks.Sources.IValueTaskSource<System.Boolean>.GetResult(Int16 token)

   at Microsoft.SemanticKernel.Connectors.OpenAI.ClientCore.GetStreamingChatMessageContentsAsync(String targetModel, ChatHistory chatHistory, PromptExecutionSettings executionSettings, Kernel kernel, CancellationToken cancellationToken)+MoveNext()

   at Microsoft.SemanticKernel.Connectors.OpenAI.ClientCore.GetStreamingChatMessageContentsAsync(String targetModel, ChatHistory chatHistory, PromptExecutionSettings executionSettings, Kernel kernel, CancellationToken cancellationToken)+MoveNext()

   at Microsoft.SemanticKernel.Connectors.OpenAI.ClientCore.GetStreamingChatMessageContentsAsync(String targetModel, ChatHistory chatHistory, PromptExecutionSettings executionSettings, Kernel kernel, CancellationToken cancellationToken)+System.Threading.Tasks.Sources.IValueTaskSource<System.Boolean>.GetResult()

   at Microsoft.SemanticKernel.KernelFunctionFromPrompt.<InvokeStreamingCoreAsync>d__7`1[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()

   at Microsoft.SemanticKernel.KernelFunctionFromPrompt.<InvokeStreamingCoreAsync>d__7`1[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()

   at Microsoft.SemanticKernel.KernelFunctionFromPrompt.<InvokeStreamingCoreAsync>d__7`1[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].System.Threading.Tasks.Sources.IValueTaskSource<System.Boolean>.GetResult(Int16 token)

   at Microsoft.SemanticKernel.KernelFunction.<InvokeStreamingAsync>d__30`1[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()

   at Microsoft.SemanticKernel.KernelFunction.<InvokeStreamingAsync>d__30`1[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()

   at Microsoft.SemanticKernel.KernelFunction.<InvokeStreamingAsync>d__30`1[[System.String, System.Private.CoreLib, Version=9.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].System.Threading.Tasks.Sources.IValueTaskSource<System.Boolean>.GetResult(Int16 token)

   at Connect2HealthAzureAI.Pages.HomeView.Send() in D:\Source\Repos\Connect2HealthAzureAI\Pages\HomeView.razor.cs:line 18

   at Connect2HealthAzureAI.Pages.HomeView.Send() in D:\Source\Repos\Connect2HealthAzureAI\Pages\HomeView.razor.cs:line 18

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Answer 1

WASM Blazor’s WebClient is implemented via jsinterop and does not have the complete feature set. This one of the reasons you must use Blazor server for this example. Also you would not want to expose your api key in a WASM application.

The Blazor team suggests a webapi that the Blazor WASM calls to access the azure ai.