MicrosoftDocs · learn-build-service-prod · Apr 8, 2026 · Apr 9, 2026 · Apr 9, 2026 · Apr 9, 2026
diff --git a/agent-framework/TOC.yml b/agent-framework/TOC.yml
@@ -198,12 +198,38 @@ items:
       href: integrations/ag-ui/frontend-tools.md
     - name: Security Considerations
       href: integrations/ag-ui/security-considerations.md
+    - name: Workflows
+      href: integrations/ag-ui/workflows.md
     - name: Human-in-the-Loop
       href: integrations/ag-ui/human-in-the-loop.md
+    - name: MCP Apps Compatibility
+      href: integrations/ag-ui/mcp-apps.md
     - name: State Management
       href: integrations/ag-ui/state-management.md
     - name: Testing with Dojo
       href: integrations/ag-ui/testing-with-dojo.md
+- name: The Agent Development Journey
+  items:
+  - name: Overview
+    href: journey/index.md
+  - name: LLM Fundamentals
+    href: journey/llm-fundamentals.md
+  - name: From LLMs to Agents
+    href: journey/from-llms-to-agents.md
+  - name: Adding Tools
+    href: journey/adding-tools.md
+  - name: Adding Skills
+    href: journey/adding-skills.md
+  - name: Adding Middleware
+    href: journey/adding-middleware.md
+  - name: Context Providers
+    href: journey/adding-context-providers.md
+  - name: Agents as Tools
+    href: journey/agents-as-tools.md
+  - name: "Agent-to-Agent (A2A)"
+    href: journey/agent-to-agent.md
+  - name: Workflows
+    href: journey/workflows.md
 - name: DevUI
   items:
   - name: Overview

diff --git a/agent-framework/agents/rag.md b/agent-framework/agents/rag.md
@@ -43,6 +43,9 @@ AIAgent agent = azureOpenAIClient
 
 The `TextSearchProvider` requires a function that provides the search results given a query. This can be implemented using any search technology, e.g. Azure AI Search, or a web search engine.
 
+> [!TIP]
+> See the [Vector Stores integration](../integrations/index.md#vector-stores) documentation for more information on how to use a vector store for search results.
+
 Here is an example of a mock search function that returns pre-defined results based on the query.
 `SourceName` and `SourceLink` are optional, but if provided will be used by the agent to cite the source of the information when answering the user's question.
 

diff --git a/agent-framework/integrations/ag-ui/human-in-the-loop.md b/agent-framework/integrations/ag-ui/human-in-the-loop.md
@@ -629,10 +629,10 @@ The server middleware must remove approval protocol messages after processing:
 - **Solution**: After converting approval responses, remove both the `request_approval` tool call and its result message
 - **Reason**: Prevents "tool_calls must be followed by tool messages" errors
 
-## Next Steps
+## Next steps
 
-<!-- - **[Learn State Management](state-management.md)**: Manage shared state with approval workflows -->
-- **[Explore Function Tools](../../agents/tools/tool-approval.md)**: Learn more about approval patterns in Agent Framework
+> [!div class="nextstepaction"]
+> [MCP Apps Compatibility](./mcp-apps.md)
 
 ::: zone-end
 
@@ -1116,12 +1116,10 @@ def transfer_funds(...): pass
 def close_account(...): pass
 ```
 
-## Next Steps
+## Next steps
 
-Now that you understand human-in-the-loop, you can:
-
-- **[Learn State Management](state-management.md)**: Manage shared state with approval workflows
-- **[Explore Advanced Patterns](../../agents/tools/tool-approval.md)**: Learn more about approval patterns in Agent Framework
+> [!div class="nextstepaction"]
+> [MCP Apps Compatibility](./mcp-apps.md)
 
 ## Additional Resources
 

diff --git a/agent-framework/integrations/ag-ui/index.md b/agent-framework/integrations/ag-ui/index.md
@@ -48,7 +48,9 @@ The Agent Framework AG-UI integration supports all 7 AG-UI protocol features:
 
 ## Build agent UIs with CopilotKit
 
-[CopilotKit](https://copilotkit.ai/) provides rich UI components for building agent user interfaces based on the standard AG-UI protocol. CopilotKit supports streaming chat interfaces, frontend & backend tool calling, human-in-the-loop interactions, generative UI, shared state, and much more. You can see a examples of the various agent UI scenarios that CopilotKit supports in the [AG-UI Dojo](https://dojo.ag-ui.com/microsoft-agent-framework-dotnet) sample application.
+[CopilotKit](https://copilotkit.ai/) provides rich UI components for building agent user interfaces based on the standard AG-UI protocol. CopilotKit supports streaming chat interfaces, frontend & backend tool calling, human-in-the-loop interactions, generative UI, shared state, and much more. You can see examples of the various agent UI scenarios that CopilotKit supports in the [AG-UI Dojo](https://dojo.ag-ui.com/microsoft-agent-framework-dotnet) sample application.
+
+To connect a CopilotKit React frontend to an Agent Framework AG-UI backend, register your endpoint as an `HttpAgent` in the CopilotKit runtime. This allows CopilotKit's frontend tools to flow through as AG-UI client tools, and all AG-UI features (streaming, approvals, state sync) work automatically.
 
 CopilotKit helps you focus on your agent’s capabilities while delivering a polished user experience without reinventing the wheel.
 To learn more about getting started with Microsoft Agent Framework and CopilotKit, see the [Microsoft Agent Framework integration for CopilotKit](https://docs.copilotkit.ai/microsoft-agent-framework) documentation.
@@ -136,8 +138,8 @@ To get started with AG-UI integration:
 
 1. **[Getting Started](getting-started.md)**: Build your first AG-UI server and client
 2. **[Backend Tool Rendering](backend-tool-rendering.md)**: Add function tools to your agents
-<!-- 3. **[Human-in-the-Loop](#)**: Implement approval workflows -->
-<!-- 4. **[State Management](#)**: Synchronize state between client and server -->
+3. **[Human-in-the-Loop](human-in-the-loop.md)**: Implement approval workflows
+4. **[State Management](state-management.md)**: Synchronize state between client and server
 
 ## Additional Resources
 
@@ -244,14 +246,17 @@ To get started with AG-UI integration:
 
 1. **[Getting Started](getting-started.md)**: Build your first AG-UI server and client
 2. **[Backend Tool Rendering](backend-tool-rendering.md)**: Add function tools to your agents
-<!-- 3. **[Human-in-the-Loop](#)**: Implement approval workflows -->
-<!-- 4. **[State Management](#)**: Synchronize state between client and server -->
+3. **[Workflows](workflows.md)**: Expose multi-agent workflows through AG-UI
+4. **[Human-in-the-Loop](human-in-the-loop.md)**: Implement approval workflows
+5. **[MCP Apps Compatibility](mcp-apps.md)**: Use MCP Apps with your AG-UI endpoint
+6. **[State Management](state-management.md)**: Synchronize state between client and server
 
 ## Additional Resources
 
 - [Agent Framework Documentation](../../overview/index.md)
 - [AG-UI Protocol Documentation](https://docs.ag-ui.com/introduction)
 - [AG-UI Dojo App](https://dojo.ag-ui.com/) - Example application demonstrating Agent Framework integration
+- [CopilotKit MAF Integration](https://docs.copilotkit.ai/microsoft-agent-framework) - Connect CopilotKit React frontends to AG-UI backends
 - [Agent Framework GitHub Repository](https://github.com/microsoft/agent-framework)
 
 ::: zone-end
diff --git a/agent-framework/integrations/ag-ui/mcp-apps.md b/agent-framework/integrations/ag-ui/mcp-apps.md
@@ -0,0 +1,113 @@
+---
+title: MCP Apps Compatibility with AG-UI
+description: Learn how Agent Framework Python AG-UI endpoints work with CopilotKit's MCPAppsMiddleware for MCP Apps integration
+zone_pivot_groups: programming-languages
+author: moonbox3
+ms.topic: conceptual
+ms.author: evmattso
+ms.date: 04/09/2026
+ms.service: agent-framework
+---
+
+# MCP Apps Compatibility with AG-UI
+
+::: zone pivot="programming-language-csharp"
+
+> [!NOTE]
+> MCP Apps compatibility documentation for the .NET AG-UI integration is coming soon.
+
+::: zone-end
+
+::: zone pivot="programming-language-python"
+
+Agent Framework Python AG-UI endpoints are compatible with the AG-UI ecosystem's [MCP Apps](https://docs.ag-ui.com/concepts/mcp-apps) feature. MCP Apps allows frontend applications to embed MCP-powered tools and resources alongside your AG-UI agent — no changes needed on the Python side.
+
+## Architecture
+
+MCP Apps support is provided by CopilotKit's TypeScript `MCPAppsMiddleware` (`@ag-ui/mcp-apps-middleware`), which sits between the frontend and your Agent Framework backend:
+
+```
+┌─────────────────────────┐
+│  Frontend               │
+│  (CopilotKit / AG-UI)   │
+└────────┬────────────────┘
+         │
+         ▼
+┌─────────────────────────┐
+│  CopilotKit Runtime /   │
+│  Node.js Proxy          │
+│  + MCPAppsMiddleware    │
+└────────┬────────────────┘
+         │ AG-UI protocol
+         ▼
+┌─────────────────────────┐
+│  Agent Framework        │
+│  FastAPI AG-UI Endpoint │
+└─────────────────────────┘
+```
+
+The middleware layer handles MCP tool discovery, iframe-proxied resource requests, and `ui/resourceUri` resolution. Your Python AG-UI endpoint receives standard AG-UI requests and is unaware of the MCP Apps layer.
+
+## No Python-Side Changes Required
+
+MCP Apps integration is entirely handled by the TypeScript middleware. Your existing `add_agent_framework_fastapi_endpoint()` setup works as-is:
+
+```python
+from agent_framework import Agent
+from agent_framework.ag_ui import add_agent_framework_fastapi_endpoint
+from fastapi import FastAPI
+
+app = FastAPI()
+agent = Agent(name="my-agent", instructions="...", client=chat_client)
+
+# This endpoint is MCP Apps-compatible with no additional configuration
+add_agent_framework_fastapi_endpoint(app, agent, "/")
+```
+
+This approach is consistent with how MCP Apps works with all other AG-UI Python integrations — the MCP Apps layer is always in the TypeScript middleware, not in the Python backend.
+
+## Setting Up the Middleware
+
+To use MCP Apps with your Agent Framework backend, set up a CopilotKit Runtime or Node.js proxy that includes `MCPAppsMiddleware` and points at your Python endpoint:
+
+```typescript
+// Example Node.js proxy configuration (TypeScript)
+import { MCPAppsMiddleware } from "@ag-ui/mcp-apps-middleware";
+
+const middleware = new MCPAppsMiddleware({
+  agents: [
+    {
+      name: "my-agent",
+      url: "http://localhost:8888/",  // Your MAF AG-UI endpoint
+    },
+  ],
+  mcpApps: [
+    // MCP app configurations
+  ],
+});
+```
+
+For full setup instructions, see the [CopilotKit MCP Apps documentation](https://docs.copilotkit.ai/copilotkit-mcp/mcp-overview) and the [AG-UI MCP Apps documentation](https://docs.ag-ui.com/concepts/mcp-apps).
+
+## What Is Not in Scope
+
+The following are explicitly **not** part of the Python AG-UI integration:
+
+- **No Python `MCPAppsMiddleware`**: MCP Apps middleware runs in the TypeScript layer only.
+- **No FastAPI handling of iframe-proxied MCP requests**: Resource proxying is handled by the Node.js middleware.
+- **No Python-side `ui/resourceUri` discovery**: Resource URI resolution is a middleware concern.
+
+If your application doesn't need the MCP Apps middleware layer, your Agent Framework AG-UI endpoint works directly with any AG-UI-compatible client.
+
+## Next steps
+
+> [!div class="nextstepaction"]
+> [State Management](./state-management.md)
+
+## Additional Resources
+
+- [AG-UI MCP Apps Documentation](https://docs.ag-ui.com/concepts/mcp-apps)
+- [CopilotKit MCP Apps Documentation](https://docs.copilotkit.ai/copilotkit-mcp/mcp-overview)
+- [Agent Framework GitHub Repository](https://github.com/microsoft/agent-framework)
+
+::: zone-end