Skip to content
Get packs

CopilotKit + Foundry Hosted Agent Wiring

Wire a CopilotKit React app to a Microsoft Foundry hosted agent over AG-UI, with approvals and tools.

Source Download skill
Repository
github/awesome-copilot
Stars
40,703
Licence
MIT
Files
4 files

What it does

When installed, the agent knows how to connect a React or Next.js chat interface (CopilotKit) to an AI agent built with Microsoft Agent Framework and hosted in Microsoft Foundry, using the AG-UI streaming protocol. It guides choices between several connection patterns, points to Foundry's built-in features for conversation history, approvals and memory instead of custom code, and gives a checklist for building, changing, testing and deploying the setup, including human approval steps for sensitive tool actions.

Great for

  • Developers building a React or Next.js chat app backed by a Microsoft Foundry hosted agent
  • Teams adding human-in-the-loop approval screens to an existing CopilotKit and Agent Framework codebase
  • Engineers debugging AG-UI event streams or upgrading CopilotKit and Agent Framework packages safely

Skip it if

  • Non-developers or simple chatbots with no Azure Foundry backend, since the setup assumes Azure, azd and Entra authentication
  • Projects that must avoid paid cloud services, because Foundry hosted agents are a paid Azure service
  • Production systems where unreviewed agent tools could take irreversible actions without the approval flow the skill recommends

Try asking

  • “Build a new React app with a CopilotKit chat that talks to a Foundry hosted agent using AG-UI”
  • “Add an approval dialog with useInterrupt before my agent's delete-file tool runs”
  • “Debug why my AG-UI event stream stops after a tool call in my CopilotKit app”
  • “Upgrade our CopilotKit and Agent Framework packages to the latest versions safely”
Step-by-step guide: how to use CopilotKit + Foundry Hosted Agent WiringInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 4 original files, the MIT licence and an attribution note.

    foundry-hosted-agent-copilotkit.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip foundry-hosted-agent-copilotkit.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip foundry-hosted-agent-copilotkit.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Identify which of the four wiring patterns your existing code uses before changing anything, as the skill instructs.
  • Test chat and approval resume with curl against a real conversation ID before wiring up the UI.
  • Keep the AG-UI gateway server-side, since browsers cannot safely hold the Entra token.

What's inside

  • references/hitl.md
  • references/troubleshooting.md
  • references/wiring.md
  • SKILL.md

Redistributed unmodified from github/awesome-copilot under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.