foundry-hosted-agent-copilotkit
Ajuda seu agente a construir aplicações web interativas. Permite conectar um frontend React com um agente de IA para criar experiências de usuário dinâmicas.
O que ela faz
Esta ferramenta ajuda a conectar um aplicativo web feito com React (usando CopilotKit) a um 'agente' inteligente (feito com Microsoft Agent Framework) que roda em um serviço pago da Microsoft chamado Foundry. Ela facilita a comunicação entre eles para criar aplicativos mais avançados.
Quando usar
- ✓Ao criar um novo aplicativo web que precisa de um agente inteligente.
- ✓Ao adicionar ou modificar um agente inteligente em um aplicativo web existente.
- ✓Quando você quer que seu aplicativo web use recursos avançados de IA como aprovações e histórico de conversas.
Exemplo do que pedir para a IA
“Como faço para conectar meu aplicativo React com CopilotKit a um agente inteligente no Microsoft Foundry?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta configura a comunicação entre o seu aplicativo React (CopilotKit) e o agente inteligente (Microsoft Agent Framework) usando um protocolo chamado AG-UI. Ela usa serviços da Microsoft (Foundry) para hospedar o agente e gerenciar a conversa.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add github/awesome-copilot --skill foundry-hosted-agent-copilotkitOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/foundry-hosted-agent-copilotkit/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
CopilotKit + AG-UI + Agentes hospedados no Microsoft Foundry
Use esta habilidade quando um aplicativo React/Next.js usa o CopilotKit e se comunica via AG-UI com um agente do Microsoft Agent Framework (MAF) hospedado no Microsoft Foundry. Isso abrange novas implementações e alterações em aplicativos existentes. Agentes hospedados no Foundry são um serviço pago do Azure.
Crie o esqueleto do agente com azd ai agent init e o frontend com suas ferramentas usuais de React/Next.js. Em seguida, siga esta habilidade para tudo que conecta os dois.
Modelo mental
React (CopilotKit v2) CopilotKitProvider / CopilotChat threadId=<conv_ id> / useInterrupt
│ HTTP
CopilotKit runtime CopilotRuntime({ agents: { default: new HttpAgent({ url }) } })
│ AG-UI (SSE)
AG-UI gateway (FastAPI) add_agent_framework_fastapi_endpoint(app, AgentFrameworkAgent(FoundryAgent(...),
use_service_session=True, service_session_id_from_thread_id=True)) ← keeps no thread state
│ OpenAI Responses + Entra token (https://ai.azure.com/.default)
Foundry hosted agent ResponsesHostServer(Agent(tools=[...])) ← deployed with azd
Um agente hospedado implantado não fala AG-UI. Ele expõe .../agents/<name>/endpoint/protocols/openai/responses (protocolo de Respostas) ou .../protocols/invocations. Traduza com o adaptador próprio do MAF (FoundryAgent + agent-framework-ag-ui) em vez de escrever um tradutor SSE manualmente. Navegadores não podem armazenar o token Entra, então o gateway é sempre do lado do servidor.
Use a plataforma primeiro
Antes de escrever qualquer conexão, verifique esta tabela. Cada linha representa algo que bases de código mais antigas construíram manualmente.
| Necessidade | Primitiva nativa (não crie manualmente) |
|---|---|
| Histórico de conversas entre turnos e reinícios | Conversas do Foundry: crie uma por chat, use seu ID conv_… como ID de thread do AG-UI, e o gateway o passa adiante (sem armazenamento de snapshot) |
| Aprovações de ferramentas duráveis | ResponsesHostServer persiste solicitações de aprovação por padrão (FoundryFunctionApprovalStore). O adaptador AG-UI as transforma em interrupções AG-UI e encaminha as decisões de volta para o agente hospedado |
| Execuções que sobrevivem a desconexões do navegador | Respostas background: true + store: true, depois consulte ou reconecte (veja conexão) |
| Fluxos de trabalho duráveis de várias etapas com portões | Invocações de agente hospedado + @multi_turn_task + FoundryStateStore |
| Arquivos por usuário para o agente | API de Arquivos de Sessão; o agente lê $HOME com suas próprias ferramentas. Nunca insira documentos grandes diretamente no prompt |
| Memória de longo prazo do usuário | Foundry Memory Store (escopo de usuário) ou FoundryMemoryProvider |
| Catálogos de ferramentas, pesquisa na web, interpretador de código | Toolbox do Foundry (FoundryToolbox) com Pesquisa de Ferramentas, em vez de listar todas as ferramentas antecipadamente |
| Documentos ao vivo enquanto codifica | Servidores Microsoft Learn e Foundry MCP (agrupados com o plugin desta habilidade) |
Escolha a conexão
| Se o aplicativo precisar de… | Use | Tamanho do gateway |
|---|---|---|
| Agente hospedado + chat + ferramentas + aprovações (padrão) | A. Gateway AG-UI sobre um agente hospedado de Respostas | ~50 linhas de Python |
| Todos os padrões de estado, protótipo local, sem computação Foundry | B. AG-UI em processo (agente roda dentro do aplicativo FastAPI) | ~15 linhas |
| Execuções em segundo plano que continuam após desconexão, reconexão, listas de conversas por usuário | C. Gateway de execuções em segundo plano (agente AG-UI personalizado sobre conversas Foundry) | ~150 linhas de TypeScript |
| Plano de várias etapas → aprovar → executar, etapas irreversíveis que não devem ser executadas duas vezes | D. Agente hospedado de invocações ao lado de A ou C | Proxy REST |
O código para cada um está em references/wiring.md. Em uma base de código existente, identifique a conexão antes de alterar qualquer coisa:
FoundryAgent(...)encapsulado poradd_agent_framework_fastapi_endpointsignifica A.Agent(client=...)encapsulado diretamente significa B.- Um
AbstractAgentpersonalizado chamando/responsescombackgroundsignifica C. protocol: invocationsemazure.yamlsignifica D.
Fluxo de trabalho
Escolha ou identifique a conexão (tabela acima).
Use a versão mais recente de cada pacote (
@copilotkit/*,@ag-ui/*,agent-framework-*,azde sua extensãoazure.ai.agents). Em seguida, baseie-se em fontes ao vivo:- o servidor Microsoft Learn MCP para MAF e Foundry
- o servidor Foundry MCP para estado do projeto
- docs.copilotkit.ai e os arquivos
.d.tsincluídos nos pacotes@copilotkit/*instalados - docs.ag-ui.com
APIs mudam entre versões menores, então não confie em nomes memorizados.
…
Perguntas frequentes
O que é um 'agente'?
Um agente é um programa de computador que pode realizar tarefas, entender comandos e interagir com você, como um assistente virtual.
O que é Microsoft Foundry?
Foundry é um serviço da Microsoft que permite hospedar e gerenciar agentes inteligentes na nuvem, tornando-os acessíveis para seus aplicativos.
O que é CopilotKit?
CopilotKit é uma biblioteca para React que facilita a criação de interfaces de chat e a integração com agentes inteligentes em seus aplicativos web.
Detalhes
Descrição original do autor
Build and evolve agentic web apps that pair a CopilotKit React frontend with a Microsoft Agent Framework agent running as a Microsoft Foundry hosted agent, connected over the AG-UI protocol. Covers choosing the wiring, using Foundry-native primitives instead of hand-rolled plumbing, agent tools, human-in-the-loop approvals, generative UI and shared state, local run and azd deploy, debugging the ev
repo: github/awesome-copilot
Popularidade
- Estrelas no GitHub
- 40 mil
- Posição no ranking
- #5151
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
acquire-codebase-knowledge
Ajuda seu agente a entender e documentar um projeto de código existente. É útil para novas pessoas entrarem no projeto ou para ter uma visão geral da arquitetura.
github/awesome-copilot
acreadiness-assess
Faz seu agente avaliar a prontidão de um projeto para IA e gerar um relatório. É útil para entender o quão bem um projeto está preparado para usar ferramentas de IA.
github/awesome-copilot
acreadiness-generate-instructions
Ajuda seu agente a criar instruções para ferramentas de IA baseadas em uma avaliação. É útil para melhorar a forma como a IA interage com o código e fecha lacunas identificadas.
github/awesome-copilot
acreadiness-policy
Faz seu agente ajudar a definir ou aplicar políticas para avaliação de projetos de IA. É útil para padronizar a forma como os projetos são avaliados e garantir conformidade.
github/awesome-copilot
Skills parecidas
agent-architecture-audit
Faz seu agente verificar se tudo está funcionando corretamente. Ele encontra e conserta problemas em sistemas de IA, garantindo que funcionem como esperado.
affaan-m/ECC
agent-eval
Ajuda seu agente a comparar diferentes ferramentas de programação de IA. Ele mede qual é mais rápido, barato e confiável para realizar tarefas específicas.
affaan-m/ECC
agent-harness-construction
Faz seu agente entender melhor como realizar tarefas. Ele otimiza as ferramentas e instruções que o agente usa para aumentar suas chances de sucesso.
affaan-m/ECC