Guía de lectura localizada

ui-widget-developerFinalidad, uso y origen

Crea servidores MCP para Copilot Chat usando el SDK de OpenAI Apps o la compatibilidad con la representación de widgets del SDK de MCP Apps (cualquier lenguaje). Usa esta habilidad cuando: - Crees servidores MCP que se integren con M365Agentes declarativos de Copilot: Creación de widgets interactivos enriquecidos (React + Fluent UI) que se renderizan en Copilot Chat - Implementación de herramientas que devuelven StructuredContent para la renderización de widgets - Adaptación de un servidor MCP existente para admitir la renderización de widgets de Copilot - Configuración de devtunnels para la exposición del servidor MCP localhost - ConfiguraciónmcpPlugin.jsen manifiestos con entorno de ejecución RemoteMCPServer NO utilice esta habilidad para el desarrollo general de agentes (estructuración, manifiestos, despliegue); utilice declarative-agent-developer en su lugar. Esta habilidad es SOLO para el desarrollo de servidores MCP + widgets. Activadores: "Servidor MCP para Copilot", "SDK de OpenAI Apps", "Widget de Copilot", "Contenido estructurado", "Complemento MCP", "MCP de devtunnels", "Aplicación OAI", "Renderizado de widgets", "Widget de interfaz de usuario"

Fuente recuperada: 2026-10-29

Repositorio de origen: microsoft/skills
SKILL.md: .github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
Estrellas del repositorio: 3,157
Actualización del repositorio: 2026-10-31
Clasificación de habilidades: Flujo de trabajo del agente
Última recopilación: 2026-10-31 10:38 UTC+08:00

Licencia: MIT

SKILL.md original

Los extractos del flujo de trabajo son guías de lectura, no instrucciones ejecutables de Codez. No se utilizó ninguna habilidad de terceros para generar esta página.

Los siguientes fragmentos sobre el propósito y el flujo de trabajo son material preliminar, organizado y traducido para su lectura. Son distintos del análisis editorial de Codez, que se presenta por separado.

Lo que hace esta habilidad

Cómo funciona el flujo de trabajo ascendente

Inicio rápido

Terminal1- Iniciar el servidor MCP: Terminal2- Iniciar DevTunnel: En la primera ejecución, configure el agente una vez que el túnel esté activo (consulte la regla de APROVISIONAMIENTO DEL AGENTE). En ejecuciones posteriores, la URL del túnel es estable; no es necesario volver a configurarlo a menos que cambie el manifiesto del agente.

Paso río arriba · L384 ↗

Flujo de trabajo de desarrollo

Iniciar el servidor MCP (modo de desarrollo con recarga en caliente): TypeScript:cd mcp-server && npm install && npm run devPitón:cd mcp-server && pip install -r requirements.txt && python server.pyDO#:cd mcp-server && dotnet run

Paso río arriba · L402 ↗

🚨 REGLAS DE EJECUCIÓN CRÍTICA 🚨

APLICACIÓN DE FLUENT UI (OBLIGATORIA): Las implementaciones de widgets DEBEN usar componentes de React + Fluent UI. Antes de escribir cualquier código de widget, el agente DEBE leer y seguir lo siguiente:references/best-practices.mdREQUISITO DEL PAQUETE FLUENT UI (OBLIGATORIO): El proyecto del widget DEBE incluir las dependencias de Fluent UI antes de la implementación. Como mínimo, instale y mantenga estas dependencias en el paquete del widget: Si falta alguno de estos paquetes, instálelos automáticamente antes de continuar con la generación del código del widget. Si el widget generado no incluye archivos de entrada de React (por ejemplowidgets/src//main.tsxy un archivo de componente React) y Fluent importa desde@fluentui/react-componentsLa tarea está incompleta y DEBE corregirse antes de devolver los resultados.

Paso río arriba · L95 ↗

Paso río arriba · bash ↗

export ATK_CLI_SKILL=true

Requisitos y configuración

Configuración de DevTunnels

> Solo pruebas locales. DevTunnels es para desarrollo y pruebas en su máquina. Antes de compartir el agente de forma más amplia, implemente tanto el servidor MCP como los recursos del widget en un entorno alojado (por ejemplo, Azure App Service, Azure Static Web Apps u otro proveedor de alojamiento) y actualice las URL del manifiesto del agente en consecuencia. DevTunnels expone su servidor MCP local a M365Copilot utiliza túneles con nombre para URL estables. Verreferences/devtunnels.mdPara scripts de configuración, referencia de comandos y solución de problemas.

Paso río arriba · L372 ↗

Límites y controles de calidad

No se seleccionó ningún pasaje con límites específicos en este archivo. Esto no significa que la habilidad sea segura para cualquier entrada o entorno. Revise el código fuente completo y valide su propio resultado.

Comience con una prueba segura.

Verifique el host compatible y las instrucciones de instalación del repositorio. Mantenga juntos el directorio Skill y sus scripts, recursos y documentación a los que hace referencia;SKILL.mdsolo puede omitir dependencias.
Proporcione al agente sus datos reales, el resultado deseado y los criterios de aceptación. La sintaxis de invocación y las herramientas disponibles dependen del sistema anfitrión; este sitio no presupone un comando de instalación universal.
Pruebe el flujo de trabajo original en un proyecto desechable o en una copia. Revise las operaciones que modifican archivos, servicios remotos o recursos facturables antes de autorizarlas.
Valide el resultado comparándolo con los controles de calidad de origen y sus propios requisitos. Un activador exitoso o un alto número de estrellas en el repositorio no garantizan un resultado correcto.

Especificación del formato y directorio de habilidades ↗

Lea más en la fuente

Traducción y alcance

Esta guía de lectura selecciona pasajes de la sección fijada en la parte superior.SKILL.mdLa traducción es asistida. No se trata de un manual completo ni garantiza la compatibilidad. Lea el original y los archivos a los que hace referencia antes de usarlo.

Esta introducción hace referencia a la versión fijada a continuación; la actividad actual del repositorio y la hora de recopilación se muestran por separado.

Fuente fijada: Lee el original ↗
Fuente recuperada: 2026-10-29T09:32:23Z
Confirmación de origen: 00d66a64919edca5bca2c673373444e36a4b5461
Fuente SHA-256: b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12

Volver al catálogo completo de habilidades