Skip to content
Get packs

Guide · Agent skill

How to use the CopilotKit + Foundry Hosted Agent Wiring agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

This agent skill teaches an AI coding assistant how to connect a React or Next.js chat interface built with CopilotKit to an agent built with Microsoft Agent Framework and hosted in Microsoft Foundry, using the AG-UI streaming protocol. It is for developers building that kind of app, and for teams adding approval screens or debugging event streams in an existing one. After using it, you should be able to choose a connection pattern, build or change the wiring, and verify it before deploying.

CopilotKit + Foundry Hosted Agent Wiringgithub/awesome-copilot · MIT

Quick start

  1. 1Install the skill. Unzip the downloaded ZIP into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills.
  2. 2Describe your task. Ask for the connection, tool, approval or debugging work in plain language that mentions CopilotKit, AG-UI or Foundry.
  3. 3Identify your wiring. Let the agent check which of the four wiring patterns your code already uses before it changes anything.
  4. 4Scaffold the hosted agent. Create the agent in a fresh directory with azd ai agent init and confirm the environment values are set.
  5. 5Add the AG-UI gateway and frontend. Wire the FastAPI gateway, the CopilotKit runtime route and the React provider, then test with curl before the UI.
  6. 6Verify and deploy. Check every completion criterion locally, then run azd deploy and test the deployed agent.

What does the skill make the agent do?

Once installed, the agent knows how to wire the browser, a server-side gateway and a Foundry hosted agent together. It guides you to a connection pattern that fits your app, and points to Foundry's built-in features for conversation history, approvals and memory instead of custom code.

It also works through a checklist for building, changing, testing and deploying the setup, including human approval steps for sensitive tool actions. Coverage includes agent tools, generative UI, shared state, local runs with azd, debugging the event stream and safe upgrades.

  • Choose among several wiring patterns (A to D in the skill) based on what the app needs.
  • Use Foundry-native primitives such as conversations and durable approval storage rather than hand-written plumbing.
  • Gate side-effecting tools with human-in-the-loop approval using useInterrupt on the frontend.
  • Debug AG-UI event streams layer by layer, from the hosted agent to the browser.

How do you install the skill?

Download the skill ZIP from this page and unzip it. Put the resulting folder in your user skills directory, ~/.claude/skills/, or in a project-specific .claude/skills/ folder inside your repository.

Alternatively, in the Claude apps, open Settings, then Capabilities, then Skills, and upload the ZIP there.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into .claude/skills/ in your project
  • Claude apps: Settings → Capabilities → Skills → upload

How do you trigger the skill with a natural request?

You do not need a special command. Describe the task in plain language that involves CopilotKit, AG-UI, a Microsoft Foundry hosted agent or Agent Framework. The skill is meant for work that connects a React or Next.js frontend to that backend.

Requests that match the skill's scope include building a new app, adding a tool, adding an approval step, or figuring out why a stream stops.

  • "Connect my Next.js CopilotKit chat to my Foundry hosted agent over AG-UI."
  • "Add human approval before the agent sends an email tool runs."
  • "My AG-UI event stream stops after the first tool call. Help me debug it."
  • "Upgrade our CopilotKit and Agent Framework packages safely."

What do you need before you start?

The skill assumes an Azure setup. You need a Microsoft Foundry project and an Azure subscription, because Foundry hosted agents are a paid Azure service. You also need the Azure Developer CLI (azd) with the azure.ai.agents extension, Python with FastAPI and agent-framework-ag-ui, and Node.js with the CopilotKit React and @ag-ui packages.

Authentication uses Entra ID credentials for the Foundry endpoint, with the token scope https://ai.azure.com/.default. The skill can optionally use the Microsoft Learn and Foundry MCP servers for live documentation.

  • Microsoft Foundry project and Azure subscription (paid)
  • Azure Developer CLI (azd) with the azure.ai.agents extension
  • Python with FastAPI and agent-framework-ag-ui
  • Node.js with CopilotKit React packages and @ag-ui packages
  • Entra ID credentials, token scope https://ai.azure.com/.default
  • Optional: Microsoft Learn and Foundry MCP servers

Example: scaffolding a hosted agent

The skill's first build step scaffolds the agent non-interactively in a fresh directory, then checks the environment values that the deployment depends on. Treat the placeholders as values you supply from your own project.

Running init in a directory that already contains azure.yaml or another azd environment can leave the project binding incomplete, so start clean.

  • Confirm FOUNDRY_PROJECT_ENDPOINT, AZURE_AI_MODEL_DEPLOYMENT_NAME and AZURE_LOCATION are set.
  • Run the agent locally with azd ai agent run, then smoke-test with azd ai agent invoke --local.
azd ai agent init --no-prompt -e <env> -p <project-arm-id> -d <model-deployment> --agent-name my-agent --protocol responses --deploy-mode code --runtime python_3_13 --entry-point main.py --src src/my-agent azd env get-values -e <env>

What people use it for

  • Building a React or Next.js chat app backed by a Microsoft Foundry hosted agent.
  • Adding an approval screen so a user must confirm a sensitive tool action before it runs.
  • Adding a new agent tool and confirming its streaming events reach the UI.
  • Debugging an AG-UI event stream that stops or reports the wrong error.
  • Upgrading CopilotKit and Agent Framework packages in an existing codebase.

Frequently asked questions

Is the foundry-hosted-agent-copilotkit skill free?

The skill is published under the MIT licence on github/awesome-copilot. However, the setup depends on Microsoft Foundry hosted agents, which are a paid Azure service, so you will pay for the Azure resources you use.

What do I need to install before using this skill?

You need a Microsoft Foundry project and Azure subscription, the Azure Developer CLI with the azure.ai.agents extension, Python with FastAPI and agent-framework-ag-ui, and Node.js with the CopilotKit React and @ag-ui packages. Entra ID credentials for the Foundry endpoint are also required.

Does this skill run scripts on my machine?

No. The skill does not run scripts, but it does use the network. Its optional Microsoft Learn and Foundry MCP servers fetch live documentation, and the setup you build calls Azure services.

Can I use this skill without Azure?

Not as intended. The skill assumes Azure, azd and Entra authentication. If you want a simple chatbot with no Foundry backend, or you must avoid paid cloud services, pick a different approach.

How do I install the skill in Claude?

Unzip the downloaded ZIP into ~/.claude/skills/ for personal use or into .claude/skills/ inside a project. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.

Is it safe to let the agent use tools that change data?

The skill recommends requiring approval for side-effecting tools, using approval_mode set to always_require and a useInterrupt approval screen. Test that approving runs the tool once, rejecting runs it zero times, and later turns do not run it again.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

This skill suits developers building a React or Next.js chat app on a Microsoft Foundry hosted agent, and teams adding approval flows or debugging AG-UI streams in an existing CopilotKit and Agent Framework codebase. It is a poor fit for simple chatbots without an Azure backend, for projects that must avoid paid cloud services, or for systems where unreviewed tools could take irreversible actions without the recommended approval flow.

Download the skill