Skip to content
Skillpedia
PT
Agents40k · #5151

foundry-hosted-agent-copilotkit

Helps your agent build interactive web applications. It connects a React frontend with an AI agent to create dynamic user experiences.

What it does

This tool helps connect a web application built with React (using CopilotKit) to an intelligent 'agent' (built with Microsoft Agent Framework) running on a paid Microsoft service called Foundry. It facilitates communication between them to create more advanced applications.

When to use it

  • ✓When building a new web application that needs an intelligent agent.
  • ✓When adding or modifying an intelligent agent in an existing web application.
  • ✓When you want your web application to use advanced AI features like approvals and conversation history.

Example of what to ask your AI

“How do I connect my React app with CopilotKit to an intelligent agent on Microsoft Foundry?”

Want more? Open the sections below.

How to use

The easiest way: copy the message below and paste it into Claude, ChatGPT, Cursor or any AI. It reads the skill and follows the instructions.

Skill link

https://github.com/github/awesome-copilot/blob/main/skills/foundry-hosted-agent-copilotkit/SKILL.md

Ready-to-paste message

Use this skill to help me: https://github.com/github/awesome-copilot/blob/main/skills/foundry-hosted-agent-copilotkit/SKILL.md Read the SKILL.md file at that link and follow its instructions for my task.
View on GitHub ↗Raw file
How it works

The tool sets up communication between your React application (CopilotKit) and the intelligent agent (Microsoft Agent Framework) using a protocol called AG-UI. It uses Microsoft services (Foundry) to host the agent and manage the conversation.

Installation

Easiest way: copy the skill link and paste it into Claude, ChatGPT or Cursor asking it to follow the instructions.

In the terminal (Claude Code, Codex, Cursor), in your project folder:

npx skills add github/awesome-copilot --skill foundry-hosted-agent-copilotkit

Or download just the file:

curl -L https://raw.githubusercontent.com/github/awesome-copilot/main/skills/foundry-hosted-agent-copilotkit/SKILL.md -o SKILL.md
Technical content (original SKILL.md)

Original text by the author, straight from GitHub.

CopilotKit + AG-UI + Microsoft Foundry hosted agents

Use this skill when a React/Next.js app uses CopilotKit and talks over AG-UI to a Microsoft Agent Framework (MAF) agent hosted in Microsoft Foundry. This covers new builds and changes to existing apps. Foundry hosted agents are a paid Azure service.

Scaffold the agent with azd ai agent init and the frontend with your usual React/Next.js tooling. Then follow this skill for everything that connects them.

Mental model

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

A deployed hosted agent does not speak AG-UI. It exposes .../agents/<name>/endpoint/protocols/openai/responses (Responses protocol) or .../protocols/invocations. Translate with MAF's own adapter (FoundryAgent + agent-framework-ag-ui) instead of writing an SSE translator by hand. Browsers cannot hold the Entra token, so the gateway is always server-side.

Use the platform first

Before you write any plumbing, check this table. Each row is something older codebases built by hand.

Need Native primitive (don't hand-roll)
Conversation history across turns and restarts Foundry conversations: create one per chat, use its conv_… ID as the AG-UI thread ID, and the gateway passes it through (no snapshot store)
Durable tool approvals ResponsesHostServer persists approval requests by default (FoundryFunctionApprovalStore). The AG-UI adapter turns them into AG-UI interrupts and forwards decisions back to the hosted agent
Runs that survive browser disconnects Responses background: true + store: true, then poll or reconnect (see wiring)
Durable multi-step workflows with gates Invocations hosted agent + @multi_turn_task + FoundryStateStore
Per-user files for the agent Session Files API; the agent reads $HOME with its own tools. Never inline large documents into the prompt
Long-term user memory Foundry Memory Store (user scope) or FoundryMemoryProvider
Tool catalogs, web search, code interpreter Foundry Toolbox (FoundryToolbox) with Tool Search, instead of listing every tool up front
Live docs while coding The Microsoft Learn and Foundry MCP servers (bundled with this skill's plugin)

Choose the wiring

If the app needs… Use Gateway size
Hosted agent + chat + tools + approvals (default) A. AG-UI gateway over a Responses hosted agent ~50 lines of Python
Every state pattern, local prototype, no Foundry compute B. In-process AG-UI (agent runs inside the FastAPI app) ~15 lines
Background runs that keep going after disconnect, reconnect, per-user conversation lists C. Background-runs gateway (custom AG-UI agent over Foundry conversations) ~150 lines of TypeScript
Multi-step plan → approve → execute, irreversible steps that must not run twice D. Invocations hosted agent alongside A or C REST proxy

Code for each is in references/wiring.md. In an existing codebase, identify the wiring before you change anything:

  • FoundryAgent(...) wrapped by add_agent_framework_fastapi_endpoint means A.
  • Agent(client=...) wrapped directly means B.
  • A custom AbstractAgent calling /responses with background means C.
  • protocol: invocations in azure.yaml means D.

Workflow

  1. Pick or identify the wiring (table above).

  2. Use the latest release of every package (@copilotkit/*, @ag-ui/*, agent-framework-*, azd and its azure.ai.agents extension). Then ground on live sources:

    • the Microsoft Learn MCP server for MAF and Foundry
    • the Foundry MCP server for project state
    • docs.copilotkit.ai and the .d.ts files bundled in the installed @copilotkit/* packages
    • docs.ag-ui.com

    APIs move between minor versions, so don't trust memorized names.

…

FAQ

What is an 'agent'?

An agent is a computer program that can perform tasks, understand commands, and interact with you, like a virtual assistant.

What is Microsoft Foundry?

Foundry is a Microsoft service that allows you to host and manage intelligent agents in the cloud, making them accessible to your applications.

What is CopilotKit?

CopilotKit is a library for React that makes it easy to build chat interfaces and integrate with intelligent agents in your web applications.

Details

Original description by the author

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

Popularity

GitHub stars
40k
Ranking position
#5151
License
MIT
Updated
10/15/2026

Is this skill useful?

0

Sign in to vote.

Comments

  • …

More skills from this repository

Documentation40k

acquire-codebase-knowledge

Helps your agent understand and document an existing code project. It's useful for onboarding new people or getting an overview of the architecture.

github/awesome-copilot

Documentation40k

acreadiness-assess

Enables your agent to assess a project's readiness for AI and generate a report. It's useful for understanding how well a project is prepared to use AI tools.

github/awesome-copilot

Documentation40k

acreadiness-generate-instructions

Helps your agent create instructions for AI tools based on an assessment. It's useful for improving how AI interacts with code and closing identified gaps.

github/awesome-copilot

Agents40k

acreadiness-policy

Enables your agent to help define or apply policies for AI project assessment. It's useful for standardizing how projects are evaluated and ensuring compliance.

github/awesome-copilot

Similar skills

Agents280k

agent-architecture-audit

Makes your agent check if everything is working correctly. It finds and fixes problems in AI systems, ensuring they perform as expected.

affaan-m/ECC

Agents280k

agent-eval

Helps your agent compare different AI coding tools. It measures which one is faster, cheaper, and more reliable for specific tasks.

affaan-m/ECC

Agents280k

agent-harness-construction

Makes your agent better understand how to perform tasks. It optimizes the tools and instructions the agent uses to increase its chances of success.

affaan-m/ECC