@* Copyright (c) Microsoft. All rights reserved. *@ @page "/microsoft-agent-framework/feature/{scenarioId}" @using AGUIDojoClient.Components.Shared @using AGUIDojoClient.Components.Demos.AgenticChat @using AGUIDojoClient.Components.Demos.AgenticGenerativeUI @using AGUIDojoClient.Components.Demos.BackendToolRendering @using AGUIDojoClient.Components.Demos.HumanInTheLoop @using AGUIDojoClient.Components.Demos.SharedState @using AGUIDojoClient.Components.Demos.PredictiveStateUpdates @using AGUIDojoClient.Components.Demos.ToolBasedGenerativeUI @rendermode InteractiveServer @inject DemoService DemoService @inject NavigationManager Nav @(scenario?.Title ?? "AG-UI Dojo")
@if (scenario is not null) {
@RenderScenarioDemo()

Code

Code view for @scenario.Title will be available soon.

This will show the relevant source code for this scenario.

Documentation

Documentation for @scenario.Title will be available soon.

This will include:

  • Overview of the scenario
  • Key concepts
  • How to use the demo
  • Links to related documentation
} else {

Scenario Not Found

The scenario "@ScenarioId" could not be found.

}
@code { private DemoScenario? scenario; private string currentTab = "preview"; /// /// Gets or sets the scenario ID from the route. /// [Parameter] public string ScenarioId { get; set; } = string.Empty; protected override void OnParametersSet() { scenario = DemoService.GetScenario(ScenarioId); if (scenario is null) { // Redirect to first scenario if not found DemoScenario? firstScenario = DemoService.AllScenarios.FirstOrDefault(); if (firstScenario is not null) { Nav.NavigateTo($"/microsoft-agent-framework/feature/{firstScenario.Id}", replace: true); } } } private void OnTabChanged(string tab) { currentTab = tab; } private RenderFragment RenderScenarioDemo() => builder => { if (scenario is null) { return; } // For now, we only have AgenticChatDemo implemented // Other scenarios will be added later switch (scenario.Id.ToLowerInvariant()) { case "agentic_chat": builder.OpenComponent(0); builder.AddAttribute(1, nameof(AgenticChatDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; case "backend_tool_rendering": builder.OpenComponent(0); builder.AddAttribute(1, nameof(BackendToolRenderingDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; case "human_in_the_loop": builder.OpenComponent(0); builder.AddAttribute(1, nameof(HumanInTheLoopDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; case "tool_based_generative_ui": builder.OpenComponent(0); builder.AddAttribute(1, nameof(ToolBasedGenerativeUIDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; case "agentic_generative_ui": builder.OpenComponent(0); builder.AddAttribute(1, nameof(AgenticGenerativeUIDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; case "shared_state": builder.OpenComponent(0); builder.AddAttribute(1, nameof(SharedStateDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; case "predictive_state_updates": builder.OpenComponent(0); builder.AddAttribute(1, nameof(PredictiveStateUpdatesDemo.ScenarioId), scenario.Id); builder.CloseComponent(); break; default: // Placeholder for unimplemented scenarios builder.OpenElement(0, "div"); builder.AddAttribute(1, "class", "placeholder-content"); builder.OpenElement(2, "h2"); builder.AddContent(3, scenario.Title); builder.CloseElement(); builder.OpenElement(4, "p"); builder.AddContent(5, scenario.Description); builder.CloseElement(); builder.OpenElement(6, "p"); builder.AddContent(7, "This demo will be available soon."); builder.CloseElement(); builder.CloseElement(); break; } }; }