Generative AI visualizer feature in .NET Aspire 9.5 was not working

[thangchung]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

I have an app at https://github.com/thangchung/coffeeshop-agent. After upgrading to .NET Aspire 9.5, everything is working. But when I run the chatbox:

It looks great, the trace shows me that it can work correctly with the LLM model:

But when I followed the guidance at https://learn.microsoft.com/en-us/dotnet/aspire/whats-new/dotnet-aspire-9.5#generative-ai-visualizer. I clicked on the a sparkle (✨) icon appears next to its name in the Traces view. I got the exception:

I used Semantic Kernel and enabled AppContext.SetSwitch("Microsoft.SemanticKernel.Experimental.GenAI.EnableOTelDiagnosticsSensitive", true); https://github.com/thangchung/coffeeshop-agent/blob/main/src/CounterService/Program.cs#L20. I saw that SK has already added OTel GenAI semantic conventions as microsoft/semantic-kernel#12262 and microsoft/semantic-kernel#12285

The exception logs:

Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'lXi4OLhw_WDRSGoquYqSmpkDwkXnR4sap85Mkr4B3OM'.
System.Text.Json.JsonException: 'C' is an invalid start of a value. Path: $.name | LineNumber: 0 | BytePositionInLine: 6221.
 ---> System.Text.Json.JsonReaderException: 'C' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 6221.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   at System.Text.Json.Utf8JsonReader.Read()
   at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
   --- End of inner exception stack trace ---
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 utf8Json, JsonTypeInfo`1 jsonTypeInfo, Nullable`1 actualByteCount)
   at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 json, JsonTypeInfo`1 jsonTypeInfo)
   at System.Text.Json.JsonSerializer.Deserialize[TValue](String json, JsonTypeInfo`1 jsonTypeInfo)
   at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.DeserializeBody(GenAIItemType type, String message) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 245
   at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.CreateMessages(GenAIVisualizerDialogViewModel viewModel, TelemetryRepository telemetryRepository) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 197
   at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.Create(SpanDetailsViewModel spanDetailsViewModel, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 70
   at Aspire.Dashboard.Components.Dialogs.GenAIVisualizerDialog.OpenDialogAsync(ViewportInformation viewportInformation, IDialogService dialogService, IStringLocalizer`1 dialogsLoc, OtlpSpan span, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, List`1 resources, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Components/Dialogs/GenAIVisualizerDialog.razor.cs:line 232
   at Aspire.Dashboard.Components.Pages.TraceDetail.OnGenAIClickedAsync(OtlpSpan span) in /_/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs:line 545
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnClickHandlerAsync(MouseEventArgs e) in /_/src/Core/Components/Button/FluentButton.razor.cs:line 233
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Expected Behavior

I expected it to show me the pop-up just like the description at https://learn.microsoft.com/en-us/dotnet/aspire/whats-new/dotnet-aspire-9.5#generative-ai-visualizer

Steps To Reproduce

It has already been described above.

Exceptions (if any)

Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'lXi4OLhw_WDRSGoquYqSmpkDwkXnR4sap85Mkr4B3OM'.
System.Text.Json.JsonException: 'C' is an invalid start of a value. Path: $.name | LineNumber: 0 | BytePositionInLine: 6221.
 ---> System.Text.Json.JsonReaderException: 'C' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 6221.
   at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
   at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
   at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
   at System.Text.Json.Utf8JsonReader.Read()
   at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
   --- End of inner exception stack trace ---
   at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
   at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
   at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 utf8Json, JsonTypeInfo`1 jsonTypeInfo, Nullable`1 actualByteCount)
   at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 json, JsonTypeInfo`1 jsonTypeInfo)
   at System.Text.Json.JsonSerializer.Deserialize[TValue](String json, JsonTypeInfo`1 jsonTypeInfo)
   at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.DeserializeBody(GenAIItemType type, String message) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 245
   at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.CreateMessages(GenAIVisualizerDialogViewModel viewModel, TelemetryRepository telemetryRepository) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 197
   at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.Create(SpanDetailsViewModel spanDetailsViewModel, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 70
   at Aspire.Dashboard.Components.Dialogs.GenAIVisualizerDialog.OpenDialogAsync(ViewportInformation viewportInformation, IDialogService dialogService, IStringLocalizer`1 dialogsLoc, OtlpSpan span, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, List`1 resources, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Components/Dialogs/GenAIVisualizerDialog.razor.cs:line 232
   at Aspire.Dashboard.Components.Pages.TraceDetail.OnGenAIClickedAsync(OtlpSpan span) in /_/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs:line 545
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnClickHandlerAsync(MouseEventArgs e) in /_/src/Core/Components/Button/FluentButton.razor.cs:line 233
   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

.NET Version info

10.0.100-rc.1.25451.107 [C:\Program Files\dotnet\sdk]

Anything else?

• vscode
• .NET Aspire 9.5

[JamesNK]

Hi

It seems like there is invalid JSON in the telemetry. What are the complete values of gen_ai.event.content attributes?

[panicoenlaxbox]

The same for me, I have just updated to Aspire 9.5.1, but the error remains.

With a very simple interaction

fail: Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'Em1n_rOLM2j7M1RvwiXnmyyErEOB5JHuzBQZvDQh4kw'.
      System.Text.Json.JsonException: 'S' is an invalid start of a value. Path: $.name | LineNumber: 0 | BytePositionInLine: 6641.
       ---> System.Text.Json.JsonReaderException: 'S' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 6641.
         at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
         at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
         at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
         at System.Text.Json.Utf8JsonReader.TrySkip()
         at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
         at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
         --- End of inner exception stack trace ---
         at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
         at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
         at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1.Deserialize(Utf8JsonReader& reader, ReadStack& state)
         at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 utf8Json, JsonTypeInfo`1 jsonTypeInfo, Nullable`1 actualByteCount)
         at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 json, JsonTypeInfo`1 jsonTypeInfo)
         at System.Text.Json.JsonSerializer.Deserialize[TValue](String json, JsonTypeInfo`1 jsonTypeInfo)
         at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.DeserializeBody(GenAIItemType type, String message) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 242
         at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.CreateMessages(GenAIVisualizerDialogViewModel viewModel, TelemetryRepository telemetryRepository) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 194
         at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.Create(SpanDetailsViewModel spanDetailsViewModel, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 66
         at Aspire.Dashboard.Components.Dialogs.GenAIVisualizerDialog.OpenDialogAsync(ViewportInformation viewportInformation, IDialogService dialogService, IStringLocalizer`1 dialogsLoc, OtlpSpan span, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, List`1 resources, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Components/Dialogs/GenAIVisualizerDialog.razor.cs:line 232
         at Aspire.Dashboard.Components.Pages.TraceDetail.OnGenAIClickedAsync(OtlpSpan span) in /_/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs:line 545
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnClickHandlerAsync(MouseEventArgs e) in /_/src/Core/Components/Button/FluentButton.razor.cs:line 233
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[JamesNK]

What are the complete values of gen_ai.event.content attributes? Hover your cursor over the JSON value, the details icon will appear next to it. Click it and then in the dialog click copy value. Paste that here. Repeat for each of the JSON values in the span.

I need to see the complete JSON values.

[panicoenlaxbox]

Hi,

I have changed the system prompt for brevity:

I'm using SK 1.65.0 packages.

{"role": "system", "content": "You\u0027re a helpul assistant", "name": SalesAnalystAgent}

{
  "role": "user",
  "content": "Hola"
}

{
  "index": 0,
  "message": {
    "role": "assistant",
    "content": "\u00A1Hola! \u00BFEn qu\u00E9 puedo ayudarte hoy?"
  },
  "tool_calls": [],
  "finish_reason": null
}

And the error is:

fail: Aspire.Hosting.Dashboard.Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit 'xwQVR5X917mz48-JA6QPqNp_JoO9IPmDSnZugOWeOHg'.
      System.Text.Json.JsonException: 'S' is an invalid start of a value. Path: $.name | LineNumber: 0 | BytePositionInLine: 72.
       ---> System.Text.Json.JsonReaderException: 'S' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 72.
         at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan`1 bytes)
         at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
         at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
         at System.Text.Json.Utf8JsonReader.TrySkip()
         at System.Text.Json.Serialization.Converters.ObjectDefaultConverter`1.OnTryRead(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
         at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
         --- End of inner exception stack trace ---
         at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex)
         at System.Text.Json.Serialization.JsonConverter`1.ReadCore(Utf8JsonReader& reader, T& value, JsonSerializerOptions options, ReadStack& state)
         at System.Text.Json.Serialization.Metadata.JsonTypeInfo`1.Deserialize(Utf8JsonReader& reader, ReadStack& state)
         at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 utf8Json, JsonTypeInfo`1 jsonTypeInfo, Nullable`1 actualByteCount)
         at System.Text.Json.JsonSerializer.ReadFromSpan[TValue](ReadOnlySpan`1 json, JsonTypeInfo`1 jsonTypeInfo)
         at System.Text.Json.JsonSerializer.Deserialize[TValue](String json, JsonTypeInfo`1 jsonTypeInfo)
         at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.DeserializeBody(GenAIItemType type, String message) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 242
         at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.CreateMessages(GenAIVisualizerDialogViewModel viewModel, TelemetryRepository telemetryRepository) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 194
         at Aspire.Dashboard.Model.GenAI.GenAIVisualizerDialogViewModel.Create(SpanDetailsViewModel spanDetailsViewModel, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Model/GenAI/GenAIVisualizerDialogViewModel.cs:line 66
         at Aspire.Dashboard.Components.Dialogs.GenAIVisualizerDialog.OpenDialogAsync(ViewportInformation viewportInformation, IDialogService dialogService, IStringLocalizer`1 dialogsLoc, OtlpSpan span, Nullable`1 selectedLogEntryId, TelemetryRepository telemetryRepository, List`1 resources, Func`1 getContextGenAISpans) in /_/src/Aspire.Dashboard/Components/Dialogs/GenAIVisualizerDialog.razor.cs:line 232
         at Aspire.Dashboard.Components.Pages.TraceDetail.OnGenAIClickedAsync(OtlpSpan span) in /_/src/Aspire.Dashboard/Components/Pages/TraceDetail.razor.cs:line 545
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.FluentUI.AspNetCore.Components.FluentButton.OnClickHandlerAsync(MouseEventArgs e) in /_/src/Core/Components/Button/FluentButton.razor.cs:line 233
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

Thanks!

[JamesNK]

This is the problem:

{"role": "system", "content": "You\u0027re a helpul assistant", "name": SalesAnalystAgent}

"SalesAnalystAgent" isn't quoted. It's not valid JSON there is an error when reading it. The problem was fixed last week in Semantic Kernel: microsoft/semantic-kernel#13195

You'll have to wait for a newer version of Semantic Kernel with fixed JSON. There's nothing Aspire can do.

[thangchung]

JFYI: I upgraded the code to Microsoft Agent Framework, and it works very well.