fluentui-blazor plugin: GitHub Copilot setup and guide

Q: How do I install fluentui-blazor in GitHub Copilot?

Run `copilot plugin install fluentui-blazor@awesome-copilot`. In Claude Code, run `/plugin marketplace add github/awesome-copilot` followed by `/plugin install fluentui-blazor@awesome-copilot`.

Q: What are the prerequisites for running fluentui-blazor?

You need the .NET 10 SDK or later with `dnx` available on your `PATH`. The plugin uses `dnx` to run the MCP server, downloading the package from nuget.org on its first launch.

What fluentui-blazor does

The plugin bundles the fluentui-blazor skill with the official Microsoft.FluentUI.AspNetCore.McpServer NuGet package. The skill handles structural conventions that models frequently confuse. It guides mandatory provider setups, dialog patterns via IDialogService, design tokens, and correct service lifetimes.

The MCP server runs locally via dnx and inspects over 142 components directly. Instead of guessing parameters or enums, the agent queries component details, icon names, and documentation topics. It also provides tools to compare library versions and generate v4 to v5 migration steps.

You need the .NET 10 SDK or later with dnx on your PATH. This plugin is essential when building Blazor apps with Fluent UI, because it stops the model from hallucinating outdated API parameters.

What it helps with

build a FluentDataGrid with sorting and pagination
look up strongly-typed Fluent UI icon names and usages
upgrade pages from Fluent UI Blazor v4 to v5
configure Blazor service lifetimes and mandatory providers

Example prompts for the agent

Add a FluentDataGrid of orders with sorting and pagination to my Blazor app.
Which Fluent icon should I use for a "save draft" button, and how do I reference it?
Check what my project is on today, then walk me through migrating this page from Fluent UI Blazor v4 to v5.

How to install fluentui-blazor

Command from the source

copilot plugin install fluentui-blazor@awesome-copilot

From the same set554

The whole set →

git-commit official github This skill reviews Git changes, stages related files, and creates Conventional Commits. Use it when you want an agent to make one commit or split work into separate commits. GitHub Copilot 47,165installs excalidraw-diagram-generator official github Turn a plain-language description into an Excalidraw diagram. Useful for mapping processes, system structure, and relationships between entities. GitHub Copilot 31,639installs multi-stage-dockerfile official github This skill guides GitHub Copilot in writing multi-stage Dockerfiles for different languages and frameworks. Use it when the final runtime image should contain fewer build dependencies. GitHub Copilot 29,688installs documentation-writer official github Skill that turns the agent into a technical writer following the Diátaxis framework: tutorials, how-to guides, reference, and explanation. Proposes structure before writing. GitHub Copilot 27,757installs prd official github Turns a feature idea into a structured PRD with user stories, technical requirements, and risks. Use it when planning a software feature or an AI-powered one. GitHub Copilot 24,035installs refactor official github This skill reshapes existing code without changing its external behavior. Use it for gradual cleanup of large functions, duplication, weak types, and code smells. GitHub Copilot 22,321installs java-springboot official github Gives GitHub Copilot Spring Boot development practices, from project layout to tests and security. Use it when writing or reviewing Java application code. GitHub Copilot 21,272installs create-readme official github This skill reviews a project and creates a structured README.md. Use it when the repository needs clear documentation based on its actual files and code. GitHub Copilot 19,081installs

Questions about fluentui-blazor

How do I install fluentui-blazor in GitHub Copilot?

Run copilot plugin install fluentui-blazor@awesome-copilot. In Claude Code, run /plugin marketplace add github/awesome-copilot followed by /plugin install fluentui-blazor@awesome-copilot.

Why does this plugin bundle both a skill and an MCP server?

The skill encodes architectural patterns like provider hierarchies and IDialogService setups. The MCP server supplies exact parameter names and enum values across 142+ components from package documentation.

What are the prerequisites for running fluentui-blazor?

You need the .NET 10 SDK or later with dnx available on your PATH. The plugin uses dnx to run the MCP server, downloading the package from nuget.org on its first launch.

Source text

fluentui-blazor · MIT

# Fluent UI Blazor Plugin

Everything you need to build Blazor applications with the [Microsoft Fluent UI Blazor](https://www.fluentui-blazor.net) component library, in one install: the `fluentui-blazor` skill for correct usage patterns, and the official Fluent UI Blazor MCP server for live, version-accurate lookup of components, enums, icons, and documentation.

## Installation

```bash
copilot plugin install fluentui-blazor@awesome-copilot
```

## Prerequisites

- The [.NET 10 SDK](https://dotnet.microsoft.com/download) or later must be installed and `dnx` available on your `PATH`.
- The plugin starts its bundled MCP server by running `dnx Microsoft.FluentUI.AspNetCore.McpServer`. The first launch downloads the package from nuget.org.
- The MCP server and the component library are published with the same version number, and the server documents the version it was built against. If your project references a different version, ask the agent to run `check_project_version` — mismatched versions produce documentation that does not match your code.

## What's Included

### Skills

| Skill | Description |
|-------|-------------|
| `fluentui-blazor` | Guide for using the `Microsoft.FluentUI.AspNetCore.Components` package: mandatory providers, service registration and lifetimes, strongly-typed icons, the `Items`/`OptionText`/`OptionValue` list binding model, the `IDialogService` pattern, toasts, design tokens and theming, and form components. Includes reference files on setup, layout and navigation, data grid, and theming. |

### MCP server

This plugin includes the `fluent-ui-blazor` MCP server configured in [`./mcp.json`](./mcp.json), published on NuGet as [`Microsoft.FluentUI.AspNetCore.McpServer`](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.McpServer). If the .NET SDK is unavailable, MCP startup will fail.

It gives the agent authoritative, version-aware answers instead of guesses:

| Capability | Tools |
|------------|-------|
| Components | `list_components`, `search_components`, `get_component_details`, `list_categories` |
| Enums | `list_enums`, `get_enum_values`, `get_component_enums` |
| Icons | `search_icons`, `list_all_icon_names`, `get_icon_details`, `get_icon_usage` |
| Documentation | `list_documentation`, `search_documentation`, `get_documentation_topic` |
| Versions | `get_version_info`, `check_project_version` |
| v4 → v5 migration | `get_migration_overview`, `get_migration_guide`, `list_component_migrations`, `get_component_migration` |

### Why the skill and the MCP server together

They cover different failure modes, and each is weaker alone:

- The **skill** encodes the patterns that models get wrong from training data — the provider components that fail silently when missing, `ServiceLifetime.Transient` throwing, `FluentSelect` not behaving like `InputSelect`, design tokens needing `OnAfterRenderAsync`. This is judgement, not lookup.
- The **MCP server** supplies the facts that go stale — exact parameter names, enum values, the 142+ component surface, and the icon catalog — looked up in documentation generated at package build time rather than recalled from training data. It serves the library version it was built against, which is why matching versions matters (see Prerequisites).

Installing them as one plugin means a single `copilot plugin install` gets a working Fluent UI Blazor setup, instead of a skill that names components the agent then has to invent parameters for.

## Example prompts

```text
Add a FluentDataGrid of orders with sorting and pagination to my Blazor app.
```

```text
Which Fluent icon should I use for a "save draft" button, and how do I reference it?
```

```text
Check what my project is on today, then walk me through migrating this page from Fluent UI Blazor v4 to v5.
```

## Source

This plugin is part of [Awesome Copilot](https://github.com/github/awesome-copilot), a community-driven collection of GitHub Copilot extensions.

The bundled MCP server is maintained in [microsoft/fluentui-blazor](https://github.com/microsoft/fluentui-blazor).

## License

MIT

fluentui-blazor — GitHub Copilot plugin: how to install