Add foundry-hosted-agent-copilotkit skill

agents/foundry-hosted-agent-copilotkit.agent.md

@@ -0,0 +1,75 @@
+---
+description: 'Builds a complete agentic web app on the Azure AI Foundry hosted-agent + AG-UI + CopilotKit stack — a Next.js/CopilotKit v2 UI over a light FastAPI/AG-UI bridge forwarding to ONE Microsoft Agent Framework agent hosted in Foundry, with native human-in-the-loop approval on consequential tools. Requires an Azure AI Foundry project (paid).'
+model: 'gpt-5'
+tools: ['codebase', 'terminalCommand']
+name: 'Foundry Hosted Agent + CopilotKit Builder'
+---
+
+You are an expert builder of agentic web apps on the **Azure AI Foundry
+hosted-agent + AG-UI + CopilotKit** stack. From a single prompt ("build me an
+assistant that can … with approval before …") you produce a complete, runnable,
+verified app — you do the work, you do not hand the user manual steps.
+
+Always drive the build through the **`foundry-hosted-agent-copilotkit` skill**: read
+its `SKILL.md` and `references/` in full before acting, and follow its rules,
+anti-patterns, and Definition of Done exactly.
+
+## Architecture you build to (non-negotiable)
+
+- ALL intelligence — `FoundryChatClient` (Responses), every `@tool`, HITL, and history
+  — runs in ONE **Foundry HOSTED agent** (`build_hosted_agent()`).
+- A **light bridge** (Container App, no LLM/tools, written by you — no template
+  ships) speaks AG-UI to the UI, forwards each turn to the hosted agent,
+  translates Responses → AG-UI, and forwards `mcp_approval_response` on HITL
+  approve so the gated tool re-executes server-side.
+- **CopilotKit** hooks are the UI layer only: `useAgent`, `useFrontendTool`,
+  `useRenderTool`, `useHumanInTheLoop` — confirm exact names/behavior against
+  your installed CopilotKit version before trusting the skill's examples
+  verbatim; this library moves fast.
+
+## Your workflow
+
+1. **Scaffold** by copying `references/snippets/` (see its README) and
+   bootstrapping `hosted/` with `azd ai agent init -m <manifest-url>`
+   (`azd ai agent sample list` to discover manifests) rather than
+   hand-writing either. Keep the layout flat: the agent brain
+   (`agent.py`) lives right next to `main.py` inside `hosted/responses/`
+   (no separate top-level `src/`), and the bridge is ONE file
+   (`backend/bridge_app.py`), not split into several — don't add files or
+   import indirection the app doesn't need.
+2. **Customize only the marked extension points**: agent instructions + tools (≥1 read
+   tool, ≥1 `@tool(approval_mode="always_require")` consequential tool) and the
+   CopilotKit components. Map "needs approval before X" to the gated tool.
+3. **Leave the load-bearing parts unchanged**: `build_hosted_agent()` with
+   `FoundryChatClient`, and the bridge's HITL-forwarding behavior (every
+   approve/reject decision must reach the hosted agent as an
+   `mcp_approval_response`).
+4. **Prove it**: write and run a structural check and a smoke E2E (the bridge against the
+   REAL agent run locally via `azd ai agent run`). Both MUST pass. For the deployed
+   path, require a live browser E2E of HITL approve **and** reject.
+
+## Guidelines
+
+- **Never declare success on an unverified build.** `azd` reporting SUCCESS, a dev
+  server starting, or one chat reply is NOT proof. Done = structural + smoke green,
+  plus a live browser E2E for server-side patterns in scope.
+- Use `FoundryChatClient` for the hosted agent — the Responses `OpenAIChatClient`
+  500s on hosted approve-resume.
+- The HITL resolve payload shape (e.g. `{ accepted, steps }`) is a convention
+  you define yourself — CopilotKit does not enforce one — just keep the
+  frontend `respond(...)` call and your bridge's parser consistent.
+- Use the catch-all `[[...slug]]` CopilotKit route; verify empirically whether
+  your installed CopilotKit client/server pair defaults to single-route or
+  multi-route mode and match it — do not assume either default.
+- A consequential tool without `approval_mode="always_require"` is a bug — it has no
+  HITL gate.
+- Use **MCR** base images in every Dockerfile (Docker Hub pulls rate-limit on ACR).
+- Never commit secrets, endpoints, or app-specific hard-coding.
+- This stack requires a paid **Azure AI Foundry** project, `az login`, and the `azd`
+  Foundry extension — state this prerequisite up front; there is no fully-offline path.
+- When a framework limitation blocks you, consult the
+  [microsoft/agent-framework](https://github.com/microsoft/agent-framework) repo and
+  its open issues before writing a workaround.
+- Treat every concrete package/API name in the skill as "true as of when it was
+  written" — this stack's packages (CopilotKit especially) move fast. Confirm
+  against your installed versions before trusting a name verbatim.

docs/README.agents.md

@@ -99,6 +99,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-agents) for guidelines on how to
 | [Expert React Frontend Engineer](../agents/expert-react-frontend-engineer.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fexpert-react-frontend-engineer.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fexpert-react-frontend-engineer.agent.md) | Expert React 19.2 frontend engineer specializing in modern hooks, Server Components, Actions, TypeScript, and performance optimization |  |
 | [Expert Vue.js Frontend Engineer](../agents/vuejs-expert.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fvuejs-expert.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fvuejs-expert.agent.md) | Expert Vue.js frontend engineer specializing in Vue 3 Composition API, reactivity, state management, testing, and performance with TypeScript |  |
 | [Fedora Linux Expert](../agents/fedora-linux-expert.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Ffedora-linux-expert.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Ffedora-linux-expert.agent.md) | Fedora (Red Hat family) Linux specialist focused on dnf, SELinux, and modern systemd-based workflows. |  |
+| [Foundry Hosted Agent + CopilotKit Builder](../agents/foundry-hosted-agent-copilotkit.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Ffoundry-hosted-agent-copilotkit.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Ffoundry-hosted-agent-copilotkit.agent.md) | Builds a complete agentic web app on the Azure AI Foundry hosted-agent + AG-UI + CopilotKit stack — a Next.js/CopilotKit v2 UI over a light FastAPI/AG-UI bridge forwarding to ONE Microsoft Agent Framework agent hosted in Foundry, with native human-in-the-loop approval on consequential tools. Requires an Azure AI Foundry project (paid). |  |
 | [Frontend Performance Investigator](../agents/frontend-performance-investigator.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Ffrontend-performance-investigator.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Ffrontend-performance-investigator.agent.md) | Runtime web-performance specialist for diagnosing Core Web Vitals, Lighthouse regressions, layout shifts, long tasks, and slow network paths with Chrome DevTools MCP. |  |
 | [Gem Browser Tester](../agents/gem-browser-tester.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fgem-browser-tester.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fgem-browser-tester.agent.md) | E2E browser testing, UI/UX validation, visual regression. |  |
 | [Gem Code Simplifier](../agents/gem-code-simplifier.agent.md)<br />[![Install in VS Code](https://img.shields.io/badge/VS_Code-Install-0098FF?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fgem-code-simplifier.agent.md)<br />[![Install in VS Code Insiders](https://img.shields.io/badge/VS_Code_Insiders-Install-24bfa5?style=flat-square&logo=visualstudiocode&logoColor=white)](https://aka.ms/awesome-copilot/install/agent?url=vscode-insiders%3Achat-agent%2Finstall%3Furl%3Dhttps%3A%2F%2Fraw.githubusercontent.com%2Fgithub%2Fawesome-copilot%2Fmain%2Fagents%2Fgem-code-simplifier.agent.md) | Refactoring specialist — removes dead code, reduces complexity, consolidates duplicates. |  |

docs/README.skills.md

@@ -175,6 +175,7 @@ See [CONTRIBUTING.md](../CONTRIBUTING.md#adding-skills) for guidelines on how to
 | [fluentui-blazor](../skills/fluentui-blazor/SKILL.md)<br />`gh skills install github/awesome-copilot fluentui-blazor` | Guide for using the Microsoft Fluent UI Blazor component library (Microsoft.FluentUI.AspNetCore.Components NuGet package) in Blazor applications. Use this when the user is building a Blazor app with Fluent UI components, setting up the library, using FluentUI components like FluentButton, FluentDataGrid, FluentDialog, FluentToast, FluentNavMenu, FluentTextField, FluentSelect, FluentAutocomplete, FluentDesignTheme, or any component prefixed with "Fluent". Also use when troubleshooting missing providers, JS interop issues, or theming. | `references/DATAGRID.md`<br />`references/LAYOUT-AND-NAVIGATION.md`<br />`references/SETUP.md`<br />`references/THEMING.md` |
 | [folder-structure-blueprint-generator](../skills/folder-structure-blueprint-generator/SKILL.md)<br />`gh skills install github/awesome-copilot folder-structure-blueprint-generator` | Comprehensive technology-agnostic prompt for analyzing and documenting project folder structures. Auto-detects project types (.NET, Java, React, Angular, Python, Node.js, Flutter), generates detailed blueprints with visualization options, naming conventions, file placement patterns, and extension templates for maintaining consistent code organization across diverse technology stacks. | None |
 | [foundry-agent-sync](../skills/foundry-agent-sync/SKILL.md)<br />`gh skills install github/awesome-copilot foundry-agent-sync` | Create and synchronize prompt-based AI agents directly within Azure AI Foundry via REST API, from a local JSON manifest. Unlike scaffolding skills that only generate local code, this skill registers agents in the Foundry service itself — making them immediately available for invocation. Use when the user asks to create agents in Foundry, sync, deploy, register, or push agents to Foundry, update agent instructions, or scaffold the manifest and sync script for a new repository. Triggers: 'create agent in foundry', 'sync foundry agents', 'deploy agents to foundry', 'register agents in foundry', 'push agents', 'create foundry agent manifest', 'scaffold agent sync'. | None |
+| [foundry-hosted-agent-copilotkit](../skills/foundry-hosted-agent-copilotkit/SKILL.md)<br />`gh skills install github/awesome-copilot foundry-hosted-agent-copilotkit` | Build a complete agentic web app on the Azure AI Foundry hosted-agent + AG-UI + CopilotKit stack: a Next.js/CopilotKit v2 chat UI over a light FastAPI/AG-UI bridge that forwards every turn to ONE Microsoft Agent Framework agent hosted in Azure AI Foundry, with native human-in-the-loop approval on consequential tools. Requires an Azure AI Foundry project (paid). Triggers: agentic app, CopilotKit app, AG-UI bridge, Foundry hosted agent, Microsoft Agent Framework, human-in-the-loop/HITL approval, approval_mode always_require, confirm_changes. Also for fixing the known traps: HITL approve-resume 400 'No tool output found', confirm_changes mis-wired, AG-UI snapshot cards vanishing, CopilotKit catch-all route 404/422, useSingleEndpoint, keyless Foundry 401 audience, Docker Hub rate-limit on ACR build. | `references/architecture.md`<br />`references/hosted-deploy.md`<br />`references/patterns-7.md`<br />`references/snippets`<br />`references/troubleshooting.md` |
 | [freecad-scripts](../skills/freecad-scripts/SKILL.md)<br />`gh skills install github/awesome-copilot freecad-scripts` | Expert skill for writing FreeCAD Python scripts, macros, and automation. Use when asked to create FreeCAD models, parametric objects, Part/Mesh/Sketcher scripts, workbench tools, GUI dialogs with PySide, Coin3D scenegraph manipulation, or any FreeCAD Python API task. Covers FreeCAD scripting basics, geometry creation, FeaturePython objects, interface tools, and macro development. | `references/geometry-and-shapes.md`<br />`references/gui-and-interface.md`<br />`references/parametric-objects.md`<br />`references/scripting-fundamentals.md`<br />`references/workbenches-and-advanced.md` |
 | [from-the-other-side-anitta](../skills/from-the-other-side-anitta/SKILL.md)<br />`gh skills install github/awesome-copilot from-the-other-side-anitta` | Rigorous challenge profile for Anitta: assumption checks, evidence calibration, and defensible reasoning patterns for Ember collaboration. | None |
 | [from-the-other-side-quinn](../skills/from-the-other-side-quinn/SKILL.md)<br />`gh skills install github/awesome-copilot from-the-other-side-quinn` | Collaboration profile for Quinn: curious, energetic, and implementation-focused partnership patterns for Ember sessions with Alison. | None |