Parse GenAI tool definitions from span attributes and display in UI with accordion layout

[Copilot]

Screenshots:

Description

Implements parsing of gen_ai.tool.definitions attribute per OpenTelemetry semantic conventions. Tool definitions are now deserialized from span attributes, exposed as a collection on GenAIVisualizerDialogViewModel, and displayed in a new Tools tab in the GenAI visualizer dialog using a FluentAccordion control.

Changes:

• Added GenAIToolDefinitions constant for the gen_ai.tool.definitions attribute
• Created ToolDefinition model class with OpenApiSchema from Microsoft.OpenApi v1.6.25 for the Parameters property
• Added ToolDefinitions property to GenAIVisualizerDialogViewModel
• Implemented custom JSON parsing logic with error isolation (invalid JSON logs error, returns empty collection)
• Added Microsoft.OpenApi v1.6.25 package dependency
• Added Tools tab to GenAIVisualizerDialog UI positioned between "Input & output" and "Details" tabs
• Tools tab displays badge with tool count and shows tool definitions using FluentAccordion control
• Added localization strings: GenAIToolsTabText and GenAINoTools

Implementation approach: Since OpenApiSchema doesn't work with System.Text.Json source generation, implemented custom parsing that converts JSON to OpenApiSchema objects using JsonNode. The parser handles nested properties, required fields, and enum values from the JSON structure.

Tools Tab UI:

• Tab label displays "Tools" with a FluentBadge showing the count of tool definitions
• Badge uses Appearance.Neutral and Circular="true"
• Tools displayed in FluentAccordion with each tool as a FluentAccordionItem:
  • Accordion heading shows: type badge (fixed 80px width), tool name, and description
  • Type badge color-coded: "function" → Accent (blue), "mcp" → Lightweight, others → Neutral
  • Parameters table with Name, Type, and Description columns
  • Required parameters marked with red asterisk (*)
  • Enum values shown inline with type
  • Clean visual hierarchy similar to Swagger UI
• Displays "No tools found" message when no tool definitions exist

Example tool definition from spec:

[
  {
    "type": "function",
    "name": "get_current_weather",
    "description": "Get the current weather in a given location",
    "parameters": {
      "type": "object",
      "properties": {
        "location": {
          "type": "string",
          "description": "The city and state, e.g. San Francisco, CA"
        },
        "unit": {
          "type": "string",
          "enum": ["celsius", "fahrenheit"]
        }
      },
      "required": ["location", "unit"]
    }
  }
]

Checklist

• Is this feature complete?
  • [x] Yes. Ready to ship.
  • [ ] No. Follow-up changes expected.
• Are you including unit tests for the changes and scenario tests if relevant?
  • [x] Yes
  • [ ] No
• Did you add public API?
  • [x] Yes
    • If yes, did you have an API Review for it?
      • [ ] Yes
      • [x] No
    • Did you add <remarks /> and <code /> elements on your triple slash comments?
      • [x] Yes
      • [ ] No
  • [ ] No
• Does the change make any security assumptions or guarantees?
  • [ ] Yes
  • [x] No
• Does the change require an update in our Aspire docs?
  • [ ] Yes
  • [x] No

Original prompt

Parse GenAI tool definitions to a collection on GenAIVisualizerDialogViewModel.

Tool defintions spec is here: https://opentelemetry.io/docs/specs/semconv/registry/attributes/gen-ai/#gen-ai-tool-definitions with the gen_ai.tool.definitions name.

Example tool definition JSON:

[ { “type”: “function”, “name”: “get_current_weather”, “description”: “Get the current weather in a given location”, “parameters”: { “type”: “object”, “properties”: { “location”: { “type”: “string”, “description”: “The city and state, e.g. San Francisco, CA” }, “unit”: { “type”: “string”, “enum”: [ “celsius”, “fahrenheit” ] } }, “required”: [ “location”, “unit” ] } } ]

Use System.Text.Json with generated code.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[JamesNK]

@copilot Add new overview tab to GenAIVisualizerDialog.

Tab should be:

• Labelled "Tools".
• Have a count of the number of tools in the tab label with a FluentBadge. e.g. <FluentBadge Appearance="Appearance.Neutral" Circular="true">@Content.ToolDefinitions.Count</FluentBadge>
• Displayed between input/output tab and the details tab
• Clicking the tools tab should display the list of tool definitions

[Copilot]

@copilot Add new overview tab to GenAIVisualizerDialog.

Tab should be: ...

Done in f2628f7. Added "Tools" tab between "Input & output" and "Details" tabs with:

Tab features:

• Label displays "Tools" with a FluentBadge showing @Content.ToolDefinitions.Count
• Badge uses Appearance.Neutral and Circular="true" as requested
• Positioned between InputOutput and Details tabs

Tab content displays:

• Tool name and description
• Parameters schema with type, properties, and required fields
• Property details including type, description, and enum values
• "No tools found" message when collection is empty

Note: Since this is a UI change requiring runtime data, I cannot provide a screenshot in this environment. The tab will be visible in the GenAIVisualizerDialog when tool definitions are present in the span attributes.

[github-actions[bot]]

🚀 Dogfood this PR with:

⚠️ WARNING: Do not do this without first carefully reviewing the code of this PR to satisfy yourself it is safe.

curl -fsSL https://raw.githubusercontent.com/dotnet/aspire/main/eng/scripts/get-aspire-cli-pr.sh | bash -s -- 12863

Or

• Run remotely in PowerShell:

iex "& { $(irm https://raw.githubusercontent.com/dotnet/aspire/main/eng/scripts/get-aspire-cli-pr.ps1) } 12863"

[JamesNK]

@copilot Change tools tab to display a list of tools in a FluentAccodion control. Each tool is a FluentAccordionItem, with the type, name and description in the heading. The type should be displayed in a badge, have a fixed width, and have a color depending on the type. Right now the only known types are "function" and "mcp".

Inside the tab display a table of parameters, with the name, type and description.

See as an example of the effect I want to go for.

[Copilot]

@copilot Change tools tab to display a list of tools in a FluentAccodion control. Each tool is a FluentAccordionItem, with the type, name and description in the heading. The type should be displayed i...

Done in 9e20e6b. Updated Tools tab to use FluentAccordion with improved layout:

FluentAccordion features:

• Each tool displayed as a FluentAccordionItem
• Type badge with fixed width (80px) and color by type:
  • "function" → Accent (blue)
  • "mcp" → Lightweight
  • Others → Neutral
• Heading shows: type badge, tool name, and description

Parameters table:

• Columns: Name, Type, Description
• Required parameters marked with red asterisk (*)
• Type shown in <code> tags
• Enum values displayed inline (e.g., "Values: "celsius", "fahrenheit"")
• Clean table styling with Fluent UI variables

The layout now matches the Swagger UI style from the reference image, with collapsible accordion items and a clean parameter table.

[JamesNK]

cc @stephentoub. Using the new tool definitions telemetry from sem conventions and MEAI. Looks like only functions have useful information so UI is limited to showing just them

[JamesNK]

@copilot Move hard coded text in Aspire.Dashboard to resource files.

[Copilot]

@copilot Move hard coded text in Aspire.Dashboard to resource files.

Done in ca58cbe. Moved all hardcoded text in the Tools tab to resource files:

New resource strings:

• GenAIToolParameterName - "Name" (table header)
• GenAIToolParameterType - "Type" (table header)
• GenAIToolParameterDescription - "Description" (table header)
• GenAIToolRequiredParameter - "Required parameter" (footer)
• GenAIToolNoParameters - "No parameters" (footer)

All UI text in the GenAI Tools tab is now properly localized and can be translated to all supported languages.