MCP-UI & web spec enhancements #14
Description
Model Context Protocol UI (MCP-UI)
Note
This proposal references the excellent MCP-UI talk at MCP Dev Summit EU by @idosal @liady. Interested folks are encouraged to watch the talk for a complete view.
The purpose of this issue is to gather input from the W3C's Web Machine Learning community participants for the MCP-UI proposal, identify collaboration opportunities with the MCP-UI project and the UI WG of the MCP community. Possible outcomes could be enhancements to the existing web specs this proposal depends on, proposals for new web specs, improved cohesion between the web specs and the MCP protocol.
Short description
What if every web app in the world could send its own UI to the chat with an AI agent? And avoid the wall of text experience?
MCP-UI is a proposal to fill in this missing piece in agentic experiences, the UX gap.
The proposal is an open protocol to send UI over MCP and standardize UI-to-Host communication.
Example use cases
- An e-commerce app embeds a product page to the chat for the user to visually and interactively explore the product(s) and optionally complete the purchase flow.
- Similarly, a hotel booking site embeds a page that displays available hotel rooms on an interactive map, allowing to complete the booking from within the chat.
- To generalize, any web app that wants to embed a custom UI to the chat when plain text lacks the expressive power. Applicable use cases range from ML-powered experiences (e.g. hosted on Hugging Face Spaces), to UIs for other modalities (e.g. custom audio or video players) to calendar applications and weather radars.
"The web as a commons" benefits:
- Long-tail developers and businesses can retain their brand identity, keep familiar UI and UX while users interact via the chat with their site.
- A text-based chat experience becomes more web-like with visual UX and familiar web-based interaction models with both spatial and temporal stimulus driven by clicking, scrolling, menu selection, toggling, submitting forms etc.
Implementation experience
The MCP-UI project is "an experimental community playground for MCP UI ideas" and there's early implementation experience:
- Client SDK with React component and Web Component for frontend integration.
- Server SDK for TypeScript, Ruby, and Python.
- Supported by a number of MCP-compatible hosts.
The interactive UI component on the client is compatible with the web security model: sandboxed within an iframe, communicates via postMessage. See demo for the proposed MCP-UI Architecture.
References
- MCP-UI docs https://mcpui.dev/
- MCP-UI SDK https://github.com/idosal/mcp-ui