Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub
Summary
Marlene Mhangami and Liam Hampton, both Developer Advocates at Microsoft and GitHub, present a session at AI Engineer Europe 2026 on MCP apps — a pattern that enables MCP servers to return rich, interactive UI components that render directly inside the VS Code chat window as sandboxed iframes, rather than plain text or links.
The talk begins with a quick primer on the Model Context Protocol (MCP), the open protocol created by Anthropic that standardizes how applications provide context to LLMs. The speakers outline the three-layer architecture: MCP hosts (programs like VS Code that consume data), MCP clients (such as GitHub Copilot, which maintain one-to-one server connections), and MCP servers (lightweight programs exposing specific capabilities). They caution against using random internet-sourced MCP servers due to security risks, recommending only those listed in VS Code's extensions marketplace or GitHub.
The core problem MCP apps solve is the limitation of early MCP implementations that could only return plain text. Marlene references the prevalence of ASCII art and excessive emoji in README files as a symptom of LLM tooling being unable to generate rich visual content. MCP apps address this by allowing a server tool to return both data and a resource reference pointing to a bundled HTML UI. The host (VS Code) fetches that HTML, renders it in a sandboxed iframe within the chat window, and enables bidirectional communication between the iframe and the server so the UI can display and update live data.
The sandboxing rationale is made vivid by Liam's analogy: the iframe is like a hamster cage — it prevents the UI from interacting with VS Code settings, calling external APIs, or otherwise causing damage outside its boundary.
Liam delivers a live demo using a Go application running bubble sort and Fibonacci sequence algorithms, profiled over five seconds using Go pprof. An MCP server (written in TypeScript, running on localhost) profiles the Go program, returns JSON performance data, and links it to a bundled React flame graph UI. Inside VS Code's GitHub Copilot chat, the user types 'profile my application,' the LLM recognizes the available tool, calls the MCP server, and the flame graph renders interactively in the chat. Users can inspect top functions, execution time breakdowns, and scroll through the visualization without ever leaving VS Code or asking follow-up text questions.
The talk describes the skill template used — sourced from the Model Context Protocol repository on GitHub and modified by Liam — which supports React, Vue, Svelte, or vanilla JS for the UI layer. The skill defines three tool visibility modes controlling whether the tool can be invoked by the model alone, by the model and the app together, or by the app alone.
Real-world adopters of the MCP apps pattern are highlighted: Shopify uses it to render fully branded checkout flows inside chat interfaces, preserving their visual identity and enabling end-to-end purchases without leaving the chat; Excalidraw uses MCP apps to render draggable, editable architecture diagrams in Claude Code and VS Code; and Figma uses it to generate and manipulate design components on the fly.
The session closes with a mention of Microsoft Build (June 3–6), where further workshops on these patterns will be available, and an invitation to visit GitHub's booth.
Key Takeaways
- •MCP apps let server tools return an HTML resource reference alongside data; VS Code fetches and renders this as a sandboxed iframe in the chat window, enabling interactive UIs without leaving the editor.
- •The iframe is sandboxed intentionally — it cannot access VS Code settings, call external APIs, or affect anything outside the chat, keeping the experience contained and safe.
- •The pattern supports any frontend framework (React, Vue, Svelte, vanilla JS) for the bundled HTML UI layer.
- •Tool visibility modes in MCP app skills give fine-grained control over whether the tool is invoked by the LLM, by the UI, or by both.
- •Shopify is using MCP apps to preserve brand identity and deliver end-to-end checkout experiences inside chat interfaces, demonstrating production readiness.
- •Excalidraw uses MCP apps to render draggable, editable architecture diagrams directly in Claude Code and VS Code chat.
- •For complex data like profiler output (e.g., Go pprof flame graphs), rendering a live UI eliminates the need for repeated text-based follow-up queries to the LLM.
- •Use MCP server listings within VS Code extensions or GitHub rather than arbitrary internet sources to avoid malicious servers.
- •The MCP repository on GitHub hosts reusable skills/templates for bootstrapping MCP apps quickly via Copilot CLI or other AI tooling.
- •GitHub Copilot acts as the MCP client in VS Code, while VS Code itself is the host that fetches and renders the HTML resource.
Transcript
Hi everyone. Uh we'll introduce ourselves. My name is Madelaine and I'm a senior developer advocate at Microsoft and GitHub. >> And likewise, I'm Liam Hampton and I also am working at Microsoft and GitHub on the developer tools advocacy team for Visual Studio Code and GitHub Copilot. >> Yes. I do similar things but probably Liam is more in the VS Code side as well. Um so just to get started, a bit of an agenda of what we're going to cover today in this session. We're going to talk about what MCP...
Related Sessions
