MCP UI: Extending the frontier — Liad Yosef and Ido Salomon, MCP Apps
By AI Engineer
Key Concepts
- MCP (Model Context Protocol): An open standard that enables AI models to interact with external data and tools.
- MCP Apps: An extension of the MCP standard that allows servers to send interactive, branded UI components directly into chat interfaces (e.g., ChatGPT, Claude, VS Code).
- Generative UI: UI components created dynamically by an AI model or server in response to user intent, rather than static, pre-built pages.
- Bidirectional Communication: The ability for a UI component to send user interactions (clicks, inputs) back to the host AI, which then processes them as tool calls or follow-up actions.
- Host: The AI platform (e.g., Claude, ChatGPT, Cursor) that renders the MCP App and manages the context between the user, the model, and the external tool.
1. The Problem: The "Wall of Text"
The speakers, Eda Solomon and Liad, argue that traditional chat-based AI interactions are limited by text-only responses. This creates two main issues:
- Loss of Identity: Users cannot distinguish between data sources (e.g., Shopify vs. Expedia) when information is reduced to plain text.
- Lack of Interactivity: Text is passive. Users cannot perform complex tasks (like booking a flight or filtering a funnel) directly within the chat interface.
2. The Solution: MCP Apps
MCP Apps allow companies to inject their own UI components into the chat. Instead of returning text, an MCP server returns a resource (HTML/UI component) that the host renders.
- Branding & Identity: Companies maintain their specific UI/UX, ensuring users recognize the service provider.
- Interactivity: Users can click, filter, and interact with widgets. These interactions trigger messages back to the host, which the AI model can then process as new tool calls or context updates.
3. Step-by-Step Workflow
- User Intent: The user prompts the AI (e.g., "Analyze my funnel").
- Tool Call: The host sends a tool call to the MCP server.
- Resource Return: The server returns a UI resource (e.g., a PostHog funnel chart) instead of text.
- Rendering: The host renders the UI in a secure sandbox.
- Interaction Loop: When the user clicks an element in the UI, an event is sent back to the host. The host interprets this as a new request, allowing for a continuous, bidirectional flow.
4. The "New Web" Philosophy
The speakers propose a shift in how we perceive the internet:
- Decomposition: Instead of visiting monolithic websites with irrelevant features, AI agents decompose services into "atoms" of UI.
- Proactive Assistance: An agent can pull relevant UI chunks from multiple sources (e.g., Google Calendar for dates, Booking.com for venues) to solve a complex task in a single chat window.
- Spectrum of Control:
- Notification: UI informs the host of an action (e.g., updating a cart).
- Tool Call: UI requests the host to execute a specific function.
- Prompt: UI yields control to the model to generate a new response.
5. Technical Implementation & Standardization
- Standardization: MCP Apps are now an official extension of the MCP standard, supported by major platforms like Anthropic, OpenAI, GitHub, and Microsoft Copilot.
- SDKs: The
XAppsrepository provides official SDKs to ensure compliance with the spec. - Generative UI Agnosticism: MCP Apps support three levels of UI generation:
- Predefined: Static, branded components (e.g., Airbnb widget).
- Declarative: JSON-based structures rendered by the host.
- Fully Generative: UI created on-the-fly by the model.
6. Future Roadmap
- Reusable Views: Optimizing performance by updating existing UI components rather than re-rendering them, which is critical for complex applications like Autodesk.
- Model-to-View Interaction: Enabling the AI model to "click" buttons or fill forms within the UI, closing the loop for autonomous agents.
- Interoperability: Aligning with other protocols like Google’s A2UI and WebMCP to create a unified global standard for UI in chat.
7. Notable Quotes
- "We don't need to throw away everything we know about UI and UX just to get into this new world of agents." — Eda Solomon
- "Perhaps in 2 years, we won't have browsers as we know them... We'll have a personal assistant that accepts only small chunks of UI." — Liad
Synthesis
MCP Apps represent a paradigm shift from "browsing the web" to "interacting with agents." By standardizing how UI is delivered and interacted with within chat environments, the protocol allows for a more efficient, branded, and highly functional user experience. The goal is to move away from monolithic websites toward a modular, agent-driven web where domain experts provide the UI, and AI models provide the orchestration.
Chat with this Video
AI-PoweredLoad the transcript when you're ready to chat so the initial page stays lighter.