MCP Server for Fluent UI Blazor

Introducing the MCP Server for Fluent UI Blazor

Building applications with Fluent UI Blazor v5 just got a lot easier. Today we’re excited to introduce the Fluent UI Blazor MCP Server — your AI-powered companion that brings real-time component documentation, code suggestions, and migration guidance directly into your IDE.

Whether you’re using Visual Studio Code with GitHub Copilot or Visual Studio 2026, the MCP Server turns your AI assistant into a Fluent UI Blazor expert.

What is MCP?

The Model Context Protocol (MCP) is an open standard that enables AI assistants to interact with external tools and data sources. Think of it as a bridge between your AI coding assistant and the Fluent UI Blazor documentation.

By connecting your IDE to the Fluent UI Blazor MCP Server, you gain:

• Component Discovery — Browse and search all 65+ available Fluent UI Blazor components
• Live Documentation — Get detailed parameter, event, and method documentation
• Enum Reference — Access all enum types and their values used by components
• Code Assistance — Generate component code with AI-powered suggestions

The server runs entirely locally on your machine — no cloud services, no external network requests, no telemetry. It reads pre-generated JSON documentation files and serves them to your AI assistant via stdio. That’s it.

Getting Started in 3 Steps

Step 1: Install the MCP Server

Install the server as a global .NET tool:

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

Note: During the development phase, you can use the NuGet Preview feed:

dotnet tool install -g Microsoft.FluentUI.AspNetCore.McpServer --add-source https://pkgs.dev.azure.com/dnceng/public/_packaging/dotnet9/nuget/v3/index.json --prerelease

You can also use dnx to run the MCP server directly from NuGet.org without installing it globally:

dnx Microsoft.FluentUI.AspNetCore.McpServer

Step 2: Create the Configuration File

For Visual Studio Code, create .vscode/mcp.json in your workspace root:

{
    "servers": {
        "fluent-ui-blazor": {
            "command": "fluentui-mcp"
        }
    }
}

For Visual Studio 2026, create .mcp.json at your solution root:

{
    "servers": {
        "fluent-ui-blazor": {
            "command": "fluentui-mcp"
        }
    }
}

After saving, click on the Start link above the server entry and wait for the Running label to appear.

Step 3: Enable Agent Mode and Verify

1. Open the GitHub Copilot Chat panel (Ctrl+Shift+I)
2. Switch to Agent Mode by clicking on the mode selector
3. Ask a question to verify:

List all available Fluent UI Blazor components

If configured correctly, Copilot will use the MCP tools to return accurate component information. You’re ready to go!

What the MCP Server Provides

The server exposes three types of capabilities:

Tools — AI-Driven Functions

Tools are functions that the AI model calls automatically based on your questions. You don’t need to invoke them manually — the AI figures out which tool to use.

Example interaction:

You: "What parameters does FluentDataGrid accept?"
AI:  [Calls GetComponentDetails(componentName: "DataGrid")]
     → Returns full parameter table, events, and methods

You: "What are the possible button appearances?"
AI:  [Calls GetEnumValues(enumName: "ButtonAppearance")]
     → Returns Primary, Secondary, Outline, Subtle, Transparent

Resources — User-Attached Context

Resources are documentation that you explicitly attach to the conversation to provide richer context. In VS Code, click the + button in Copilot Chat and select MCP Resource.

For example, attaching fluentui://component/FluentDataGrid gives Copilot the complete DataGrid documentation — parameters, events, methods, and code examples — so it can generate more accurate code.

Prompts — Ready-Made Templates

The MCP Server supports prompt templates for common tasks like component scaffolding, form building, and migration assistance. You can also create your own reusable prompt files in a .prompts/ directory in your project.

Why You Need This — The v4 vs v5 Problem

AI assistants often mix up v4 and v5 patterns, leading to frustrating errors. Here are some common mistakes the MCP Server prevents:

The MCP Server contains all the correct v5 patterns, migration notes, and code examples so that your AI assistant produces working code on the first try.

AI Skills — Offline Documentation for Your AI

In addition to the MCP Server, we also provide AI Skills (also known as Agent Skills) — structured documentation files that you drop into your project to help AI coding assistants generate accurate, idiomatic code.

AI Skills follow the open Agent Skills specification and consist of:

• A SKILL.md file with YAML frontmatter describing the skill
• A references/ folder with detailed documentation on setup, theming, data grids, and more

How to use them

1. Download the skill files from the AI Skills page
2. Place them in your project:

your-project/
├── .github/
│   └── skills/
│       └── fluentui-blazor-usage/
│           ├── SKILL.md
│           └── references/
│               ├── SETUP.md
│               ├── DATAGRID.md
│               └── THEMING.md

1. Your AI assistant will automatically discover and use them

These files work with GitHub Copilot, Claude Code, and any AI assistant supporting the Agent Skills specification.

Security & Compliance

For organizations with strict security requirements, the MCP Server is designed to be fully auditable and safe:

• Read-only — Only serves pre-generated documentation. No file modifications, no code execution.
• Fully offline — No network access, no external API calls, no telemetry, no logging of user queries.
• Minimal permissions — Runs as a standard user process, no elevated privileges required.
• Open source — Full source code available on GitHub for security review.
• Signed packages — Distributed as a signed NuGet package.

The server communicates via stdio (standard input/output) using JSON-RPC 2.0 — a local process only, no network ports opened.

For a detailed threat model and compliance analysis, see the Security & Compliance page.

Real-World Example: Building a Form

Here’s what a typical interaction looks like. You ask:

Create a user registration form using Fluent UI Blazor with fields for
username, email, password, and confirm password. Include validation.

Copilot uses the MCP Server tools to look up the correct components (FluentTextInput, FluentButton, FluentField), their parameters, and generates a complete working form with EditForm, DataAnnotationsValidator, and proper v5 syntax — no guessing, no v4 leftovers.

Links and Resources

Give the MCP Server a try and let us know how it transforms your Fluent UI Blazor development workflow. We’d love to hear your feedback — file issues on GitHub or reach out to the team.

Acknowledgments

Many thanks to Adrien Clerbois for his huge work on these tools.

Happy Blazoring!