Europe 2026
Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub
Marlene Mhangami , Liam Hampton
Overview
This talk introduces Model Context Protocol (MCP) apps, which enable server tools to return rich, interactive components directly within chat interfaces. MCP apps enhance user experience by allowing direct interaction with generated UIs, moving beyond simple text or emoji responses. This technology facilitates complex tasks like data exploration and e-commerce within a chat environment, improving efficiency and engagement.
Who should watch
- AI engineers and builders looking to create interactive AI experiences.
- Product Managers and UX designers interested in integrating rich UI elements into chat applications.
- Developers seeking to leverage open protocols for LLM context and tool integration.
- Anyone interested in enhancing developer productivity within IDEs like VS Code.
Key takeaways
- MCP is an open protocol, originally from Anthropic, that standardizes how applications provide context to Large Language Models (LLMs), including tools, prompts, and resources.
- MCP apps allow server tools to return interactive UI components that render directly within chat interfaces, offering a richer user experience than static text.
- The architecture involves an MCP host (e.g., VS Code), MCP clients (e.g., GitHub Copilot), and MCP servers that expose specific capabilities.
- When a user prompts the LLM, the LLM decides which tool to call. The MCP server returns tool results with a UI resource reference, which the host fetches and renders in a sandboxed iframe.
- Use cases include interactive data exploration, where users can manipulate charts and data directly, and e-commerce, enabling full checkout experiences within the chat.
- Companies like Shopify and Excalidraw are already utilizing MCP apps for enhanced user interactions and visualizations.
- MCP apps are rendered within sandboxed iframes in the host application to prevent unintended interactions with the host's settings or external APIs.
- Developers can build MCP apps using various frontend frameworks like React, Vue, or vanilla JavaScript, with skills defined to guide AI tooling on how to run them.
Notable quotes
MCP is an open protocol that standardizes how applications provide context to LLMs.
MCP apps let server tools return rich interactive components that render directly in the chat.
The reason we're doing this in an iframe or the why the iframe is the same reason that you put a hamster in a cage.
Unofficial community note. Prefer the recording for nuance.