[dev-v5] Add MCP documentation support to DocViewer demo #4434

AClerbois · 2025-12-31T15:49:49Z

Add models and service for loading MCP (Model Context Protocol) documentation (tools, resources, prompts)
Enhance MarkdownViewer to render MCP sections and summaries with new table views and CSS
Update Section parsing to support {{ MCP ... }} and {{ McpSummary ... }} blocks
Update build scripts to generate and include mcp-documentation.json
Add .mcp.json config, update solution/project files for MCP integration
Add/refresh documentation for MCP server usage and configuration
Minor: reformat legacy API doc files, update .gitignore, add XML doc for DocApiGen

Pull Request

Add a new sub section under get started :

With several content :

Content with autogenerated documentation for prompt, tools and ressources :

> (No prompt is available at this time (will coming in few PR ;-) )

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

I have added tests for my changes.
I have tested my changes.
I have updated the project documentation to reflect my changes.
I have read the CONTRIBUTING documentation and followed the standards for this project.

Component-specific

I have added a new component
I have added Unit Tests for my new component
I have modified an existing component
I have validated the Unit Tests for an existing component

Copilot

Pull request overview

This PR adds comprehensive Model Context Protocol (MCP) documentation support to the DocViewer demo, enabling AI-powered assistance for Fluent UI Blazor components through integration with Visual Studio and VS Code. The implementation includes models for loading MCP documentation (tools, resources, prompts), enhanced MarkdownViewer rendering capabilities with new table views, updated Section parsing for MCP content blocks, and build automation to generate and include mcp-documentation.json.

Key changes:

Added MCP documentation models and service for loading tools, resources, and prompts
Enhanced MarkdownViewer with new rendering capabilities for MCP sections (detailed and summary views)
Automated MCP documentation generation through build scripts and PreBuild/PostBuild targets
Added comprehensive documentation pages explaining MCP usage, installation, and examples

Reviewed changes

Copilot reviewed 26 out of 30 changed files in this pull request and generated 14 comments.

Show a summary per file

File	Description
src/Tools/McpServer/README.md	Updated MCP client configuration examples (removed nested "mcp" wrapper)
src/Tools/McpServer/Microsoft.FluentUI.AspNetCore.McpServer.csproj	Added PostBuild target to copy XML documentation files to DocApiGen directory
examples/Tools/FluentUI.Demo.DocViewer/Services/McpDocumentationService.cs	New service for loading and caching MCP documentation with filtering methods
examples/Tools/FluentUI.Demo.DocViewer/Models/SectionType.cs	Added Mcp and McpSummary section types for detailed and lightweight views
examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs	Enhanced section parsing to support MCP and McpSummary blocks with type/filter arguments
examples/Tools/FluentUI.Demo.DocViewer/Models/Mcp/*.cs	New model classes for MCP documentation (Tool, Resource, Prompt, Parameter, Metadata, Documentation)
examples/Tools/FluentUI.Demo.DocViewer/Models/Api/*.cs	Refactored API documentation models into separate files (ApiDocSummary, ApiClassMember, ApiClass)
examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css	Added CSS styles for MCP tables (detailed and summary views) with responsive design
examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.cs	Added MCP documentation loading logic on component initialization
examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor	Added rendering logic for MCP and McpSummary sections with grouped tables
examples/Tools/FluentUI.Demo.DocApiGen/Properties/launchSettings.json	Added launch profile for generating MCP documentation
examples/Tools/FluentUI.Demo.DocApiGen/Microsoft.FluentUI.AspNetCore.McpServer.xml	New XML documentation file for MCP Server (653 lines of API documentation)
examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/*.md	Six new documentation pages covering MCP overview, installation, resources, tools, prompts, and examples
_PublishDemoLocally.ps1	Added build steps for MCP Server and MCP documentation generation
Microsoft.FluentUI-v5.slnx	Added .mcp.json to solution items folder
.mcp.json	New MCP configuration file (commented out local server configuration)
.gitignore	Added mcp-documentation.json to ignored files

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs

examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor

examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/Installation.md

examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor

src/Tools/McpServer/Microsoft.FluentUI.AspNetCore.McpServer.csproj

src/Tools/McpServer/README.md

examples/Tools/FluentUI.Demo.DocViewer/Services/McpDocumentationService.cs

.mcp.json

Microsoft.FluentUI-v5.slnx

examples/Tools/FluentUI.Demo.DocViewer/Services/McpDocumentationService.cs

examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs

examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor

examples/Tools/FluentUI.Demo.DocApiGen/Microsoft.FluentUI.AspNetCore.McpServer.xml

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/Overview.md

Microsoft.FluentUI-v5.slnx

.mcp.json

dvoituron · 2026-01-08T18:42:26Z

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/Overview.md

+
+Resources provide static documentation that users can attach to conversations:
+
+{{ McpSummary Type=resources }}


This component can fail in some situations

Delete the mcp-documentation.json from the wwwroot (or when not generated)

Start the website on the /installation page

Navigate to this /Mcp page

=> You probably need to remove the Monitor object

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/Overview.md

dvoituron · 2026-01-08T19:14:37Z

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/Prompts.md

+
+## Available Prompts
+
+{{ MCP Type=prompts }}


During the first page loading, this error is displayed (only the first time)

dvoituron · 2026-01-08T19:16:25Z

examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Mcp/Tools.md

+
+The Fluent UI Blazor MCP Server provides the following tools:
+
+{{ MCP Type=tools }}


Formatting issue

examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpSummaryViewer.razor

examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpSummaryViewer.razor.cs

examples/Tools/FluentUI.Demo.DocViewer/Components/Markdown/McpViewer.razor

- Add models and service for loading MCP (Model Context Protocol) documentation (tools, resources, prompts) - Enhance MarkdownViewer to render MCP sections and summaries with new table views and CSS - Update Section parsing to support {{ MCP ... }} and {{ McpSummary ... }} blocks - Update build scripts to generate and include mcp-documentation.json - Add .mcp.json config, update solution/project files for MCP integration - Add/refresh documentation for MCP server usage and configuration - Minor: reformat legacy API doc files, update .gitignore, add XML doc for DocApiGen Standardize MCP config docs, improve code thread safety - Clarified and unified MCP server configuration examples for VS Code and Visual Studio 2022 in documentation, with consistent JSON and server naming. - Improved instructions for .NET tool and dnx usage, and reorganized debugging guidance. - Updated string comparisons in Section.cs to use OrdinalIgnoreCase for consistency. - Refactored section type handling with a SetMcpSection helper to reduce duplication. - Made McpDocumentationService static and replaced SemaphoreSlim with double-checked locking for thread-safe caching. - Removed !important from mobile table CSS for better style flexibility. Refactor MCP documentation components for improved structure and readability - Introduced McpViewer and McpSummaryViewer components to encapsulate MCP tools, resources, and prompts rendering logic. - Removed redundant rendering logic from MarkdownViewer.razor. - Updated styles for MCP tables and messages for better visual consistency. - Simplified the McpDocumentationService by removing unnecessary configuration options. - Enhanced mobile responsiveness for MCP tables. - Added new component files and corresponding CSS for better modularity and maintainability. Add MCP server XML file to .gitignore for cleaner builds Rename SetMcpSection method to SetSection for clarity Refactor: unify section handling with SetSection method Replaced SetMcpSection calls with SetSection for "API", "MCP", and "McpSummary" components to consolidate section assignment logic and improve code maintainability. Improve responsive tables and accessibility in viewers Enhanced summary tables in McpSummaryViewer and McpViewer for better mobile responsiveness and accessibility. Added data-labels to table cells, updated CSS for mobile-friendly layouts, improved code/URI styling, and ensured better screen reader support. Tables now display as card-like blocks on small screens with clearer context and improved usability. Refactor table markup and CSS for simpler mobile layout Removed data-labels and card-style mobile tables in McpSummaryViewer and McpViewer.razor. Refactored CSS to use flexbox for mobile responsiveness, simplifying styles and markup. Cleaned up code/URI cell styling for a more streamlined, maintainable layout.

…Viewer

- Changed references from Visual Studio 2022 to Visual Studio 2026 in Installation.md and Overview.md. - Removed outdated build instructions and added new components for displaying MCP prompts, resources, and tools. - Introduced McpType enum to streamline MCP type handling across components. - Refactored McpViewer and related components to utilize the new McpType enum. - Enhanced the rendering logic for tools, resources, and prompts to improve maintainability and readability. - Updated README.md files to reflect the changes in configuration for Visual Studio 2026.

AClerbois requested a review from vnbaaij as a code owner December 31, 2025 15:49

Copilot AI review requested due to automatic review settings December 31, 2025 15:49

AClerbois requested a review from dvoituron as a code owner December 31, 2025 15:49

Copilot started reviewing on behalf of AClerbois December 31, 2025 15:50 View session

Copilot AI reviewed Dec 31, 2025

View reviewed changes

dvoituron requested changes Jan 3, 2026

View reviewed changes

AClerbois requested a review from dvoituron January 3, 2026 17:03

dvoituron changed the title ~~Add MCP documentation support to DocViewer demo~~ [dev-v5] Add MCP documentation support to DocViewer demo Jan 8, 2026

dvoituron requested changes Jan 8, 2026

View reviewed changes

AClerbois force-pushed the users/aclerbois/dev-v5/add-mcp-add-documentation branch from 6cf6604 to cc764ec Compare January 13, 2026 20:12

AClerbois force-pushed the users/aclerbois/dev-v5/add-mcp-add-documentation branch from cc764ec to f308971 Compare January 13, 2026 20:13

AClerbois added 2 commits January 13, 2026 22:16

Add summary rendering for tools, resources, and prompts in McpSummary…

50cb28e

…Viewer


		Resources provide static documentation that users can attach to conversations:

		{{ McpSummary Type=resources }}


		The Fluent UI Blazor MCP Server provides the following tools:

		{{ MCP Type=tools }}

[dev-v5] Add MCP documentation support to DocViewer demo #4434

Are you sure you want to change the base?

[dev-v5] Add MCP documentation support to DocViewer demo #4434

Conversation

AClerbois commented Dec 31, 2025

Pull Request

🎫 Issues

👩‍💻 Reviewer Notes

📑 Test Plan

✅ Checklist

General

Component-specific

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dvoituron Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

dvoituron Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

dvoituron Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants