Локализованное руководство по чтению
ui-widget-developerНазначение, использование и источник
Создавайте MCP-серверы для Copilot Chat, используя поддержку рендеринга виджетов OpenAI Apps SDK или MCP Apps SDK (на любом языке). Этот навык пригодится, когда: - Создаются MCP-серверы, интегрирующиеся с M365Декларативные агенты Copilot — Создание многофункциональных интерактивных виджетов (React + Fluent UI), отображаемых в чате Copilot — Внедрение инструментов, возвращающих структурированный контент для рендеринга виджетов — Адаптация существующего сервера MCP для поддержки рендеринга виджетов Copilot — Настройка туннелей разработки для доступа к локальному серверу MCP — КонфигурированиеmcpPlugin.jsВ манифестах с использованием среды выполнения RemoteMCPServer НЕ используйте этот навык для общей разработки агентов (генерация кода, манифесты, развертывание) — используйте вместо него declarative-agent-developer. Этот навык предназначен ТОЛЬКО для разработки MCP-сервера + виджета. Триггеры: "MCP-сервер для Copilot", "OpenAI Apps SDK", "виджет Copilot", "structuredContent", "плагин MCP", "devtunnels MCP", "приложение OAI", "рендеринг виджета", "виджет пользовательского интерфейса"
Источник получен:
- Репозиторий-источник
- microsoft/skills
- SKILL.md
.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md- Звёзды репозитория
- 3,157
- Последнее обновление репозитория
- 2026-10-31
- Категории Skills
- Рабочий процесс агента
- Время последнего сбора
Лицензия: MIT
Приведенные фрагменты описания рабочих процессов являются вспомогательными средствами для чтения, а не исполняемыми инструкциями от Codez. Для создания этой страницы не использовались сторонние инструменты.
Приведённые ниже фрагменты, описывающие цели и рабочие процессы, представляют собой исходный материал, систематизированный и переведённый для удобства чтения. Они отличаются от отдельно обозначенного редакционного анализа Codez.
Что делает этот навык
Создавайте MCP-серверы для Copilot Chat, используя поддержку рендеринга виджетов OpenAI Apps SDK или MCP Apps SDK (на любом языке). Этот навык пригодится, когда: - Создаются MCP-серверы, интегрирующиеся с M365Декларативные агенты Copilot — Создание многофункциональных интерактивных виджетов (React + Fluent UI), отображаемых в чате Copilot — Внедрение инструментов, возвращающих структурированный контент для рендеринга виджетов — Адаптация существующего сервера MCP для поддержки рендеринга виджетов Copilot — Настройка туннелей разработки для доступа к локальному серверу MCP — КонфигурированиеmcpPlugin.jsВ манифестах с использованием среды выполнения RemoteMCPServer НЕ используйте этот навык для общей разработки агентов (генерация кода, манифесты, развертывание) — используйте вместо него declarative-agent-developer. Этот навык предназначен ТОЛЬКО для разработки MCP-сервера + виджета. Триггеры: "MCP-сервер для Copilot", "OpenAI Apps SDK", "виджет Copilot", "structuredContent", "плагин MCP", "devtunnels MCP", "приложение OAI", "рендеринг виджета", "виджет пользовательского интерфейса"
Как работает рабочий процесс на вышестоящем уровне
Быстрый старт
Терминал1- Запуск сервера MCP: Терминал2- Запуск DevTunnel: При первом запуске выполните инициализацию агента после установления туннеля (см. правило ИНИЦИАЛИЗАЦИИ АГЕНТА). При последующих запусках URL-адрес туннеля остается стабильным — повторная инициализация не требуется, если только не произойдут изменения в манифесте агента.
проход вверх по течению · L384 ↗Рабочий процесс разработки
Запуск сервера MCP (режим разработки с горячей перезагрузкой): TypeScript:cd mcp-server && npm install && npm run devPython:cd mcp-server && pip install -r requirements.txt && python server.pyC#:cd mcp-server && dotnet run
🚨 ПРАВИЛА КРИТИЧЕСКОГО ВЫПОЛНЕНИЯ 🚨
ОБЯЗАТЕЛЬНОЕ ИСПОЛЬЗОВАНИЕ FLUENT UI: Реализации виджетов ДОЛЖНЫ использовать React + компоненты Fluent UI. Перед написанием любого кода виджета агент ДОЛЖЕН прочитать и следовать следующим инструкциям:references/best-practices.mdТРЕБОВАНИЯ К ПАКЕТАМ FLUENT UI (ОБЯЗАТЕЛЬНО): Проект виджета ДОЛЖЕН включать зависимости Fluent UI до начала реализации. Как минимум, установите и сохраните их в зависимостях пакета виджета: Если какой-либо из этих пакетов отсутствует, установите его автоматически перед продолжением генерации кода виджета. Если сгенерированный виджет не включает файлы входа React (например)widgets/src//main.tsxи файл компонента React) и импорт Fluent из@fluentui/react-componentsЗадача не выполнена и ДОЛЖНА быть исправлена перед возвратом результатов.
export ATK_CLI_SKILL=trueТребования и настройка
Настройка DevTunnels
> Только для локального тестирования. DevTunnels предназначены для разработки и тестирования на вашем компьютере. Прежде чем предоставлять агенту более широкий доступ, разверните сервер MCP и ресурсы виджетов в размещенной среде (например, Azure App Service, Azure Static Web Apps или у другого хостинг-провайдера) и обновите URL-адреса манифеста агента соответствующим образом. DevTunnels предоставляют доступ к вашему локальному серверу MCP для M.365Copilot использует именованные туннели для стабильных URL-адресов. См.references/devtunnels.mdдля скриптов настройки, справочника команд и устранения неполадок.
проход вверх по течению · L372 ↗Ограничения и проверки качества
Из этого файла не был выбран отдельный фрагмент с ограничениями. Это не означает, что навык безопасен для любых входных данных или сред. Проверьте полный исходный код и подтвердите свой собственный результат.
Начните с безопасного пробного периода.
- Проверьте поддерживаемый хост и инструкции по установке репозитория. Храните каталог Skill, а также связанные с ним скрипты, ресурсы и документацию вместе;SKILL.mdВ одиночку можно опустить зависимости.
- Предоставьте агенту ваши реальные входные данные, желаемый результат и критерии приемки. Синтаксис вызова и доступные инструменты зависят от хоста; данный сайт не предполагает универсальной команды установки.
- Попробуйте запустить исходный рабочий процесс в тестовом проекте или в его копии. Перед тем как разрешить операции, изменяющие файлы, удаленные сервисы или оплачиваемые ресурсы, проверьте их.
- Проверьте выходные данные на соответствие исходным проверкам качества и вашим собственным требованиям. Успешный запуск или большое количество звезд в репозитории не гарантируют корректного результата.
Подробнее читайте в источнике.
- Метки телеметрии
- 🔀 ВЫБОР ПУТИ
- MCP Apps: Установите плагин ext-apps
- 📛 ОБНАРУЖЕНИЕ ПРОЕКТА 📛
- 🚨 ПРАВИЛА КРИТИЧЕСКОГО ВЫПОЛНЕНИЯ 🚨
- ⚠️ ПРАВИЛО КОНФИГУРАЦИИ ИНСТРУМЕНТОВ MCP ⚠️
- Структура проекта
- Протокол виджета второго пилота
- Шаблон серверной архитектуры MCP (справочник по TypeScript)
- Обработка неполных данных
- Шаблон виджета
- Схема плагина
- Настройка DevTunnels
- Быстрый старт
- Рабочий процесс разработки
- Передовые методы
Смежные навыки
Перевод и сфера применения
В этом руководстве по чтению представлены избранные отрывки из закрепленного текста выше по течению.SKILL.mdПеревод выполнен с помощью переводчика. Это не полное руководство и не гарантия проверенной совместимости. Перед использованием ознакомьтесь с оригиналом и указанными в нем файлами.
Данное введение относится к закрепленной ниже версии; текущая активность в репозитории и время сбора данных отображаются отдельно.
- Закрепленный источник
- Прочитайте оригинал ↗
- Источник получен
- Исходный коммит
00d66a64919edca5bca2c673373444e36a4b5461- Исходный SHA-256
b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12