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

MCP apps enable rich, interactive UI components to be rendered directly in chat interfaces, allowing users to interact with data and tools without leaving th...

By Sean Weldon

Abstract

The Model Context Protocol (MCP), developed by Anthropic as an open standardization framework, has evolved beyond text-only interactions through the introduction of MCP apps—rich, interactive UI components that render directly within chat interfaces. This analysis examines the architectural design, implementation patterns, and practical applications of MCP apps, which address fundamental limitations in LLM-based interactions by enabling visual data exploration, interactive workflows, and contextual user experiences. Through a sandboxed iframe architecture, MCP apps maintain security while facilitating bidirectional communication between servers and UI components. Evidence from implementations by Shopify, Excalidraw, and Figma demonstrates the protocol's versatility across e-commerce, visualization, and design domains. The findings indicate that MCP apps significantly reduce conversational overhead while maintaining users within their working context, representing a substantive advancement in AI-assisted development workflows.

1. Introduction

The paradigm of human-computer interaction with artificial intelligence systems has undergone continuous evolution toward increasingly natural conversational interfaces. However, a persistent constraint has limited the effectiveness of these interactions: the predominance of text-only responses from Large Language Models (LLMs). This limitation has manifested in suboptimal data representations, including excessive reliance on ASCII art for visualization and emoji-based formatting attempts that fail to adequately convey complex information structures.

The Model Context Protocol (MCP) represents a standardization initiative designed to establish uniform mechanisms through which applications provide contextual information to LLMs. Building upon this foundation, MCP apps extend the protocol's capabilities by introducing rich, interactive user interface components that render directly within chat environments. This advancement addresses a critical gap in AI-assisted workflows by enabling sophisticated visual interactions while maintaining conversational context.

This synthesis examines the technical architecture, security considerations, and implementation patterns of MCP apps, analyzing how they transform the interaction paradigm between users and AI systems. The analysis encompasses the protocol's three-component architecture, the technical flow from user prompt to rendered interface, and practical applications across data exploration, e-commerce, and software development domains. By evaluating real-world implementations and technical specifications, this work demonstrates how MCP apps enhance user experience while maintaining security through sandboxed execution environments.

2. Background and Related Work

2.1 The Model Context Protocol Foundation

MCP emerged as an open protocol created by Anthropic to standardize the mechanisms through which applications provide contextual information to LLMs. The protocol establishes a three-tier architecture comprising hosts (programs such as Visual Studio Code that access and present data), clients (entities maintaining one-to-one connections with servers, exemplified by GitHub Copilot in VS Code), and servers (lightweight programs exposing specific capabilities through the MCP specification).

This architectural pattern addresses fragmentation in LLM integration approaches by providing a unified framework for context provision. The distribution mechanism through VS Code's extensions marketplace, identifiable via the @MCP search prefix, mitigates security risks associated with arbitrary internet sources. However, early implementations revealed a fundamental constraint: all server responses were rendered exclusively as text, leading to compensatory behaviors including excessive ASCII art usage and emoji-based formatting attempts in documentation.

2.2 The Text-Only Limitation Problem

The restriction to text-based responses created significant friction in user workflows, particularly for tasks involving complex data structures, performance metrics, or interactive exploration. Users were forced into repetitive back-and-forth exchanges with the LLM to extract specific information points or navigate datasets. This conversational overhead not only reduced efficiency but also disrupted the cognitive flow of development and analysis tasks. The introduction of MCP apps directly addresses this limitation by enabling rich UI components within the conversational context.

3. Core Architecture and Technical Design

3.1 MCP Apps Architectural Flow

MCP apps introduce a paradigm shift by allowing server tools to return rich interactive components rather than text representations. The technical execution flow operates through a multi-stage process that maintains separation between computation and presentation while enabling dynamic interaction.

The sequence initiates when a user submits a prompt to the chat interface. The LLM analyzes the request and determines the appropriate MCP server tool to invoke. The server executes the requested operation and returns tool results accompanied by a UI resource reference rather than formatted text. The host environment (VS Code) then fetches the HTML content from the specified UI reference and renders the application within a sandboxed iframe embedded in the chat interface.

This architecture enables bidirectional communication: the rendered application can invoke callbacks to the server for live interaction, whereupon the server returns updated data and the application refreshes its display accordingly. This interaction model eliminates the iterative questioning pattern required in text-only interfaces, providing immediate access to interactive exploration capabilities.

3.2 Security Through Sandboxed Isolation

The iframe-based rendering approach serves a critical security function, as articulated in the presentation: the containment prevents applications from accessing VS Code settings, APIs, or external resources. This isolation model, analogous to containing a potentially disruptive element within defined boundaries, ensures that MCP apps cannot interact with the development environment beyond their designated scope.

The sandboxing mechanism restricts the application's execution context to the chat window, preventing unauthorized access to sensitive configuration data or system resources. This security model enables the deployment of third-party MCP apps while maintaining system integrity, a crucial consideration for enterprise adoption and sensitive development contexts.

3.3 Component Structure and Implementation

An MCP app comprises three fundamental components: the tool (accessible to both the LLM and host environment), the resource (bundled HTML UI constructed using frameworks such as React, Vue, Svelte, or vanilla JavaScript), and the linkage between host and server. Skill files define execution parameters, including handlers and tool visibility settings that control invocation patterns.

Tool visibility operates across three modes: model-only invocation (traditional text-based responses), model-plus-app invocation (LLM determines when to render UI), and app-only invocation (direct UI rendering without LLM intermediation). This flexibility accommodates diverse use cases while maintaining protocol consistency.

The MCP server executes on localhost as the entry point, typically implemented in TypeScript. The server bundles application code, processes profiling data when applicable, and outputs structured data linked to UI resources. In the demonstrated flame graph profiler example, a React application receives tool input, execution results, and performance data to render interactive visualizations of function call hierarchies.

4. Technical Insights and Implementation Considerations

4.1 Development Stack and Tooling

The technical implementation of MCP apps leverages established web development frameworks while introducing protocol-specific considerations. The demonstrated profiler application utilized Go's pprof mechanism for performance analysis, with the MCP server written in TypeScript to handle data processing and UI resource bundling. The frontend component employed React with hooks for state management and interactive rendering.

The GitHub Copilot CLI provides scaffolding capabilities for MCP app development, while Anthropic maintains a skill repository offering reference implementations. This tooling ecosystem reduces implementation complexity and promotes standardized patterns across the MCP app development community.

4.2 Performance Visualization Case Study

The flame graph profiler demonstration illustrates the protocol's practical application in development workflows. The example profiled a Go application executing bubble sort algorithms and Fibonacci sequence calculations over a five-second interval. When a user requested application profiling through GitHub Copilot, the LLM invoked the appropriate tool, triggering the MCP server to execute the profiler and return JSON-formatted performance data.

The host environment rendered an interactive flame graph within the chat interface, displaying function call hierarchies with visual representations of time expenditure. The UI provided both detailed function-level analysis and summary statistics, enabling developers to identify performance bottlenecks without navigating external profiling tools or engaging in iterative text-based queries about specific metrics.

4.3 Trade-offs and Limitations

While MCP apps significantly enhance interaction capabilities, the architecture introduces considerations regarding complexity and resource utilization. The iframe-based rendering requires additional memory allocation compared to text responses, and the bidirectional communication pattern introduces latency considerations for data-intensive applications. Furthermore, the sandboxing mechanism, while essential for security, constrains the application's ability to integrate with external services or persist data beyond the chat context.

5. Discussion

5.1 Practical Applications Across Domains

The adoption of MCP apps by organizations including Shopify, Excalidraw, and Figma demonstrates the protocol's versatility across diverse application domains. Shopify's implementation focuses on maintaining brand consistency between chat-based interactions and traditional web experiences, enabling complete checkout workflows within the conversational interface. This approach reduces context switching and maintains user engagement within the AI-assisted environment.

Excalidraw's integration with Cloud Code exemplifies the protocol's utility for visualization tasks, generating interactive architecture diagrams on demand. Figma's component generation capabilities demonstrate real-time design tool integration within chat contexts. These implementations collectively illustrate how MCP apps bridge the gap between conversational AI and specialized domain tools.

5.2 Implications for AI-Assisted Workflows

The introduction of rich UI components within chat interfaces represents a fundamental shift in how users interact with AI systems during development and analysis tasks. By eliminating the need to navigate between chat interfaces, external browsers, and specialized applications, MCP apps reduce cognitive load and maintain workflow continuity. The data exploration use case particularly benefits from this approach, as users can manipulate UI elements to investigate datasets rather than formulating sequential text queries about trends and specific values.

5.3 Future Research Directions

Several areas warrant further investigation as the MCP apps ecosystem matures. The optimal balance between LLM-mediated invocation and direct UI rendering remains an open question, with implications for user experience and computational efficiency. Additionally, the development of standardized UI component libraries could accelerate adoption while ensuring consistency across implementations. The protocol's extensibility to support more complex state management and data persistence mechanisms represents another promising direction for future work.

6. Conclusion

MCP apps represent a significant advancement in the Model Context Protocol ecosystem, addressing fundamental limitations in text-only LLM interactions through rich, interactive UI components rendered within chat interfaces. The sandboxed iframe architecture maintains security while enabling bidirectional communication between servers and UI elements, facilitating live data exploration and interactive workflows without context switching.

The technical implementation, demonstrated through the flame graph profiler example and validated by production deployments at Shopify, Excalidraw, and Figma, illustrates the protocol's practical viability across e-commerce, visualization, and design domains. By reducing conversational overhead and maintaining users within their working context, MCP apps enhance the effectiveness of AI-assisted development workflows while preserving the natural conversational paradigm that makes LLM interactions accessible.

For practitioners, the key takeaway is that MCP apps enable a new category of AI-assisted experiences that transcend text-based limitations. Organizations seeking to integrate LLM capabilities into their tools should consider MCP apps as a mechanism for delivering rich, contextual interactions that maintain security through isolation while providing sophisticated visual and interactive capabilities. As the protocol ecosystem continues to evolve, MCP apps are positioned to become a standard pattern for bridging conversational AI and specialized domain tooling.

Sources

About the Author

Sean Weldon is an AI engineer and systems architect specializing in autonomous systems, agentic workflows, and applied machine learning. He builds production AI systems that automate complex business operations.

LinkedIn | Website | GitHub