Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub

Key Concepts

• MCP (Model Context Protocol): An open protocol created by Anthropic that standardizes how applications provide context (tools, prompts, resources) to Large Language Models (LLMs).
• MCP Host: Programs (e.g., VS Code) that access data from MCP servers.
• MCP Client: The component (e.g., GitHub Copilot) that maintains a one-to-one connection with the server.
• MCP Server: Lightweight programs that expose specific capabilities and data to the LLM.
• MCP Apps: An evolution of MCP that allows servers to return rich, interactive UI components (rendered in sandboxed iframes) directly within the chat interface.
• Sandboxed Iframe: A security mechanism used to isolate MCP app UI elements, preventing them from accessing sensitive VS Code settings or external APIs.

---

1. The Evolution of MCP: From Text to Rich UI

Initially, MCP was limited to returning text-based responses. This often led to "over-compensation" with ASCII art or emojis to visualize data. MCP Apps solve this by allowing servers to return HTML-based UI elements. This enables:

• Interactive Experiences: Users can manipulate diagrams, update text, or click buttons directly within the chat.
• Visual Clarity: Complex data (like architecture diagrams or analytics) can be rendered as functional components rather than static text.

2. How MCP Apps Work: The Technical Workflow

The process follows a specific sequence to ensure security and functionality:

1. User Prompt: The user sends a request (e.g., "Show me analytics").
2. Tool Selection: The LLM identifies the appropriate MCP tool to fulfill the request.
3. Server Execution: The MCP server processes the request and returns a result containing a resource reference (a pointer to an HTML element).
4. Host Rendering: The host (VS Code) fetches the HTML from the reference and renders it inside a sandboxed iframe.
5. Live Interaction: The app can communicate back and forth with the server, allowing for real-time data updates and user interaction within the chat window.

3. Real-World Applications and Use Cases

• Data Exploration: Instead of repetitive back-and-forth text queries, users can interact with charts and data sets via UI elements.
• E-commerce: Enabling full checkout experiences directly within a chat interface, keeping the user within the brand's ecosystem.
• Profiling and Debugging: Using tools like Excalidraw for architecture visualization or custom flame graphs to analyze code performance.
• Industry Adoption: Companies like Shopify are using MCP apps to maintain brand consistency in chat, while Figma and Excalidraw utilize them for dynamic component generation.

4. Live Demo: Profiling with Flame Graphs

Liam Hampton demonstrated building an MCP app to profile Go code:

• Methodology: The app uses Go pprof to profile application code over a 5-second window.
• Implementation: The server runs locally, processes the Go program, and returns the profiling data.
• UI Rendering: A React-based "Flame App" renders the profiling data as an interactive flame graph within the VS Code chat window.
• Benefit: This eliminates the need for the user to manually parse complex JSON or text-based profiling data, providing an immediate visual representation of where the application spends its execution time.

5. Security and Best Practices

• Isolation: The use of iframes is critical for security. It acts as a "cage" for the application, ensuring it cannot interact with the host's (VS Code) internal settings or unauthorized APIs.
• Source Verification: The speakers strongly recommend using the official server list available within the VS Code extensions tab to avoid potential security risks associated with third-party or malicious servers found online.

Synthesis

MCP Apps represent a significant shift in how developers interact with AI. By moving beyond text-only responses to rich, interactive, and sandboxed UI components, MCP Apps transform the chat interface from a simple Q&A window into a powerful, integrated workspace. This allows for more complex workflows—such as performance profiling, data visualization, and e-commerce—to be handled entirely within the developer's existing environment (VS Code), significantly reducing context switching and improving user efficiency.