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

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

More

Descriptions:

Marlene Mhangami and Liam Hampton, developer advocates at Microsoft and GitHub, introduce MCP Apps — an extension to the Model Context Protocol that enables servers to return rich, interactive HTML components rendered directly inside VS Code’s chat panel. The talk, delivered at AI Engineer, addresses a longstanding limitation of MCP: until now, tool results were plain text, forcing developers to rely on ASCII art or emoji-heavy readmes to convey structured information.

The architecture works as follows: a user sends a prompt in VS Code, the agent calls an MCP server tool, and the server returns a result that includes a reference to an HTML resource it has generated. VS Code (acting as MCP host, distinct from the GitHub Copilot client) fetches that HTML and renders it in a sandboxed iframe inside the chat — enabling interactive diagrams, analytics dashboards, and e-commerce flows without leaving the editor. Liam Hampton then demos a flame graph MCP app generated via GitHub Copilot CLI, pulling from a skill scaffold in Anthropic’s Model Context Protocol repository.

The speakers highlight three companies already building production MCP Apps: Shopify, which is building full in-chat checkout flows that preserve brand identity; Excalidraw, widely used for interactive architecture diagrams in tools like Claude Code; and Figma, generating on-the-fly UI components. Security guidance is also covered — the presenters recommend using VS Code’s curated MCP extension marketplace rather than arbitrary third-party servers to avoid malicious packages. Developers can use the Model Context Protocol GitHub repository as a starting template for building their own MCP Apps.


📺 Source: AI Engineer · Published June 06, 2026
🏷️ Format: Tutorial Demo

1 Item

Channels