MCP Apps let server tools return interactive UI components that render directly inside chat.
2
VS Code fetches a bundled HTML resource and displays it in a sandboxed iframe, while the app can call back to the MCP server for fresh data.
3
A Go profiling example combines bubble sort, Fibonacci, Go pprof, a TypeScript MCP server, and a React flame graph UI.
Summary
Marlene Mhangami and Liam Hampton explain how MCP Apps add interactive interfaces to MCP tool results in VS Code. MCP standardizes how applications provide context to language models through tools, prompts, and resources. An MCP tool can return data plus a resource reference to bundled HTML. VS Code fetches that HTML and renders it in a sandboxed iframe inside the chat window. The UI can call the server again and update with fresh data. The demo builds a profiling app for a Go program containing bubble sort and Fibonacci code. A local TypeScript MCP server runs and profiles the program with Go pprof, then passes the result to a React flame graph app. The approach avoids forcing users to exchange many text prompts or leave chat for another interface. The speakers also mention Shopify, Excalidraw, and Figma as examples of companies using interactive MCP experiences.
MCP connects hosts, clients, and servers around model context
MCP is an open protocol created by Anthropic that standardizes how applications provide context to language models. Mhangami describes hosts such as VS Code, clients that maintain one-to-one connections with servers, and servers that expose specific capabilities. In VS Code, GitHub Copilot is the client discussed in the talk. Servers can be built by developers or selected from the MCP list in the VS Code extensions tab. Mhangami advises using trusted listings in VS Code or GitHub because randomly downloaded servers may contain malicious code.
MCP Apps replace text-only tool results with live interfaces
Early MCP experiences mostly returned text, which led users to rely on ASCII diagrams, emojis, or links when they needed something visual. MCP Apps let an MCP server return rich interactive components that appear directly in chat. Mhangami demonstrates the difference with Excalidraw. Instead of receiving an ASCII explanation of MCP, the user gets a live diagram that can be moved and edited. The interface stays in the chat context, so the user does not have to open a separate application to work with the result.
VS Code renders a server-provided HTML resource in a sandbox
The interaction starts when a user sends a prompt such as "Show me analytics." The model chooses an MCP tool, and the server returns tool data together with a resource reference. That reference points to HTML generated or bundled by the server. VS Code, acting as the host, fetches the HTML and renders it in a sandboxed iframe. The user interacts with the iframe, and the app can call back to the server. The server can return new data, allowing the interface to update without restarting the whole interaction.
Interactive apps make exploration and checkout easier inside chat
Mhangami gives data exploration as one use case. A user can click through a chart or select details instead of typing a new prompt every time they want to inspect a dataset. E-commerce is another example. Rather than receiving a link and moving to a browser, a user could complete a checkout flow in the chat UI. Shopify is working on this pattern and is trying to keep the rendered experience consistent with the company's website, including its brand and checkout elements.
MCP Apps can be built from a tool, a resource, and their connection
Hampton describes three parts of an MCP App: the tool used by the model and host, the bundled HTML UI resource, and the link that tells the host that data and a UI are available together. The UI can be written with React, Vue, Svelte, or vanilla JavaScript. Hampton borrowed a skill from the Model Context Protocol repository, edited it, and ran it through GitHub Copilot CLI. The skill provides setup instructions and examples for handlers and tool visibility, including whether the model, the app, or both can invoke a tool.
The demo turns Go profiling data into a React flame graph
Hampton's example uses a Go program containing bubble sort and a Fibonacci sequence. A local MCP server profiles the application for five seconds with Go pprof to find where the program spends its time. The server is written in TypeScript and bundles the Go program, runs it, and returns profiling data. A React app receives the tool input and results, including the functions consuming time, then renders a flame graph. The UI turns profiling output that Hampton describes as jumbled into something he can inspect inside the VS Code chat window.
The iframe limits what the interactive app can access
Hampton explains that the iframe is a security boundary. He compares it to putting a hamster in a cage because an uncontained application could chew up the room. In practical terms, the MCP App should not be able to alter VS Code settings, call arbitrary APIs, or interact with external systems. The app remains contained inside the chat window while it displays the profiling result and supports interaction. This containment is part of the design rather than an incidental detail of the demo.
"What I'm doing there is I'm going to use an MCP server to profile the application code over 5 seconds to see where is the time being spent most in this application."11:44
Who should watch
You build MCP servers and want tool results to include usable interfaces instead of only text or links.
You work in VS Code and need users to inspect charts, diagrams, profiling results, or other data without leaving chat.
You are evaluating the security boundary and implementation pieces required for an interactive MCP App.
