The Shift from Text-Only to Interactive Chat

Traditional LLM interactions are limited by text-based outputs, often forcing users to rely on ASCII art or external links to visualize data. MCP (Model Context Protocol) Apps solve this by allowing server tools to return rich, interactive UI components that render directly inside the chat window. This keeps the user in the flow of their work—whether that is debugging code, exploring data, or completing a checkout process—without requiring them to switch contexts to a browser.

How MCP Apps Function

An MCP App operates through a structured handshake between the user, the LLM, and the host (e.g., VS Code):

  1. Invocation: The user prompts the agent, which identifies the need to call a specific MCP tool.
  2. Data & UI Delivery: The MCP server returns both the raw data and a resource reference pointing to a bundled HTML/JavaScript UI (built with frameworks like React or Vue).
  3. Sandboxed Rendering: The host (VS Code) fetches the UI and renders it within a sandboxed iframe. This isolation is critical; it prevents the UI from accessing sensitive VS Code settings or external APIs, effectively "caging" the app to ensure security.
  4. Live Interaction: Because the UI is a live component, it can communicate back to the server to fetch fresh data, allowing the interface to update dynamically as the user interacts with it.

Practical Implementation

Building an MCP App involves three core components: the tool (the LLM logic), the resource (the bundled HTML UI), and the link between them. Developers can use existing templates from the MCP repository to get started.

In a profiling use case, a Go-based MCP server can run a profiler on application code, process the results, and pass the data to a React-based flame graph component. This allows the developer to visualize performance bottlenecks directly in the VS Code chat window. By eliminating the back-and-forth of exporting data and manually analyzing it, developers can ask the LLM to interpret the visual results immediately, significantly speeding up the feedback loop.