Guia de leitura localizado

ui-widget-developerFinalidade, utilização e fonte

Crie servidores MCP para o Copilot Chat usando o SDK de Aplicativos OpenAI ou o suporte à renderização de widgets do SDK de Aplicativos MCP (qualquer linguagem). Use esta habilidade quando: - Criar servidores MCP que se integrem com o M365Agentes declarativos do Copilot - Criação de widgets interativos avançados (React + Fluent UI) que renderizam no Copilot Chat - Implementação de ferramentas que retornam conteúdo estruturado para renderização de widgets - Adaptação de um servidor MCP existente para suportar a renderização de widgets do Copilot - Configuração de túneis de desenvolvimento para exposição do servidor MCP local - ConfiguraçãomcpPlugin.jsEm manifestos com o runtime RemoteMCPServer, NÃO use esta habilidade para desenvolvimento geral de agentes (scaffolding, manifestos, implantação) — use declarative-agent-developer em vez disso. Esta habilidade é SOMENTE para desenvolvimento de servidor MCP + widget. Gatilhos: "Servidor MCP para Copilot", "SDK de Aplicativos OpenAI", "Widget Copilot", "conteúdo estruturado", "plugin MCP", "devtunnels MCP", "aplicativo OAI", "renderização de widget", "widget de interface do usuário"

Fonte recuperada: 2026-10-29

Repositório de origem: microsoft/skills
SKILL.md: .github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md
Estrelas do repositório: 3,157
Atualização do repositório: 2026-10-31
Classificação de Habilidades: Fluxo de trabalho do agente
Última coleta: 2026-10-31 10:38 UTC+08:00

Licença: MIT

SKILL.md original

Os trechos do fluxo de trabalho são auxiliares de leitura e não instruções executáveis do Codez. Nenhuma Skill de terceiros foi executada para gerar esta página.

Os trechos abaixo, que descrevem o propósito e o fluxo de trabalho, são material original, organizado e traduzido para facilitar a leitura. Eles são distintos da análise editorial da Codez, que possui uma etiqueta separada.

O que esta habilidade faz

Como funciona o fluxo de trabalho upstream

Início rápido

terminal1- Iniciar o servidor MCP: Terminal2- Iniciar o DevTunnel: Na primeira execução, provisione o agente assim que o túnel estiver ativo (consulte a regra PROVISIONAMENTO DO AGENTE). Em execuções subsequentes, a URL do túnel permanece estável — não é necessário provisionar novamente, a menos que o manifesto do agente seja alterado.

Passagem a montante · L384 ↗

Fluxo de trabalho de desenvolvimento

Inicie o servidor MCP (modo de desenvolvedor com recarregamento a quente): 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

Passagem a montante · L402 ↗

🚨 REGRAS CRÍTICAS DE EXECUÇÃO 🚨

IMPOSIÇÃO DO FLUENT UI (OBRIGATÓRIO): As implementações de widgets DEVEM usar React + componentes do Fluent UI. Antes de escrever qualquer código de widget, o agente DEVE ler e seguir:references/best-practices.mdREQUISITO DO PACOTE FLUENT UI (OBRIGATÓRIO): O projeto do widget DEVE incluir as dependências do Fluent UI antes da implementação. No mínimo, instale e mantenha os seguintes pacotes nas dependências do widget: Se algum desses pacotes estiver faltando, instale-os automaticamente antes de continuar com a geração do código do widget. Se o widget gerado não incluir arquivos de entrada React (por exemplo,widgets/src//main.tsxe um arquivo de componente React) e importações Fluent de@fluentui/react-componentsA tarefa está incompleta e DEVE ser corrigida antes de retornar os resultados.

Passagem a montante · L95 ↗

Passagem a montante · bash ↗

export ATK_CLI_SKILL=true

Requisitos e configuração

Configuração do DevTunnels

> Somente para testes locais. Os DevTunnels são para desenvolvimento e testes em sua máquina. Antes de compartilhar o agente de forma mais ampla, implante o servidor MCP e os recursos do widget em um ambiente hospedado (por exemplo, Azure App Service, Azure Static Web Apps ou outro provedor de hospedagem) e atualize os URLs do manifesto do agente de acordo. Os DevTunnels expõem seu servidor MCP local para o MCP.365O Copilot utiliza túneis nomeados para URLs estáveis. Vejareferences/devtunnels.mdPara scripts de configuração, referência de comandos e solução de problemas.

Passagem a montante · L372 ↗

Limites e verificações de qualidade

Nenhuma passagem de limites separada foi selecionada deste arquivo. Isso não significa que a Skill seja segura para todas as entradas ou ambientes. Analise o código-fonte completo e valide seus próprios resultados.

Comece com um teste seguro.

Verifique o host compatível e as instruções de instalação do repositório. Mantenha o diretório Skill e seus scripts, recursos e documentação referenciados juntos;SKILL.mdsozinho pode omitir dependências.
Forneça ao agente suas entradas reais, a saída desejada e os critérios de aceitação. A sintaxe de invocação e as ferramentas disponíveis dependem do host; este site não pressupõe um comando de instalação universal.
Teste o fluxo de trabalho original em um projeto descartável ou em uma cópia. Analise as operações que alteram arquivos, serviços remotos ou recursos faturáveis antes de permiti-las.
Valide o resultado comparando-o com as verificações de qualidade da fonte e com seus próprios requisitos. Um gatilho bem-sucedido ou uma alta contagem de estrelas no repositório não garantem um resultado correto.

Especificação de formato e diretório de habilidades ↗

Tradução e escopo

Este guia de leitura seleciona trechos do texto fixado a montante.SKILL.mdA tradução foi feita com auxílio de ferramentas. Este não é um manual completo nem garante compatibilidade comprovada. Leia o original e os arquivos referenciados antes de usar.

Esta introdução refere-se à versão fixada abaixo; a atividade atual do repositório e o tempo de coleta são mostrados separadamente.

Fonte fixada: Leia o original ↗
Fonte recuperada: 2026-10-29T09:32:23Z
Commit de origem: 00d66a64919edca5bca2c673373444e36a4b5461
Fonte SHA-256: b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12

Voltar ao catálogo completo de habilidades