In this session, Madelaine Mhangami and Liam Hampton from Microsoft and GitHub introduce the Model Context Protocol (MCP) and its applications within Visual Studio Code (VS Code). MCP is an open protocol developed by Anthropic that standardizes how applications provide context to large language models (LLMs). It involves three main components: hosts (such as VS Code), clients (like GitHub Copilot), and servers that expose specific capabilities. MCP allows LLMs to access tools, prompts, and resources in a standardized way, enhancing the interaction between users and AI models.
A key limitation of early MCP implementations was that they only returned plain text responses, which restricted the richness of user interactions. To address this, MCP apps were introduced, enabling servers to return rich, interactive UI components that render directly within chat interfaces. This advancement allows users to interact with dynamic elements such as diagrams or data visualizations inside the chat, improving usability and engagement. For example, the Excalidraw MCP server can generate and allow interaction with live diagrams, moving beyond static ASCII art or emoji-based visuals.
The workflow of MCP apps involves a user sending a prompt, the LLM deciding which tool to call, and the server returning a UI resource reference. The host application, like VS Code, fetches the HTML content and renders it inside a sandboxed iframe, ensuring security and isolation. This setup allows for live, two-way interaction between the user and the server, with the UI updating dynamically based on fresh data. MCP apps have diverse use cases, including data exploration, where users can interact with charts and analytics, and e-commerce, where users can complete purchases entirely within a chat interface.
Several companies are actively building MCP apps to enhance user experiences. Shopify is developing MCP apps to maintain consistent brand experiences within chat, enabling full checkout processes without leaving the chat environment. Excalidraw is popular for creating interactive architecture diagrams, and Figma is also exploring MCP apps to generate UI components dynamically. These examples highlight the growing adoption of MCP apps across different industries to create seamless, interactive workflows integrated with AI.
Liam Hampton demonstrated a live example of an MCP app in VS Code, profiling a Go application using a flame graph visualization. The MCP server runs locally, profiles the code, and returns profiling data that is rendered as an interactive React-based UI within an iframe in the chat window. This approach eliminates the need for back-and-forth textual queries by providing a rich, visual interface for analyzing performance data. The use of iframes ensures that the app is sandboxed, protecting the host environment from potential security risks. The session concluded with an invitation to visit the GitHub booth and attend Microsoft Build for further learning opportunities.
