Users/aclerbois/dev v5/add mcp #4387
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,131 @@ | ||
| @using Microsoft.FluentUI.AspNetCore.Components.McpServer.Shared | ||
| @using Microsoft.FluentUI.AspNetCore.Components.McpServer.Shared.Models | ||
| @using System.Net.Http.Json | ||
| @inject HttpClient Http | ||
|
|
||
| @if (_loading) | ||
| { | ||
| <FluentSpinner /> | ||
| } | ||
| else if (_summary is null) | ||
| { | ||
| <FluentMessageBar Title="Error" Intent="MessageBarIntent.Error"> | ||
| Failed to load MCP capabilities data. | ||
| </FluentMessageBar> | ||
| } | ||
| else | ||
| { | ||
| <FluentTabs ActiveTabId="@_activeTab" ActiveTabIdChanged="@OnTabChanged"> | ||
| <FluentTab Id="tools" Label="@($"Tools ({_summary.Tools.Count})")"> | ||
| <FluentDataGrid TGridItem="McpToolInfo" Items="@_summary.Tools.AsQueryable()" GridTemplateColumns="1fr 2fr 1fr"> | ||
| <PropertyColumn Property="@(t => t.Name)" Title="Name" /> | ||
| <PropertyColumn Property="@(t => t.Description)" Title="Description" /> | ||
| <TemplateColumn Title="Parameters"> | ||
| @if (context.Parameters.Count > 0) | ||
| { | ||
| <FluentStack Orientation="Orientation.Vertical" VerticalGap="0"> | ||
| @foreach (var param in context.Parameters) | ||
| { | ||
| <span> | ||
| <code>@param.Name</code> | ||
| <span class="text-muted">(@param.Type)</span> | ||
| @if (param.Required) | ||
| { | ||
| <span>*</span> | ||
| } | ||
| </span> | ||
| } | ||
| </FluentStack> | ||
| } | ||
| else | ||
| { | ||
| <span class="text-muted">None</span> | ||
| } | ||
| </TemplateColumn> | ||
| </FluentDataGrid> | ||
| </FluentTab> | ||
|
|
||
| <FluentTab Id="prompts" Label="@($"Prompts ({_summary.Prompts.Count})")"> | ||
| <FluentDataGrid TGridItem="McpPromptInfo" Items="@_summary.Prompts.AsQueryable()" GridTemplateColumns="1fr 2fr 1fr"> | ||
| <PropertyColumn Property="@(p => p.Name)" Title="Name" /> | ||
| <PropertyColumn Property="@(p => p.Description)" Title="Description" /> | ||
| <TemplateColumn Title="Parameters"> | ||
| @if (context.Parameters.Count > 0) | ||
| { | ||
| <FluentStack Orientation="Orientation.Vertical" VerticalGap="0"> | ||
| @foreach (var param in context.Parameters) | ||
| { | ||
| <span> | ||
| <code>@param.Name</code> | ||
| <span class="text-muted">(@param.Type)</span> | ||
| @if (param.Required) | ||
| { | ||
| <span>*</span> | ||
| } | ||
| </span> | ||
| } | ||
| </FluentStack> | ||
| } | ||
| else | ||
| { | ||
| <span class="text-muted">None</span> | ||
| } | ||
| </TemplateColumn> | ||
| </FluentDataGrid> | ||
| </FluentTab> | ||
|
|
||
| <FluentTab Id="resources" Label="@($"Resources ({_summary.Resources.Count})")"> | ||
| <FluentDataGrid TGridItem="McpResourceInfo" Items="@_summary.Resources.AsQueryable()" GridTemplateColumns="1fr 1fr 2fr 0.5fr"> | ||
| <PropertyColumn Property="@(r => r.Uri)" Title="URI" /> | ||
| <PropertyColumn Property="@(r => r.Title)" Title="Title" /> | ||
| <PropertyColumn Property="@(r => r.Description)" Title="Description" /> | ||
| <TemplateColumn Title="Type"> | ||
| @if (context.IsTemplate) | ||
| { | ||
| <span class="text-muted">Template</span> | ||
| } | ||
| else | ||
| { | ||
| <span class="text-muted">Static</span> | ||
| } | ||
| </TemplateColumn> | ||
| </FluentDataGrid> | ||
| </FluentTab> | ||
| </FluentTabs> | ||
| } | ||
|
|
||
| @code { | ||
| private string _activeTab = "tools"; | ||
| private McpSummary? _summary; | ||
| private bool _loading = true; | ||
|
|
||
| protected override async Task OnInitializedAsync() | ||
| { | ||
| try | ||
| { | ||
| // Try to get from static cache first (works in Server mode) | ||
| if (McpCapabilitiesData.IsInitialized) | ||
| { | ||
| _summary = McpCapabilitiesData.GetSummary(); | ||
| } | ||
| else | ||
| { | ||
| // Fetch from API (for WebAssembly mode) | ||
| _summary = await Http.GetFromJsonAsync<McpSummary>("/api/mcp/capabilities"); | ||
|
Collaborator
There was a problem hiding this comment. The final hosting will be on a static web site. So not API available :-(
Collaborator
There was a problem hiding this comment. We can have an API with SWA |
||
| } | ||
| } | ||
| catch | ||
| { | ||
| _summary = null; | ||
| } | ||
| finally | ||
| { | ||
| _loading = false; | ||
| } | ||
| } | ||
|
|
||
| private void OnTabChanged(string? tabId) | ||
| { | ||
| _activeTab = tabId ?? "tools"; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,148 @@ | ||
| --- | ||
| title: MCP Server | ||
| order: 0012 | ||
| category: 10|Get Started | ||
| route: /mcp-server | ||
| --- | ||
|
|
||
| # MCP Server | ||
|
|
||
| **Model Context Protocol (MCP)** is an open protocol that enables seamless integration between LLM applications and external data sources and tools. | ||
| The Fluent UI Blazor library provides an MCP server that gives AI assistants access to component documentation, enabling them to generate accurate, up-to-date Fluent UI Blazor code. | ||
|
|
||
| ## What is MCP? | ||
|
|
||
| MCP provides a standardized way for AI assistants (like GitHub Copilot, Claude, and others) to access external context. | ||
| Instead of relying solely on training data, AI assistants can query real-time documentation, search for specific components, and get accurate parameter information. | ||
|
|
||
| Learn more: [Model Context Protocol](https://modelcontextprotocol.io/) | ||
|
|
||
| ## Installation | ||
|
|
||
| ### As a .NET Global Tool | ||
|
|
||
| ```bash | ||
| dotnet tool install -g Microsoft.FluentUI.AspNetCore.Components.McpServer --prerelease | ||
| ``` | ||
|
|
||
| ### From Source | ||
|
|
||
| ```bash | ||
| cd examples/Mcp/FluentUI.Mcp.Server | ||
| dotnet build | ||
| ``` | ||
|
|
||
| ## Configuration | ||
|
|
||
| ### VS Code / GitHub Copilot | ||
|
|
||
| Add to your `.vscode/mcp.json` or user settings: | ||
|
|
||
| ```json | ||
| { | ||
| "servers": { | ||
| "fluentui-blazor": { | ||
| "command": "fluentui-mcp", | ||
| "args": [] | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Claude Desktop | ||
|
|
||
| Add to your `claude_desktop_config.json`: | ||
|
|
||
| ```json | ||
| { | ||
| "mcpServers": { | ||
| "fluentui-blazor": { | ||
| "command": "fluentui-mcp", | ||
| "args": [] | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ### Running from Source | ||
|
|
||
| If running from source, use the full path: | ||
|
|
||
| ```json | ||
| { | ||
| "servers": { | ||
| "fluentui-blazor": { | ||
| "command": "dotnet", | ||
| "args": ["run", "--project", "path/to/FluentUI.Mcp.Server"] | ||
| } | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| ## Available Capabilities | ||
|
|
||
| The MCP server exposes three types of primitives: | ||
|
|
||
| - **Tools**: Model-controlled functions for dynamic queries (search, get details) | ||
| - **Resources**: User-selected static content (component lists, guides) | ||
| - **Prompts**: Pre-defined templates for common tasks (create component, migrate code) | ||
|
|
||
| {{ McpCapabilities }} | ||
|
Collaborator
There was a problem hiding this comment. I don't think we need to display the source code of this component. You can add |
||
|
|
||
| ## Usage Examples | ||
|
|
||
| ### Ask for Component Help | ||
|
|
||
| > "How do I use FluentDataGrid with pagination?" | ||
| The AI will use the `GetComponentDetails` tool to fetch accurate parameter information. | ||
|
|
||
| ### Generate Code | ||
|
|
||
| > "Create a form with name, email, and a submit button using Fluent UI Blazor" | ||
| The AI will use the `create_form` prompt combined with component documentation. | ||
|
|
||
| ### Migration Assistance | ||
|
|
||
| > "Migrate this v4 code to v5" | ||
| The AI will use the `migrate_to_v5` prompt and the migration guide resource. | ||
|
|
||
| ## Architecture | ||
|
|
||
| ``` | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | ||
| β AI Assistant β | ||
| β (Copilot, Claude, etc.) β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | ||
| β | ||
| β MCP Protocol (stdio) | ||
| β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | ||
| β FluentUI MCP Server β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€ | ||
| β Tools β Resources β Prompts β | ||
| β βββββββββββ β ββββββββββββ β ββββββββββββ β | ||
| β ListComponents β components β create_component β | ||
| β GetDetails β categories β create_form β | ||
| β SearchEnums β guides/* β migrate_to_v5 β | ||
| β ... β ... β ... β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ€ | ||
| β FluentUIDocumentationService β | ||
| β (Reflection + XML Docs) β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | ||
| β | ||
| β Assembly Reflection | ||
| β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | ||
| β Microsoft.FluentUI.AspNetCore.Components β | ||
| β (Component Library) β | ||
| βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ | ||
| ``` | ||
|
|
||
| ## Source Code | ||
|
|
||
| The MCP server source code is available in the repository: | ||
|
|
||
| [examples/Mcp/FluentUI.Mcp.Server](https://github.com/microsoft/fluentui-blazor/tree/dev/examples/Mcp/FluentUI.Mcp.Server) | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we don't display the source code in the
.mdfile, can you move this code to a.csfile ?