All videos
0:00 / 0:00
research

Build an MCP App with Interactive Widgets | Copilot Developer Camp Lab

Microsoft 365 Developer16 June 2026Watch on YouTube

Part of series

Ep. 5 · Mcp 2026 Best

View the series

What you'll learn

  • Connect MCP tools to UI widgets so AI agents return not just data, but forms, dashboards and action panels directly in agent responses
  • Use MCP Inspector to debug tool handlers and widgets during development
  • Build MCP Apps that work cross-platform and function identically across ChatGPT, Claude, and Microsoft 365 Copilot

Frequently asked questions

What is the difference between MCP tools and MCP Apps?
MCP tools return only data, while MCP Apps return data together with UI components such as forms, dashboards and action panels that appear directly in the agent's response.
Which AI platforms do MCP Apps work on?
MCP Apps work cross-platform on ChatGPT, Claude, and Microsoft 365 Copilot. The same server can be deployed on all three platforms without modifications.
How do you debug MCP widgets and tool handlers?
You use the MCP Inspector to test tool handlers and widgets and view debug information during the development phase.
How do you deploy an MCP App as a Declarative Agent?
After building and testing, you ship your MCP App as a Declarative Agent in Copilot, making it available for AI agents to use.

Topics

In this video

Read next

Description from the channel

MCP tools return data. MCP Apps return data and UI, forms, dashboards, action panels, right inside the agent's response. Lab E11 in Copilot Developer Camp teaches you the pattern: - wire a tool handler to a widget - debug it with MCP Inspector - build one from scratch - ship it as a Declarative Agent in Copilot Same server works across ChatGPT, Claude, and M365 Copilot. Check out the lab 🔗 https://aka.ms/mcp-app-lab ✅SUBSCRIBE TO OUR CHANNEL: www.youtube.com/Microsoft365Developer?sub_confirmation=1