Building Interactive UIs in VS Code with MCP Apps

The Mechanism of MCP Apps

MCP Apps extend the Model Context Protocol by enabling server tools to return rich, interactive UI components instead of plain text. When a user prompts an agent, the MCP server executes the requested logic and returns both the raw data and a resource reference pointing to a bundled HTML UI. The host application, such as VS Code, fetches this HTML and renders it within a sandboxed iframe. This architecture maintains a strict security boundary, preventing the UI from accessing VS Code settings or external APIs while allowing bidirectional communication between the app and the server for real-time updates.

Implementation and Use Cases

Developers can build these interfaces using standard web technologies like React, Vue, or Vanilla JS. The implementation requires three core components: the MCP tool (the LLM interface), the resource (the bundled HTML/JS), and the link between them that signals the host to render the iframe.

Common use cases include:

• Data Exploration: Providing interactive charts or graphs that allow users to filter or query data without needing to issue new text prompts.
• E-commerce: Enabling full checkout flows directly within the chat interface.
• Diagramming: Using tools like Excalidraw to generate and manipulate architecture diagrams in real-time.
• Profiling: Visualizing complex performance data, such as Go flame graphs, within the chat window to identify bottlenecks in application code.

Security and Sandboxing

The use of iframes is a deliberate security choice. By isolating the MCP app in a sandbox, developers ensure that the interactive component cannot interact with the host editor's internal settings or unauthorized external APIs. This allows for complex, stateful UI experiences while keeping the VS Code environment stable and secure.