microsoft/mcp-interactiveUI-samples

microsoft/mcp-interactiveUI-samples

Description: A dedicated MCP app samples repository for lightweight, pattern-focused UI samples.

Language: HTML

License: MIT

Stars: 60

Forks: 15

Open issues: 16

Created: 2026-02-25T04:57:53Z

Pushed: 2026-06-13T20:42:31Z

Default branch: main

Fork: no

Archived: no

README:

MCP based interactive UI samples for Microsoft 365 Copilot

This repository contains sample MCP servers with rich interactive UI widgets that render inside Microsoft 365 Copilot. Use these samples to learn how to build declarative agents with visually rich tool responses.

Interactive UI in Copilot

You can add interactive UI widgets to your declarative agents by adding a Model Context Protocol (MCP) server-based action to your agent and extending the MCP tools used by the agent to include UI. Microsoft 365 Copilot supports UI widgets created using the following methods:

• [MCP Apps](https://modelcontextprotocol.github.io/ext-apps/api/documents/Overview.html) — An extension to MCP that enables MCP servers to deliver interactive user interfaces to hosts.
• [OpenAI Apps SDK](https://developers.openai.com/apps-sdk) — Tools to build ChatGPT apps based on the MCP Apps standard with extra ChatGPT functionality.

Samples

Expense Submission — AI-powered Document & File Workflows

MCP server for expense report filing with file handling, Entra SSO with On-Behalf-Of (OBO) flow, and Microsoft Graph API integration. Demonstrates receipt matching from email, OneDrive/SharePoint, and local folders with interactive widgets for expense management.

• [MCP Apps version](mcp-apps/expense-submission/node/README.md)
• Watch demo on YouTube: https://www.youtube.com/watch?v=Jh7w13q-a6I&t=3s

[](https://www.youtube.com/watch?v=Jh7w13q-a6I&t=3s)

| Prompt | What it does | |---|---| | Help me file my expense report for this month's business trip. | Lists expense items, lets you select them, creates a draft, auto-matches email receipts, and guides you through submission. | | *(Upload receipts in Copilot chat)* | The agent automatically matches uploaded receipts with your system of record data (in this example, dummy corporate card transactions). |

---

Field Service Dispatch

MCP server for a field service dispatch workflow with assignment intake, map visualization, dispatch planning, and confirmation flow. Requires a free Mapbox token for map widgets.

• [MCP Apps version](mcp-apps/fieldops/node/src/mcpserver/README.md)
• [OpenAI Apps SDK version](oai-apps-sdk/fieldops/node/README.md)

[](https://www.youtube.com/watch?v=rsfPzTxCgjQ)

| Prompt | What it does | |---|---| | Show me new assignments from the last 24 hours. | Lists intake items in a list widget. | | Show these assignments on the map. | Renders assignments on an interactive map. | | Create a dispatch plan for these assignments. | Shows a dispatch planning UI with technician assignments. |

---

Approvals Box — AI-powered Approval Queue Management

MCP server for approval queue management with risk triage, bulk decisions, and inline widgets for reviewing, approving, rejecting, and creating approval requests. Auto-seeded with ~50 realistic demo approvals across 7 types.

• [OpenAI Apps SDK version](oai-apps-sdk/approvals-box/node/README.md)


| Prompt | What it does | |---|---| | Show me my pending approvals. | Opens the list widget with all pending approvals, sorted by due date. | | Which approvals are high risk? | Filters the list to high-risk items and opens the widget. | | Show me the details for the Activision InComm approval. | Resolves the approval by name and opens the detail widget. | | Approve the pending purchase order from Kevin Walsh. | Opens the detail widget with the approve dialog pre-opened. | | Bulk reject all low-priority travel exceptions. | Opens the list filtered to travel exceptions with the bulk-reject dialog. | | Draft a rejection reason for the capex request. | AI drafts a rejection note; confirm to reject. |

---

Trey Research — HR Consultant Management

MCP server for managing HR consultants, projects, and assignments with Fluent UI React widgets including an HR dashboard, consultant profile cards, bulk editor, and project detail views.

• [Declarative Agent connected to MCP server (MCP Apps)](mcp-apps/trey-research/node/README.md)
• [Declarative Agent connected to MCP server (OpenAI Apps SDK)](oai-apps-sdk/trey-research/node/README.md)
• [MCP Server using MCP Apps](mcp-apps/trey-research/node/src/mcpserver/README.md)
• [MCP Server using OpenAI Apps SDK](oai-apps-sdk/trey-research/node/src/mcpserver/README.md)

| Prompt | What it does | |---|---| | Show the HR dashboard. | Opens the HR consultant dashboard widget. | | I need a React developer for the Copilot project at Consolidated Messenger. Find someone with React skills, show me their profile, and assign them as a Developer. | Searches consultants by skill, displays a profile card, and assigns the consultant to a project — all by name, no IDs needed. | | Show me the HR dashboard filtered to only billable assignments. Which consultants have the most forecasted hours, and are any of them over-allocated? | Opens the interactive dashboard with a billable filter applied, then the AI analyzes forecast data across consultants to surface workload insights. | | We need to staff the Disaster Recovery project at Relecloud. Show me the project details, then find all consultants who have Python or Java skills and bulk-assign them as Developers at $120/hr. | Chains project lookup, skill-based consultant search, and bulk assignment in a single conversation — replacing multiple clicks across an HR system. | | Compare Avery Howard and Sanjay Puranik — show me both their profiles side by side. Who has more certifications, and which projects are they currently assigned to? | Fetches two consultant profiles by name and synthesizes a comparison of certifications, skills, and active assignments. |

---

Zava Insurance — Claims Management

MCP server for insurance claims management with claims dashboard, claim detail with map view, and contractor list widgets.

• [Declarative Agent connected to MCP server (MCP Apps)](mcp-apps/zava-insurance/node/README.md)...