### Basic Drag and Drop Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Drag

Demonstrates a basic drag-and-drop setup using FluentDragContainer and FluentDropZone. Customize draggable and droppable areas and handle drag events.

```csharp
<FluentDragContainer TItem="string"
                     OnDragEnd="@(e => Console.WriteLine($"{e.Source.Id} drag ended"))"
					 OnDragEnter="@(e => Console.WriteLine($"{e.Source.Id} is entered in  {e.Target.Id}"))"
					 OnDragLeave="@(e => Console.WriteLine($"{e.Source.Id} has left {e.Target.Id}"))"
					 OnDropEnd="@(e => Console.WriteLine($"{e.Source.Id} dropped in {e.Target.Id}"))">
    <FluentStack>
        <FluentDropZone Id="Item1" Draggable="true" Droppable="true">
            <div style="width: 50px; height: 50px; background-color: pink;">
                Item 1
            </div>
        </FluentDropZone>
        <FluentDropZone Id="Item2" Draggable="true" Droppable="true">
            <div style="width: 50px; height: 50px; background-color: lightgreen;">
                Item 2
            </div>
        </FluentDropZone>
    </FluentStack>
</FluentDragContainer>

```

--------------------------------

### Install DataGrid OData Adapter

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid

Install the Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter package to enable OData querying for the FluentDataGrid.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.ODataAdapter

```

--------------------------------

### Requesting Complete Examples

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Examples

Highlights the benefit of requesting complete, working code examples, including necessary sections like `@code`.

```text
✅ "Show me a complete working example including the @code section"
```

--------------------------------

### Install MCP Server using .NET Tool

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/GetStarted

Installs the MCP Server globally using the .NET tool. Use the --prerelease flag for pre-release versions.

```bash
dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer
```

```bash
dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer --prerelease
```

--------------------------------

### Install MCP Server Tool

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Security

Install the MCP server as a global tool using the official NuGet feed. Ensure you are using trusted sources for security.

```bash
# Use official NuGet feed only
dotnet tool install FluentUI.Blazor.McpServer --global

```

--------------------------------

### Show Drawer with Start Alignment

Source: https://fluentui-blazor-v5.azurewebsites.net/Drawer

Demonstrates how to show a drawer aligned to the start of the screen using `DialogService.ShowDrawerAsync` and setting `options.Alignment` to `DialogAlignment.Start`.

```csharp
var result = await DialogService.ShowDrawerAsync<Dialog.SimpleDialog>(options =>
{
    options.Alignment = DialogAlignment.Start;
});
```

--------------------------------

### Get Expected PackageReference

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/VersionCompatibility

This is an example of a query to ask an AI assistant to determine the correct `PackageReference` for your project based on the MCP server's version.

```text
What version of Fluent UI Blazor does this MCP server target?

```

--------------------------------

### Follow-up Questions Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Examples

Shows how to use follow-up questions to refine a request and explore component features progressively.

```text
User: "Show me FluentButton parameters"
AI: [provides list]
User: "Now show me an example with the Loading state"
```

--------------------------------

### Verify MCP Server Installation

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/GetStarted

Commands to verify the MCP Server installation and .NET SDK version. Ensure the 'fluentui-mcp' command is available in your PATH.

```bash
dotnet tool list -g
```

```bash
dotnet --version
```

--------------------------------

### Default Toast Setup

Source: https://fluentui-blazor-v5.azurewebsites.net/Toast

Shows the standard toast setup with default behavior and intent. Use this as a baseline for simple status feedback. By default, ResultTiming is Queued, blocking execution until the toast is queued. Set to Visible or Closed to block until the toast is visible or dismissed, respectively.

```razor
@inject INotificationService NotificationService

<FluentStack Wrap="true" HorizontalGap="12px">
    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Info))">
        Show Info
    </FluentButton>
    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Success))">
        Show Success
    </FluentButton>
    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Warning))">
        Show Warning
    </FluentButton>
    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Error))">
        Show Error
    </FluentButton>
    <FluentButton OnClick="@(() => OpenToastAsync(ToastIntent.Progress))">
        Show Progress
    </FluentButton>
</FluentStack>

@code {

    int counter = 1;

    async Task OpenToastAsync(ToastIntent intent)
    {
        var result = await NotificationService.ShowToastAsync(options =>
        {
            options.Intent = intent;
            options.Title = $"{intent} toast #{counter++}";
            options.Message = "Toasts are used to show brief messages to the user.";
            options.Subtitle = "Sent by Fluent UI Blazor";
            options.Lifetime = TimeSpan.FromSeconds(10);
            options.ResultTiming = ToastResultTiming.Closed;
            options.AllowDismiss = true;
            options.OnStatusChange = (e) =>
            {
                Console.WriteLine($
```

--------------------------------

### SplitButton Size Examples

Source: https://fluentui-blazor-v5.azurewebsites.net/Buttons/SplitButton

Demonstrates how to use the Size property to control the dimensions of the FluentSplitButton.

```APIDOC
## Size
Example  Code 
Small Menu item 1 Menu item 2 Menu item 3 Menu item 4 Medium Menu item 1 Menu item 2 Large Menu item 1 Menu item 2
```
<FluentSplitButton Size="ButtonSize.Small"
                   Title="Open menu"
                   Label="Small">
    <FluentMenuList>
        <FluentMenuItem>Menu item 1</FluentMenuItem>
        <FluentMenuItem>Menu item 2</FluentMenuItem>
        <FluentMenuItem>Menu item 3</FluentMenuItem>
        <FluentMenuItem>Menu item 4</FluentMenuItem>
    </FluentMenuList>
</FluentSplitButton>

<FluentSplitButton Size="ButtonSize.Medium"
                   Title="Open menu"
                   Label="Medium">
    <FluentMenuList>
        <FluentMenuItem>Menu item 1</FluentMenuItem>
        <FluentMenuItem>Menu item 2</FluentMenuItem>
    </FluentMenuList>
</FluentSplitButton>


<FluentSplitButton Size="ButtonSize.Large"
                   Title="Open menu"
                   Label="Large">
    <FluentMenuList>
        <FluentMenuItem>Menu item 1</FluentMenuItem>
        <FluentMenuItem>Menu item 2</FluentMenuItem>
    </FluentMenuList>
</FluentSplitButton>

```
```

--------------------------------

### Install EF Core Adapter Package

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid

Install the necessary package for integrating FluentDataGrid with EF Core. This package provides asynchronous query resolution for improved performance.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.DataGrid.EntityFrameworkAdapter

```

--------------------------------

### FluentGrid with No Breakpoints Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Grid

Demonstrates a FluentGrid layout where items adjust based on content size. If no breakpoints are defined or Xs="0" is set, items will have flex: 1 and max-width: fit-content. This example shows an item with a min-width that forces the next item to wrap.

```blazor
<FluentGrid Justify="JustifyContent.FlexEnd"
            Style="overflow: hidden; resize: horizontal; padding: 4px;">
    <FluentGridItem Style="min-width: 200px;">
        Views must be setup in the Admin Portal to use this client application hosted by my company.
    </FluentGridItem>
    <FluentGridItem Justify="JustifyContent.FlexEnd" Gap="10px">
        <FluentButton Style="height: 40px;">Setup</FluentButton>
        <FluentButton Style="height: 40px;">Documentation</FluentButton>
    </FluentGridItem>
</FluentGrid>
```

--------------------------------

### Check .NET SDK Version

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Installation

Verify that the required .NET SDK version (e.g., .NET 9.0) is installed on your system.

```bash
dotnet --version
```

--------------------------------

### Toggle Button with Start Icon

Source: https://fluentui-blazor-v5.azurewebsites.net/Buttons/ToggleButton

Add an icon to the start of the toggle button text using the `IconStart` property. This example uses a Globe icon from the Fluent UI Icons library.

```razor
<FluentToggleButton IconStart="@(new Icons.Regular.Size20.Globe())"
              Appearance="ButtonAppearance.Primary">
    Button
</FluentToggleButton>
```

--------------------------------

### Displaying All Key Details with FluentKeyCode

Source: https://fluentui-blazor-v5.azurewebsites.net/KeyCode

This example demonstrates how to capture and display comprehensive details of any key press using the FluentKeyCode component. It logs information such as the key value, code, meta keys, and more.

```cshtml
<FluentStack Wrap="true">
    <FluentKeyCode OnKeyDown="@KeyDownHandler">
        <div tabindex="0" style="width: 300px; height: 170px; @CommonStyles.NeutralBorder1 @CommonStyles.NeutralBorderShadow4" class="@Padding.All2">
            Click here and press <FluentKeyCode Id="my-any-key" tabindex="0" OnKeyDown="@KeyDownHandler" StopPropagation="true" Style="font-weight: bold;">any key</FluentKeyCode> to get the event keycode info.
        </div>
    </FluentKeyCode>

    <ul>
        <li><span>Value:</span> <code>@LastKeyCode?.Value</code></li>
        <li><span>Key:</span> <code>@LastKeyCode?.Key.ToString()</code></li>
        <li><span>Code:</span> <code>@LastKeyCode?.KeyCode</code></li>
        <li>
            <span>Meta:</span>
            @if (LastKeyCode?.ShiftKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.KeyboardShift())" Color="Color.Primary" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.KeyboardShift())" Color="Color.Default" />
            }
            @if (LastKeyCode?.CtrlKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.ControlButton())" Color="Color.Primary" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.ControlButton())" Color="Color.Default" />
            }
            @if (LastKeyCode?.AltKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.KeyCommand())" Color="Color.Primary" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.KeyCommand())" Color="Color.Default" />
            }
            @if (LastKeyCode?.MetaKey == true)
            {
                <FluentIcon Value="@(new Icons.Filled.Size20.ArrowBounce())" Color="Color.Primary" />
            }
            else
            {
                <FluentIcon Value="@(new Icons.Regular.Size20.ArrowBounce())" Color="Color.Default" />
            }
        </li>
        <li><span>Location:</span> <code>@LastKeyCode?.Location.ToString()</code></li>
        <li><span>TargetId:</span> <code>@LastKeyCode?.TargetId</code></li>
        <li><span>Repeat:</span> <code>@LastKeyCode?.Repeat</code></li>
    </ul>
</FluentStack>

<style>
    li > span {
        float: left;
        width: 70px;
        font-weight: bold;
    }
</style>

@code
{
    FluentKeyCodeEventArgs? LastKeyCode;

    void KeyDownHandler(FluentKeyCodeEventArgs e)
    {
        LastKeyCode = e;
    }
}
```

--------------------------------

### Example of Pinned Columns in DataGrid

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid/PinnedColumns

Demonstrates how to pin columns to the start and end of a Fluent UI Blazor DataGrid. Pinned columns remain visible during horizontal scrolling. Ensure columns have an explicit Width defined.

```html
<div style="overflow-x: auto;">
    <FluentDataGrid Items="@employees"

                    HeaderCellAsButtonWithMenu="true"
                    ResizableColumns="true"
                    ResizeType="DataGridResizeType.Discrete"
                    DisplayMode="DataGridDisplayMode.Grid">
        <PropertyColumn Title="ID" Property="@(e => e.Id)" Width="100px" Pin="DataGridColumnPin.Start"  Sortable="true" />
        <PropertyColumn Title="Full Name" Property="@(e => e.FullName)" Width="160px" Pin="DataGridColumnPin.Start"  Sortable="true" />
        <PropertyColumn Title="Department" Property="@(e => e.Department)" Sortable="true" />
        <PropertyColumn Title="Location" Property="@(e => e.Location)" Sortable="true" />
        <PropertyColumn Title="Start Date" Property="@(e => e.StartDate)" Sortable="true" />
        <PropertyColumn Title="Salary" Property="@(e => e.Salary)" Width="120px" Sortable="true" Align="DataGridCellAlignment.End" Pin="DataGridColumnPin.End" />
        <TemplateColumn Title="Actions" Width="120px" Pin="DataGridColumnPin.End">
            <FluentButton IconStart="@(new Icons.Regular.Size16.Edit())"   Appearance="ButtonAppearance.Subtle" Title="Edit" @onclick="@(() => selectedName = context.FullName + " (edit)")"   />
            <FluentButton IconStart="@(new Icons.Regular.Size16.Delete())" Appearance="ButtonAppearance.Subtle" Title="Delete" @onclick="@(() => selectedName = context.FullName + " (delete)")" />
        </TemplateColumn>
    </FluentDataGrid>
</div>

@if (!string.IsNullOrEmpty(selectedName))
{
    <p style="margin-top: 1rem;">Last action: <strong>@selectedName</strong></p>
}
```

```csharp
@code {
    string selectedName = string.Empty;

    record Employee(int Id, string FullName, string Department, string Location, string StartDate, string Salary);

    IQueryable<Employee> employees = new[] 
    {
        new Employee(1, "Denis Voituron", "Engineering", "Brussels", "2019-03-01", "$120,000"),
        new Employee(2, "Vincent Baaij", "Engineering", "Amsterdam", "2018-07-15", "$130,000"),
        new Employee(3, "Harry Mars", "Executive", "Medina", "1975-04-04", "$1,000,000"),
        new Employee(4, "Bruno Styles", "Executive", "Bellevue", "1992-02-17", "$950,000"),
        new Employee(5, "Taylor Eilish", "Developer Relations", "Portland", "2007-01-22", "$200,000"),
        new Employee(6, "Billie Swift", "Languages", "Seattle", "2005-08-01", "$180,000"),
        new Employee(7, "Jacky Bond", "Framework", "Seattle", "2010-06-14", "$190,000"),
        new Employee(8, "James Chan", "Framework", "Cambridge", "2009-03-30", "$185,000"),
        new Employee(9, "John Cage", "Community", "San Diego", "2011-11-01", "$160,000"),
        new Employee(10, "Nick Travolta", "Engineering", "New York", "2016-05-20", "$155,000"),
    }.AsQueryable();
}
```

--------------------------------

### Indeterminate Progress Toast

Source: https://fluentui-blazor-v5.azurewebsites.net/Toast

Shows an indeterminate progress toast for operations with unknown completion times. The toast is kept open until programmatically closed using its instance. This example includes buttons to start and finish the progress indication.

```razor
@inject INotificationService NotificationService

<FluentStack Wrap="true" HorizontalGap="12px">
    <FluentButton OnClick="@StartProgressAsync"
                  Disabled="@InProgress">
        Start Progress
    </FluentButton>
    <FluentButton OnClick="@FinishProgressAsync"
                  Disabled="@(ProgressToast is null)">
        Finish Progress
    </FluentButton>
</FluentStack>

@code {

    IToastInstance? ProgressToast;
    bool InProgress = false;

    // Show a Toast and keep a reference to the instance.
    async Task StartProgressAsync()
    {
        InProgress = true;

        _ = NotificationService.ShowToastAsync(options =>
        {
            options.Id = "my-progress-toast";
            options.Intent = ToastIntent.Progress;
            options.Title = "Task in progress";
            options.Lifetime = TimeSpan.Zero; // Keep the toast open until closed programmatically
            options.Message = "No idea when this will be finished...";
            options.AllowDismiss = false;
            options.OnStatusChange = (e) =>
            {
                ProgressToast = e.Instance;
            };
        });

        // Another way to get the instance of the Toast
        // ProgressToast = NotificationService.GetToastInstance("my-progress-toast");
    }

    // Close the Toast instance.
    async Task FinishProgressAsync()
    {
        if (ProgressToast is not null)
        {
            await ProgressToast.CloseAsync();
            ProgressToast = null;
        }

        InProgress = false;
    }
}



```

--------------------------------

### FluentText Alignment Options

Source: https://fluentui-blazor-v5.azurewebsites.net/Text

Demonstrates text alignment within a container using the 'Align' property (Start, End, Center, Justify). The example uses a FluentStack to manage vertical layout and applies borders for visual reference.

```razor
<FluentStack Orientation="Orientation.Vertical"
             VerticalGap="20px"
             Width="320px"
             Style="align-items: normal; border-left: 1px solid #000; border-right: 1px solid #000;">
    <FluentText Block="true" Align="TextAlign.Start">
       Start aligned Block="true".
    </FluentText>
    <FluentText Block="true" Align="TextAlign.End">
       End aligned Block="true".
    </FluentText>
    <FluentText Block="true" Align="TextAlign.Center">
       Center aligned Block="true".
    </FluentText>
    <FluentText Block="true" Align="TextAlign.Justify">
            Justify aligned Block="true" text stretches wrapped lines to meet container
            edges.
    </FluentText>
</FluentStack>
```

--------------------------------

### Full Dialog Example with Custom Actions and Parameters

Source: https://fluentui-blazor-v5.azurewebsites.net/Dialog

Demonstrates opening a dialog with modal behavior, specific alignment, visible header actions (Close, Info), custom click handlers, an additional custom action, and passing parameters to the dialog component.

```razor
@inject IDialogService DialogService

<FluentButton OnClick="@OpenDialogAsync"
              Appearance="ButtonAppearance.Primary">
    Open Dialog
</FluentButton>

<hr />
<div>
    John: @John
</div>

@code
{
    private Dialog.PersonDetails John = new() { Age = "20" };

    private async Task OpenDialogAsync()
    {
        var result = await DialogService.ShowDialogAsync<Dialog.SimpleDialog>(options =>
        {
            options.Modal = true;
            options.Alignment = DialogAlignment.End;

            options.Header.CloseAction.Visible = true;

            options.Header.InfoAction.Visible = true;
            options.Header.InfoAction.OnClickAsync = async (dialog) => { await Task.CompletedTask; Console.WriteLine("Info action clicked"); };
            
            options.Header.AddAction(action =>
            {
                action.Icon = new Icons.Regular.Size20.Settings();
                action.Label = "Settings";
                action.OnClickAsync = async (dialog) => { await Task.CompletedTask; Console.WriteLine("Settings action clicked"); };
            });

            options.Parameters.Add(nameof(Dialog.SimpleDialog.Name), "John"); // Simple type
            options.Parameters.Add(nameof(Dialog.SimpleDialog.Person), John); // Updatable object
        });

        if (result.Cancelled)
        {
            Console.WriteLine($"Dialog Canceled: {result.Value}");
        }
        else
        {
            Console.WriteLine($"Dialog Saved: {result.Value}");
        }
    }
}

```

--------------------------------

### Customize Fluent Menu Item with Slots

Source: https://fluentui-blazor-v5.azurewebsites.net/Menu

Use slots directly for advanced customization of Fluent menu items when component parameters like IconIndicator, IconStart, IconEnd, and IconSubmenu are not sufficient. This example demonstrates adding custom content to indicator, start, end, and submenu-glyph slots.

```blazor
<FluentMenuList>
    <FluentMenuItem Role="MenuItemRole.Checkbox">
        <ChildContent>
            Item 1
            <span slot="@FluentSlot.Indicator">☑️</span>
            <span slot="@FluentSlot.Start">💙</span>
            <span slot="@FluentSlot.End">Ctrl+S</span>
            <span slot="@FluentSlot.SubMenuGlyph">→</span>
        </ChildContent>
        <MenuItems>
            <FluentMenuItem>Submenu 1</FluentMenuItem>
        </MenuItems>
    </FluentMenuItem>
</FluentMenuList>
```

--------------------------------

### Basic FluentWizard Implementation

Source: https://fluentui-blazor-v5.azurewebsites.net/Wizard

Demonstrates the basic structure of a FluentWizard with multiple FluentWizardStep components. Includes configuration for step numbering, borders, and an OnFinish event handler.

```blazor
<FluentWizard DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)"
              Border="WizardBorder.Outside"
			  OnFinish="@OnFinished">
    <Steps>
        <FluentWizardStep Label="Intro"
                          OnChange="@OnStepChange">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nisi eget dolor semper
            luctus vitae a nulla. Cras semper eros sed lacinia tincidunt. Mauris dignissim ullamcorper dolor,
            ut blandit dui ullamcorper faucibus. Interdum et malesuada fames ac ante ipsum.
        </FluentWizardStep>
        <FluentWizardStep Label="Get started"
                          Summary="Begin the tasks"
                          OnChange="@OnStepChange">
            Maecenas sed justo ac sapien venenatis ullamcorper. Sed maximus nunc non venenatis euismod.
            Fusce vel porta ex, imperdiet molestie nisl. Vestibulum eu ultricies mauris, eget aliquam quam.
        </FluentWizardStep>
        <FluentWizardStep Disabled="true"
                          Label="Disabled step"
                          Summary="This step is disabled"
                          OnChange="@OnStepChange">
            Nunc dignissim tortor eget lacus porta tristique. Nunc in posuere dui. Cras ligula ex,
            ullamcorper in gravida in, euismod vitae purus. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Aliquam at velit leo. Suspendisse potenti. Cras dictum eu augue in laoreet.
        </FluentWizardStep>
        <FluentWizardStep Label="Set budget"
                          Summary="Identify the best price"
                          IconPrevious="@(new Icons.Filled.Size20.Star())"
                          IconCurrent="@(new Icons.Filled.Size20.StarEmphasis())"
                          IconNext="@(new Icons.Regular.Size20.Star())"
                          DisplayStepNumber="false"
                          OnChange="@OnStepChange">
            Phasellus quis augue convallis, congue velit ac, aliquam ex. In egestas porttitor massa
            aliquet porttitor. Donec bibendum faucibus urna vitae elementum. Phasellus vitae efficitur
            turpis, eget molestie ipsum.
        </FluentWizardStep>
        <FluentWizardStep Label="Summary"
                          OnChange="@OnStepChange">
            Ut iaculis sed magna efficitur tempor. Vestibulum est erat, imperdiet in diam ac,
            aliquam tempus sapien. Nam rutrum mi at enim mattis, non mollis diam molestie.
            Cras sodales dui libero, sit amet cursus sapien elementum ac. Nulla euismod nisi sem.
        </FluentWizardStep>
    </Steps>
</FluentWizard>

@code
{
	void OnStepChange(FluentWizardStepChangeEventArgs e)
	{
		Console.WriteLine("Step changed to {0}", e.TargetIndex);
	}

	void OnFinished()
	{
		Console.WriteLine("Wizard has been finished");
	}
}

```

--------------------------------

### Programmatically Expand/Collapse Accordion Items

Source: https://fluentui-blazor-v5.azurewebsites.net/Accordion

Use the @ref attribute to get a reference to the FluentAccordion component and call ExpandItemAsync or CollapseItemAsync with the item's ID. Ensure each FluentAccordionItem has a unique Id. The example also shows how to bind to the Expanded property of an item and handle item change events.

```csharp
<FluentStack Orientation="Orientation.Vertical">
    <FluentStack HorizontalGap="10">
        <FluentButton OnClick="ExpandItem2Async">Expand item 2</FluentButton>
        <FluentButton OnClick="CollapseItem4Async">Collapse item 4</FluentButton>
    </FluentStack>
    <FluentAccordion @ref="accordion" OnAccordionItemChange="HandleOnAccordionItemChange">
        <FluentAccordionItem Id="item1" Header="Panel one">
            Panel one content
        </FluentAccordionItem>
        <FluentAccordionItem Id="item2" Header="Panel two">
            Panel two content
        </FluentAccordionItem>
        <FluentAccordionItem Id="item3" Expanded="true" Header="Panel three" Disabled="true">
            Panel three content
        </FluentAccordionItem>
        <FluentAccordionItem Id="item4" @bind-Expanded="@expanded" Header="Panel four">
            Panel four content
        </FluentAccordionItem>
    </FluentAccordion>
</FluentStack>
<p>
    Last changed accordion item: @headerText<br />
    Expanded: @changed?.Expanded
</p>


@code {
    FluentAccordion? accordion;
    FluentAccordionItem? changed;
    string? headerText;
    bool expanded = true;

    private async Task ExpandItem2Async()
    {
        if (accordion is not null)
        {
            await accordion.ExpandItemAsync("item2");
        }
    }

    private async Task CollapseItem4Async()
    {
        if (accordion is not null)
        {
            await accordion.CollapseItemAsync("item4");
        }
    }

    private void HandleOnAccordionItemChange(AccordionItemEventArgs args)
    {
        changed = args.Item;
        headerText = args.HeaderText;
    }
}

```

--------------------------------

### Basic FluentSwitch Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Switch

Demonstrates a basic FluentSwitch component bound to a boolean value. Use this for simple on/off or show/hide scenarios.

```html
<FluentSwitch @bind-Value="@value" Label="This is a switch" />
<div>Switch value: @value</div>

@code {
    bool value = false;
}

```

--------------------------------

### Verify Global .NET Tool Installation

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Installation

Use this command to check if the fluentui-mcp tool is installed globally on your system.

```bash
dotnet tool list -g
```

--------------------------------

### Install Fluent UI Blazor NuGet Package

Source: https://fluentui-blazor-v5.azurewebsites.net/installation

Add the Microsoft.FluentUI.AspNetCore.Components package to your project using the .NET CLI. Use the --prerelease flag for pre-release versions.

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components --prerelease
```

```bash
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons
```

--------------------------------

### Specific vs. Vague Prompt Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/Examples

Illustrates the difference between a specific and a vague prompt for creating a UI component. Specific prompts yield better results.

```text
❌ "Make a table"
✅ "Create a FluentDataGrid with sortable columns for Name and Date, 
   and pagination with 20 items per page"
```

--------------------------------

### Side-by-Side Popover Examples

Source: https://fluentui-blazor-v5.azurewebsites.net/Popover

Shows two Popover components side-by-side, each anchored to its own button. This example illustrates controlling multiple popovers independently.

```html
<FluentStack>
    <div>
        <FluentButton Id="LeftButton"
                      OnClick="@(e => LeftOpened = !LeftOpened)">Open Popover</FluentButton>
        <FluentPopover AnchorId="LeftButton"
                       @bind-Opened="@LeftOpened">
            <p>Example content for the</p>
            <p>Popover component</p>
        </FluentPopover>
    </div>

    <FluentSpacer />

    <div>
        <FluentButton Id="RightButton"
                      OnClick="@(e => RightOpened = !RightOpened)">Open Popover</FluentButton>
        <FluentPopover AnchorId="RightButton"
                       @bind-Opened="@RightOpened">
            <p>Example content for the</p>
            <p>Popover component</p>
        </FluentPopover>
    </div>
</FluentStack>

@code
{
    bool LeftOpened = false;
    bool RightOpened = false;
}

```

--------------------------------

### Open and Handle Customized Dialog

Source: https://fluentui-blazor-v5.azurewebsites.net/Dialog

This example demonstrates opening a customized dialog and handling its result. It shows how to pass simple types and updatable objects as parameters, and how to react to state changes and dialog closure.

```csharp
@inject IDialogService DialogService

<FluentButton OnClick="@OpenDialogAsync" Appearance="ButtonAppearance.Primary">Open Dialog</FluentButton>

<hr />
<div>
    John: @John
</div>

@code
{
    private Dialog.PersonDetails John = new() { Age = "20" };

    private async Task OpenDialogAsync()
    {
        var result = await DialogService.ShowDialogAsync<Dialog.CustomizedDialog>(options =>
        {
            options.Header.Title = "Dialog Title";
            options.Header.CloseAction.Visible = true;

            options.Parameters.Add(nameof(Dialog.CustomizedDialog.Name), "John");  // Simple type
            options.Parameters.Add(nameof(Dialog.CustomizedDialog.Person), John);  // Updatable object

            options.OnStateChange = (e) =>
            {
                Console.WriteLine($"State changed: {e.State}");
            };
        });
        
        if (result.Cancelled)
        {
            Console.WriteLine($"Dialog Canceled: {result.Value}");
        }
        else
        {
            Console.WriteLine($"Dialog Saved: {result.Value}");
        }
    }
}
```

--------------------------------

### Example PackageReference

Source: https://fluentui-blazor-v5.azurewebsites.net/Mcp/VersionCompatibility

This is the expected `PackageReference` XML that should be used in your project's `.csproj` file to ensure compatibility with the MCP server.

```xml
<PackageReference Include="Microsoft.FluentUI.AspNetCore.Components" Version="5.0.0-rc.1-26049.2" />

```

--------------------------------

### DataGrid with EmptyContent Example

Source: https://fluentui-blazor-v5.azurewebsites.net/DataGrid/LoadingAndEmptyContent

This example shows how to define custom content to display when the DataGrid has no items. It includes a FluentStack with an icon and text, and a switch to clear data.

```blazor
<div style="height: 400px; overflow-y: scroll;">
    <FluentDataGrid @ref="grid" Items=@items GridTemplateColumns="1fr 1fr 1fr 1fr">
        <ChildContent>
            <PropertyColumn Property="@(c => c.Item1)" Sortable="true" />
            <PropertyColumn Property="@(c => c.Item2)" />
            <PropertyColumn Property="@(c => c.Item3)" Align="DataGridCellAlignment.Center" />
            <PropertyColumn Property="@(c => c.Item4)" Align="DataGridCellAlignment.End" />
        </ChildContent>
        <EmptyContent>
            <FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" HorizontalAlignment="HorizontalAlignment.Center" HorizontalGap="10">
                <FluentIcon Value="@(new Icons.Filled.Size24.Crown())" Color="@Color.Primary" />
                <div>Nothing to see here. Carry on!</div>
            </FluentStack>
        </EmptyContent>
    </FluentDataGrid>
</div>
<FluentStack Orientation="Orientation.Horizontal" VerticalAlignment="VerticalAlignment.Center" HorizontalGap="10">
    <FluentSwitch @ref="_clearToggle"
                  @bind-Value="@_clearItems"
                  @bind-Value:after="ToggleItems"
                  Label="@switchLabel">
    </FluentSwitch>
    <FluentButton OnClick="SimulateDataLoading">Simulate data loading</FluentButton>
</FluentStack>


@code {
    FluentDataGrid<SampleGridData>? grid;
    FluentSwitch? _clearToggle;
    string switchLabel = "Clear data";

    bool _clearItems = false;

    public record SampleGridData(string Item1, string Item2, string Item3, string Item4);
    IQueryable<SampleGridData>? items = Enumerable.Empty<SampleGridData>().AsQueryable();

    private IQueryable<SampleGridData> GenerateSampleGridData(int size)
    {
        SampleGridData[] data = new SampleGridData[size];

        for (int i = 0; i < size; i++)
        {
            data[i] = new SampleGridData($"This {i}-1", $"is {i}-2", $"some {i}-3", $"data {i}-4");
        }
        return data.AsQueryable();
    }

    protected override void OnInitialized()
    {
        items = GenerateSampleGridData(100);
    }

    private async Task SimulateDataLoading()
    {
        _clearItems = false;

        grid?.SetLoadingState(true);
        items = null;

        await Task.Delay(1500);

        items = GenerateSampleGridData(100);
        grid?.SetLoadingState(false);
    }

    private void ToggleItems()
    {
        if (_clearItems)
        {
            items = null;
            switchLabel = "Restore data";
        }
        else
        {
            items = GenerateSampleGridData(100);
            switchLabel = "Clear data";
        }
    }
}

```

--------------------------------

### Simple AppBar Example

Source: https://fluentui-blazor-v5.azurewebsites.net/AppBar

This snippet demonstrates a basic Fluent UI Blazor AppBar with various configuration options. It includes switches to control search visibility, orientation (horizontal/vertical), and bar hiding. The AppBar contains multiple items with icons, text, and counts.

```csharp
@{
	string stylevalue = $"background-color: var(--colorNeutralBackground5); overflow: hidden; resize: {(_vertical ? "vertical; width: 86px; height: 320px;" : "horizontal;width: 440px; height: 78px;")}  padding: 10px;";
}
<FluentStack Orientation="Orientation.Vertical" Style="height: 100%;">
	<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="10">
		<FluentSwitch @bind-Value="_showSearch" Label="Show search in popover" />
		<FluentSwitch @bind-Value="_vertical" @bind-Value:after="@HandleOrientationChanged" Label="@($"Show {(_vertical ? "Vertical" : "Horizontal")}")" />
        <FluentSwitch @bind-Value="_hideBar" @bind-Value:after="@HandleHideBarChanged" Label="@($"Bar {(_hideBar ? "hidden" : "shown")}")" />
	</FluentStack>
	<div style="@stylevalue">
		<FluentAppBar Orientation="@(_vertical? Orientation.Vertical: Orientation.Horizontal)"
        PopoverVisibilityChanged="HandlePopover"
        PopoverShowSearch="@_showSearch"
        HideActiveIndicator="@_hideBar">

			<FluentAppBarItem Href="/AppBarDefault"
							  Match="NavLinkMatch.All"
							  IconRest="ResourcesIcon()"
							  IconActive="ResourcesIcon(active: true)"
							  Text="Resources" />
			<FluentAppBarItem Href="/AppBar"
							  IconRest="ConsoleLogsIcon()"
							  IconActive="ConsoleLogsIcon(active: true)"
							  Text="Console Logs"
							  Count="2" />
			<FluentAppBarItem Href="/StructuredLogs"
							  IconRest="StructuredLogsIcon()"
							  IconActive="StructuredLogsIcon(active: true)"
							  Text="Logs"
							  Tooltip="Structured Logs"
							  Count="4" />
			<FluentAppBarItem Href="/Traces"
							  IconRest="TracesIcon()"
							  IconActive="TracesIcon(active: true)"
							  Text="Traces" />
			<FluentAppBarItem Href="/Metrics"
							  IconRest="MetricsIcon()"
							  IconActive="MetricsIcon(active: true)"
							  Text="Metrics" />
			<FluentAppBarItem Href="/AppBarPage"
							  IconRest="ResourcesIcon()"
							  IconActive="ResourcesIcon(active: true)"
							  Text="Resources 2" />
			<FluentAppBarItem Href="/AppBar"
							  IconRest="ConsoleLogsIcon()"
							  IconActive="ConsoleLogsIcon(active: true)"
							  Text="Console Logs 2" />
			<FluentAppBarItem Href="/StructuredLogs"
							  IconRest="StructuredLogsIcon()"
							  IconActive="StructuredLogsIcon(active: true)"
							  Text="Structured Logs 2" />
			<FluentAppBarItem Href="/Traces"
							  IconRest="TracesIcon()"
							  IconActive="TracesIcon(active: true)"
							  Text="Traces 2" />
			<FluentAppBarItem Href="/Metrics"
							  IconRest="MetricsIcon()"
							  IconActive="MetricsIcon(active: true)"
							  Text="Metrics 2" />
			<FluentAppBarItem Href="/AppBarPage"
							  IconRest="ResourcesIcon()"
							  IconActive="ResourcesIcon(active: true)"
							  Text="Resources 3" />
			<FluentAppBarItem Href="/AppBar"
							  IconRest="ConsoleLogsIcon()"
							  IconActive="ConsoleLogsIcon(active: true)"
							  Text="Console Logs 3" />
			<FluentAppBarItem Href="/StructuredLogs"
							  IconRest="StructuredLogsIcon()"
							  IconActive="StructuredLogsIcon(active: true)"
							  Text="Structured Logs 3" />
			<FluentAppBarItem Href="/Traces"
							  IconRest="TracesIcon()"
							  IconActive="TracesIcon(active: true)"
							  Text="Traces 3" />
			<FluentAppBarItem Href="/Metrics"
							  IconRest="MetricsIcon()"
							  IconActive="MetricsIcon(active: true)"
							  Text="Metrics 3" />
		</FluentAppBar>
	</div>
</FluentStack>

@code {
	private bool _vertical = true;
	private bool _showSearch = true;
    private bool _hideBar = false;

	private static Icon ResourcesIcon(bool active = false) =>
		active ? new Icons.Filled.Size24.AppFolder() 
			   : new Icons.Regular.Size24.AppFolder();

	private static Icon ConsoleLogsIcon(bool active = false) =>
		active ? new Icons.Filled.Size24.SlideText() 
			   : new Icons.Regular.Size24.SlideText();

	private static Icon StructuredLogsIcon(bool active = false) =>
		active ? new Icons.Filled.Size24.SlideTextSparkle() 
			   : new Icons.Regular.Size24.SlideTextSparkle();

	private static Icon TracesIcon(bool active = false) =>
		active ? new Icons.Filled.Size24.GanttChart() 
			   : new Icons.Regular.Size24.GanttChart();

	private static Icon MetricsIcon(bool active = false) =>
		active ? new Icons.Filled.Size24.ChartMultiple() 
			   : new Icons.Regular.Size24.ChartMultiple();

	private void HandlePopover(bool visible) => Console.WriteLine($"Popover visibility changed to {visible}");

	private void HandleOrientationChanged()
	{
		Console.WriteLine($"Orientation changed to {(_vertical ? "vertical" : "horizontal")}");
	}

    private void HandleHideBarChanged()
    {
        Console.WriteLine($"@(_hideBar ? "Hiding" : "Showing") active bar");
    }
}
```

--------------------------------

### FluentColorPickerInput Example with View and Text Input Toggling

Source: https://fluentui-blazor-v5.azurewebsites.net/ColorPicker

Demonstrates how to use FluentColorPickerInput, allowing runtime switching between different picker views and toggling the visibility of the text input.

```cshtml
<FluentStack HorizontalGap="24px"
             VerticalAlignment="VerticalAlignment.Center"
             Wrap="true">

    <FluentSelect Label="View"
                  Items="@(Enum.GetValues<ColorPickerView>())"
                  @bind-Value="SelectedView" />

    <FluentSwitch Label="Hide Text Input"
                  LabelPosition="@LabelPosition.Above"
                  @bind-Value="HideTextInput" />
</FluentStack>

<FluentColorPickerInput @bind-Value="SelectedColor"
                        Label="Color"
                        Placeholder="#000000"
                        View="@SelectedView"
                        HideTextInput="@HideTextInput" />

<div>
    <FluentText>Selected Color: @SelectedColor</FluentText>
</div>

@code
{
    string? SelectedColor = "#FF0000";
    ColorPickerView SelectedView = ColorPickerView.SwatchPalette;
    bool HideTextInput = false;
}

```

--------------------------------

### CompoundButton with Long Text Example

Source: https://fluentui-blazor-v5.azurewebsites.net/Buttons/CompoundButton

Demonstrates how to use FluentCompoundButton with both short and long text labels, including a description. The example also shows how to apply a maximum width to a button.

```html
<style>
    .max-width {
        width: 280px;
    }
</style>

<FluentStack HorizontalGap="10" Wrap="true">
    <FluentCompoundButton Label="Short text">
        <Description>Description content</Description>
    </FluentCompoundButton>
    <FluentCompoundButton Class="max-width">
        <ChildContent>
            Long text wraps after it hits the max width of the component
        </ChildContent>
        <Description>Description content</Description>
    </FluentCompoundButton>
</FluentStack>
```

--------------------------------

### Basic FluentNav with Various Item Types

Source: https://fluentui-blazor-v5.azurewebsites.net/Nav

Demonstrates the structure of a FluentNav component, including NavItems with Href and OnClick handlers, NavCategories, NavSectionHeaders, and a FluentDivider. This example shows how to create a hierarchical navigation structure.

```csharp
@using Microsoft.FluentUI.AspNetCore.Components

@using Microsoft.FluentUI.AspNetCore.Components.Extensions

@inject IDialogService DialogService

<FluentStack Orientation="Orientation.Horizontal" HorizontalGap="15">
    <FluentNav @ref="@nav"
               UseIcons="@UseIcons"
               UseSingleExpanded="@(!UseMultipleExpanded)"
			   OnItemClick="@(e => Console.WriteLine($"NavItem clicked: '{e.IconRest?.Name}'."))"
               Width="260px"
               Density="@Density">

        <!-- Navigation Items -->
        <FluentNavItem Href="/Nav" IconRest="@((new Icons.Regular.Size20.Board().WithColor(Color.Error)))" IconActive="@((new Icons.Filled.Size20.Board().WithColor(Color.Success)))">
            Dashboard
        </FluentNavItem>
        <FluentNavItem OnClick="@ShowInformationAsync" IconRest="@((new Icons.Regular.Size20.MegaphoneLoud()))" IconActive="@((new Icons.Filled.Size20.MegaphoneLoud()))">
            Announcements
        </FluentNavItem>
        <FluentNavItem Disabled="true" Href="@FluentUIBlazor_Url">Employee Spotlight</FluentNavItem>
        <FluentNavItem OnClick="@ShowInformationAsync" IconRest="@((new Icons.Regular.Size20.PersonSearch()))" IconActive="@((new Icons.Filled.Size20.PersonSearch()))">
            Profile Search
        </FluentNavItem>
        <FluentNavItem Href="@FluentUIBlazor_Url" IconRest="@((new Icons.Regular.Size20.PersonMoney()))" IconActive="@((new Icons.Filled.Size20.PersonMoney()))">
            Performance Reviews
        </FluentNavItem>

        <!-- Employee Management -->
        <FluentNavSectionHeader Title="Employee Management" />

        <FluentNavCategory Title="Job Postings" IconRest="@((new Icons.Regular.Size20.NotePin().WithColor(Color.Error)))" IconActive="@((new Icons.Filled.Size20.NotePin().WithColor(Color.Success)))">
            <FluentNavItem OnClick="@ShowInformationAsync">Openings</FluentNavItem>
            <FluentNavItem OnClick="@ShowInformationAsync">Submissions</FluentNavItem>
        </FluentNavCategory>

        <FluentNavItem Href="@FluentUIBlazor_Url" IconRest="@((new Icons.Regular.Size20.People()))" IconActive="@((new Icons.Filled.Size20.People()))">
            Interviews
        </FluentNavItem>

        <!-- Benefits -->
        <FluentNavSectionHeader Title="Benefits" />

        <FluentNavItem Href="@FluentUIBlazor_Url" IconRest="@((new Icons.Regular.Size20.HeartPulse()))" IconActive="@((new Icons.Filled.Size20.HeartPulse()))">
            Health Plans
        </FluentNavItem>

        <FluentNavCategory Id="retirement" Title="Retirement" IconRest="@((new Icons.Regular.Size20.Person()))" IconActive="@((new Icons.Filled.Size20.Person()))">
            <FluentNavItem>
                Plan Information
            </FluentNavItem>
            <FluentNavItem>
                Fund Performance
            </FluentNavItem>
        </FluentNavCategory>

        <!-- Divider -->
        <FluentDivider />

        <!-- Training Programs -->
        <FluentNavItem Href="@FluentUIBlazor_Url" IconRest="@((new Icons.Regular.Size20.BoxMultiple()))" IconActive="@((new Icons.Filled.Size20.BoxMultiple()))">
            Training Programs
        </FluentNavItem>

        <FluentNavCategory Title="Career Development" IconRest="@((new Icons.Regular.Size20.PeopleStar()))" IconActive="@((new Icons.Filled.Size20.PeopleStar()))">
            <FluentNavItem>Openings</FluentNavItem>
            <FluentNavItem>Submissions</FluentNavItem>
        </FluentNavCategory>

```