К основному содержанию
плагин GitHub Copilot официальный · GitHub

fluentui-blazor — плагин для GitHub Copilot: как установить

Плагин объединяет базу правил и MCP-сервер для разработки интерфейсов на Microsoft Fluent UI Blazor. Пригодится при верстке компонентов, настройке провайдеров и миграции с v4 на v5.

Установить в GitHub Copilot · Команда из источника Все способы и платформы ↓
copilot plugin install fluentui-blazor@awesome-copilot
Открыть на GitHub

Что делает fluentui-blazor

Плагин связывает скилл fluentui-blazor и локальный MCP-сервер Microsoft.FluentUI.AspNetCore.McpServer. Скилл задаёт правила для обязательных провайдеров, контекста форм, токенов дизайна и внедрения зависимостей. Это исключает частые ошибки вроде сбоев с ServiceLifetime.Transient или пропущенных оберток разметки.

MCP-сервер запускается через команду dnx и загружает пакет с nuget.org. Он даёт модели доступ к каталогу из 142+ компонентов, свойствам, актуальным перечислениям и кодам иконок. Дополнительно встроен блок инструментов для сверки версий проекта и пошагового обновления кода с четвертой версии библиотеки на пятую.

Для запуска необходим .NET 10 SDK или новее с доступной утилитой dnx в переменной PATH. Ставить плагин стоит тем, кто активно пишет на Blazor: без MCP-сервера агент начинает выдумывать несуществующие параметры компонентов.

Какие задачи решает

  • добавить таблицу FluentDataGrid с сортировкой и пагинацией
  • найти точное имя и синтаксис нужной иконки Fluent
  • перенести страницы проекта с Fluent UI Blazor v4 на v5
  • настроить обязательные UI-провайдеры и регистрацию сервисов

Примеры запросов агенту

  • Добавь в проект FluentDataGrid для списка заказов с сортировкой и пагинацией.
  • Какую иконку Fluent выбрать для кнопки сохранения черновика и как ее подключить?
  • Проверь текущую версию библиотеки в проекте и помоги перевести эту страницу с v4 на v5.

Как установить fluentui-blazor

Команда из источника

copilot plugin install fluentui-blazor@awesome-copilot

Из того же набора554

Весь набор →
git-commit официальный github Скилл разбирает изменения Git, выбирает связанные файлы и создаёт коммит в формате Conventional Commits. Пригодится, когда нужно закоммитить одну или несколько логических частей изменений. GitHub Copilot 47 165установок excalidraw-diagram-generator официальный github Скилл превращает описание на обычном языке в диаграмму Excalidraw. Подойдёт, когда нужно показать процесс, связи между объектами или устройство системы. GitHub Copilot 31 639установок multi-stage-dockerfile официальный github Скилл помогает создавать многоэтапные Dockerfile для разных языков и фреймворков. Пригодится, когда важны размер и состав runtime-образа. GitHub Copilot 29 688установок documentation-writer официальный github Скилл для создания технической документации по фреймворку Diátaxis: туториалы, гайды, справки и объяснения. Предлагает структуру перед написанием. GitHub Copilot 27 757установок prd официальный github Собирает из идеи структурированный PRD с пользовательскими историями, техническими требованиями и рисками. Подходит для планирования новых функций, в том числе с AI. GitHub Copilot 24 035установок refactor официальный github Скилл помогает менять структуру кода без изменения внешнего поведения. Подойдёт для постепенной уборки сложных функций, дублирования и кодовых запахов. GitHub Copilot 22 321установок java-springboot официальный github Задаёт практики разработки Spring Boot-приложений: от структуры проекта до тестов и безопасности. Пригодится, когда Copilot пишет или проверяет Java-код. GitHub Copilot 21 272установок create-readme официальный github Скилл изучает проект и создаёт структурированный README.md. Подойдёт, когда документацию нужно собрать по коду и файлам проекта. GitHub Copilot 19 081установок

Вопросы о fluentui-blazor

Как установить fluentui-blazor в GitHub Copilot?

Выполните команду copilot plugin install fluentui-blazor@awesome-copilot. Если используете Claude Code, сначала подключите репозиторий через /plugin marketplace add github/awesome-copilot, затем запустите /plugin install fluentui-blazor@awesome-copilot.

Зачем в плагине объединены скилл и MCP-сервер?

Скилл отвечает за логику архитектуры: жизненный цикл служб, вызовы IDialogService и структуру провайдеров. MCP-сервер обращается к документации пакета и отдает точные имена параметров и перечислений для 142+ компонентов.

Что требуется для запуска MCP-сервера?

В системе должен быть установлен .NET 10 SDK или более поздняя версия, а команда dnx должна запускаться в терминале. При первом обращении плагин сам загрузит сервер с nuget.org.

Исходный текст

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

© Adrien Clerbois · MIT · github/awesome-copilot

Смотрите также

Спонсоры проекта

Компании, которые помогают держать аналитику открытой