Open Reader

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

completed 16:06 Jun 06, 2026 Watch on YouTube

Current Status

completed

Video ID

_xIwFcnHqp4

RAG / Chat

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

The demo profiles a Go app running bubble sort and Fibonacci and the result renders as an interactive flame graph directly inside the VS Code chat window. Not a link. Not a text summary. A live iframe you can scroll and query, sandboxed for the same reason you put a hamster in a cage: so it cannot chew up your VS Code settings or call external APIs. The mechanism: an MCP tool returns both data and a resource reference pointing to a bundled HTML UI. VS Code fetches the HTML and renders it in a sandboxed iframe in chat. The app calls back to the server, the server returns fresh data, the UI updates. Shopify uses this pattern for checkout flows inside chat. Excalidraw uses it for interactive architecture diagrams you can drag and edit. Marlene and Liam walk through building one from scratch using a skill from the MCP repository. Speaker info: - https://x.com/marlene_zw - https://www.linkedin.com/in/marlenemhangami/ - https://github.com/marlenemhangami - https://x.com/liamchampton - https://www.linkedin.com/in/liam-conroy-hampton/ - https://github.com/liamchampton

Summary

Generated by claude-sonnet-4-5

At-a-Glance

  • Verdict: Watch fully
  • Core thesis: MCP apps extend Anthropic's Model Context Protocol to render rich, interactive HTML UIs directly in chat windows (like VS Code's GitHub Copilot), eliminating text-only LLM responses and enabling in-chat workflows like data exploration, e-commerce checkouts, and interactive diagrams.
  • Why it matters: This is a shift from text-only agent outputs to sandboxed, branded, interactive UIs that keep users in-context—critical for AI tooling, developer experience, and productizing agent workflows in VS Code, IDEs, and chat interfaces.
  • Best use: Watch for the architecture (host/client/server), live flame graph profiling demo, security model (sandboxed iframes), and real-world examples (Shopify checkout, Excalibur diagrams, Figma components); use to understand how to build/ship interactive MCP apps in VS Code and why they matter for agent UX.

Executive Summary

Marlene Mhangami and Liam Hampton from GitHub/Microsoft explain MCP apps, an extension of Anthropic's open Model Context Protocol that lets MCP servers return interactive HTML/React/Vue components instead of plain text. The core problem: early MCP and LLMs could only return text, leading to ASCII art diagrams and emoji-heavy readmes. MCP apps solve this by letting servers reference HTML resources that VS Code (the host) fetches and renders in a sandboxed iframe inside the chat window, enabling live interaction (charts, checkout flows, diagrams) without leaving the context.

The architecture: User sends prompt → LLM/agent calls MCP server tool → server returns tool result + UI resource reference (HTML) → VS Code host fetches HTML → renders in sandboxed iframe → user interacts with iframe → app calls back to server for fresh data. The iframe sandbox is deliberate security: prevent the app from touching VS Code APIs or settings ('don't let the hamster loose in the room'). Real examples include Shopify (full checkout in chat, brand-consistent UI), Excalibur (interactive architecture diagrams), and Figma (on-the-fly component generation).

Liam demos a flame graph profiler MCP app he built using GitHub Copilot CLI and a skill from Anthropic's MCP repo. The server (TypeScript) profiles a Go program (bubble sort, Fibonacci) using Go PPROF over 5 seconds, returns profiling JSON + UI reference, and VS Code renders a React-based flame graph UI in chat. The result: instead of back-and-forth text Q&A about performance, the user gets an interactive flame graph showing where time is spent, with summary stats and top functions—eliminating the need to export data or switch contexts.

Key takeaway for operators: MCP apps are a new interface layer for agent outputs. Instead of structured text or markdown, you can ship interactive, branded experiences (checkout flows, data visualizations, diagrams) directly in chat. Security is handled via iframe sandboxing. The ecosystem is early (Shopify, Excalibur, Figma are building), and VS Code's @MCP extension search is the recommended discovery method to avoid malicious servers. This matters for productizing AI agents, improving UX in developer tools, and enabling workflows that previously required context-switching.

Key Takeaways

  • Claim: MCP apps let MCP servers return interactive HTML/React/Vue components that render in chat, replacing text-only LLM responses. | Evidence: Example: asking 'draw a diagram explaining MCP' used to return ASCII art; with Excalibur MCP app, it returns an interactive, editable diagram in the chat window. Shopify uses MCP apps to render full checkout flows in chat with brand-consistent UI. | Caveat: The ecosystem is early; speakers recommend using only MCP servers from VS Code's @MCP extension search or GitHub to avoid security risks from 'random servers on the internet.' | Implication: For agent systems and AI tooling, this is a shift from text-first to interactive-first outputs—critical for UX in workflows like e-commerce, data exploration, and developer tooling where in-context interaction beats exporting data or switching tabs. | Timestamp: timestamp unavailable
  • Claim: MCP architecture: host (VS Code) fetches HTML from server's UI resource reference and renders it in a sandboxed iframe, with app ↔ server callbacks for live updates. | Evidence: Flow: user prompt → LLM calls MCP server tool → server returns tool result + UI reference → VS Code fetches HTML → renders in iframe → user interacts → app calls server for fresh data. Liam's demo: profiling Go code returns flame graph React UI that shows performance hotspots without text back-and-forth. | Caveat: The iframe sandbox deliberately blocks access to VS Code APIs, settings, and external APIs ('don't let the hamster loose in the room')—security by design, but limits what the app can do outside its sandbox. | Implication: For building: you can ship rich, interactive UIs in chat with React/Vue/vanilla JS, but security is enforced at the host level. For workflow design: this enables multi-step, stateful interactions (e.g., drill into chart, update query, see new data) without leaving chat context. | Timestamp: timestamp unavailable
  • Claim: Shopify is building MCP apps focused on keeping the brand experience consistent between company website and chat UI, aiming for full checkout in chat. | Evidence: Marlene mentions attending a Shopify talk where they emphasized matching brand UI elements (colors, layout, interactions) in MCP app renders so users experience the same brand feel in chat as on the website; goal is to complete checkout without leaving chat. | Caveat: No specifics on Shopify's implementation timeline, availability, or technical details beyond 'they are building it' and focusing on brand consistency. | Implication: For e-commerce and GTM: MCP apps enable bringing transactional flows (checkout, product selection) into conversational interfaces without context-switching. For brand-heavy companies, this means UI/UX in chat becomes a brand touchpoint, not just a text channel. | Timestamp: timestamp unavailable
  • Claim: Liam built a flame graph profiler MCP app using GitHub Copilot CLI and a skill from Anthropic's MCP repo; it profiles Go code (PPROF), returns profiling data + React UI showing flame graph and top functions. | Evidence: Demo: server runs Go program (bubble sort, Fibonacci) for 5 seconds, profiles with PPROF, returns JSON + UI reference. VS Code renders React app with flame graph, top functions, and summary stats. User can interact with flame graph instead of text-only profiling output. The server is TypeScript, the UI is React with hooks. | Caveat: The demo relies on a 'skill' (structured instructions for LLMs/agents) from Anthropic's repo that tells Copilot CLI how to build the MCP app—implies reliance on external tooling and skill definitions. No discussion of error handling, performance at scale, or large profiling datasets. | Implication: For developer tooling: MCP apps can visualize complex outputs (profiling, logs, metrics) in interactive formats, reducing back-and-forth with LLMs ('is this good? where is time spent?'). For building: GitHub Copilot CLI + skills can scaffold MCP apps; React/Vue/vanilla JS are all viable. | Timestamp: timestamp unavailable
  • Claim: MCP apps solve the problem of users having to leave chat to complete workflows—e.g., clicking links, opening browsers, exporting data. | Evidence: Marlene's example: in the past, asking an LLM to 'buy something online' would return links; user had to navigate to browser. With MCP apps, the checkout flow happens in chat. Liam's flame graph: instead of exporting profiling data or asking text questions, the user interacts with the graph in chat. | Caveat: No discussion of what happens if the workflow requires external APIs, payment gateways, or OAuth—unclear how deep the iframe sandbox goes for real transactional use cases. | Implication: For product design: keeping users in-context (chat, IDE) is a UX win for agent-driven workflows. For content/business: this enables new monetization paths (e.g., in-chat purchases, subscriptions) and engagement models. For workflow design: rethink multi-step processes to be chat-native, not link-heavy. | Timestamp: timestamp unavailable
  • Claim: VS Code's @MCP extension search is the recommended way to discover MCP servers; random servers from the internet can be malicious. | Evidence: Marlene explicitly says: 'We definitely encourage you to use the server list that is in VS Code just because sometimes you can have some security issues if you just go on the internet and pick a random server. It can have malicious stuff in it.' | Caveat: No details on what 'malicious stuff' means in practice—unclear if it's arbitrary code execution, data exfiltration, or UI spoofing. Also unclear how VS Code vets servers in the @MCP list. | Implication: For operators: treat MCP server discovery like extension discovery—curate, vet, or build your own. For security: the MCP app sandbox helps, but malicious server code can still return bad data or misleading UIs. For ecosystem: early trust/discovery problem; marketplaces and registries will matter. | Timestamp: timestamp unavailable

Detailed Brief

What is MCP and why MCP apps?

  • Claims: MCP (Model Context Protocol) is an open protocol by Anthropic that standardizes how applications provide context (tools, prompts, resources) to LLMs.; Early MCP and LLMs returned only text, leading to ASCII art diagrams and emoji-heavy readmes as workarounds for lack of rich UI.; MCP apps extend MCP to let servers return interactive HTML/React/Vue components that render in chat, improving UX and enabling in-context workflows.
  • Evidence: Marlene's example: asking 'draw a diagram explaining MCP' used to return ASCII art; with Excalibur MCP app, it returns an interactive, editable diagram.; MCP has three parts: hosts (e.g., VS Code), clients (e.g., GitHub Copilot), and servers (lightweight programs that expose MCP capabilities).; VS Code's @MCP extension search lists available servers; speakers recommend using this over random internet servers for security.
  • Caveats: The ecosystem is early; not all MCP servers support apps yet.; Security risk: random MCP servers from the internet 'can have malicious stuff in it.'; No discussion of MCP app versioning, backward compatibility, or how updates are handled.
  • Implications: For agent systems: MCP apps are a new output primitive—think beyond text and structured data to interactive UIs.; For developer tools: VS Code + GitHub Copilot is the reference implementation; other IDEs/chat UIs will need to adopt the iframe + resource fetch pattern.; For security: vetting MCP servers and sandboxing apps (iframes) are critical; marketplaces and registries will need trust mechanisms.

MCP app architecture and flow

  • Claims: Flow: user sends prompt → LLM/agent calls MCP server tool → server returns tool result + UI resource reference (HTML) → host (VS Code) fetches HTML → renders in sandboxed iframe → user interacts → app calls server for fresh data.; The host (VS Code) is responsible for fetching and rendering the HTML; the client (GitHub Copilot) maintains the connection to the server.; The iframe sandbox prevents the app from accessing VS Code APIs, settings, or external APIs ('don't let the hamster loose in the room').
  • Evidence: Liam's flame graph demo: server profiles Go code with PPROF, returns JSON + UI reference; VS Code renders React app with flame graph and top functions.; The server is TypeScript; the UI is React with hooks. The 'skill' from Anthropic's MCP repo tells Copilot CLI how to build the app.; Liam mentions the iframe sandbox is 'the same reason you put a hamster in a cage'—security by design.
  • Caveats: No details on iframe sandbox enforcement—unclear if it's same-origin policy, CSP headers, or custom VS Code mechanism.; No discussion of performance for large UIs or streaming data into the iframe.; Unclear how error handling works if the server fails to return the UI resource or the HTML is malformed.
  • Implications: For building: you can ship React/Vue/vanilla JS UIs in MCP apps; the host handles rendering and sandboxing.; For workflow design: the app ↔ server callback loop enables stateful, multi-step interactions (e.g., drill into data, update query, see new results) without leaving chat.; For security: the iframe sandbox is a hard boundary; if your workflow needs VS Code APIs or external APIs, you'll need to design around it.

Real-world examples and use cases

  • Claims: Shopify is building MCP apps for full checkout in chat with brand-consistent UI (colors, layout, interactions matching website).; Excalibur is popular for generating interactive architecture diagrams in chat (e.g., QuoteCode uses it).; Figma has MCP apps for generating components on the fly.; Use cases: data exploration (interact with charts/datasets in chat), e-commerce (checkout flows), developer tooling (profiling, logs, metrics).
  • Evidence: Marlene attended a Shopify talk emphasizing brand consistency in MCP app UIs; goal is to complete checkout without leaving chat.; Excalibur example: asking 'draw a diagram explaining MCP' returns an interactive, editable diagram in the chat window.; Liam's flame graph demo: profiling Go code returns an interactive flame graph showing performance hotspots, eliminating text back-and-forth.
  • Caveats: No specifics on Shopify's implementation timeline, availability, or technical details.; No discussion of Figma's MCP app capabilities beyond 'generating components on the fly.'; Unclear how deep the iframe sandbox goes for transactional use cases (e.g., payment gateways, OAuth).
  • Implications: For e-commerce/GTM: MCP apps enable bringing transactional flows (checkout, product selection) into conversational interfaces; brand UI becomes a differentiator.; For data/analytics: interactive charts and visualizations in chat reduce context-switching and improve exploration workflows.; For developer tools: profiling, logs, metrics can be visualized in-context, reducing friction in debugging and performance analysis.

Building MCP apps: tools and workflow

  • Claims: Liam built the flame graph MCP app using GitHub Copilot CLI and a 'skill' from Anthropic's MCP repo.; A 'skill' is structured instructions for LLMs/agents that tell Copilot CLI (or Claude) how to build the MCP app—defines handlers, tool visibility (model-only, model+app, app-only), and code examples.; The server is TypeScript; the UI can be React, Vue, Svelte, or vanilla JS. The server returns the tool result (JSON data) + UI resource reference (HTML).; VS Code's @MCP extension search is the recommended way to discover and install MCP servers.
  • Evidence: Liam's demo: server (TypeScript) profiles Go code (bubble sort, Fibonacci) with PPROF for 5 seconds, returns profiling JSON + React UI reference.; The skill defines tool visibility (who invokes the tool) and includes code examples for handlers.; Liam mentions he 'borrowed a skill' from Anthropic's MCP repo and 'edited it a little bit' to build the flame graph app.
  • Caveats: The demo relies on a pre-built skill from Anthropic's repo—unclear how much manual work is needed to adapt skills for custom use cases.; No discussion of testing, debugging, or iterating on MCP apps; unclear how to validate the UI in the iframe.; No details on deploying or sharing MCP apps—unclear if they need to be packaged as VS Code extensions or if the server can be standalone.
  • Implications: For building: GitHub Copilot CLI + skills can scaffold MCP apps quickly; React/Vue/vanilla JS are all viable UI frameworks.; For tooling: 'skills' are a new primitive for defining agent/LLM workflows—watch for skill libraries and marketplaces.; For workflow: MCP app development is still early and manual; expect tooling gaps in testing, debugging, and deployment.

Notable Concepts & Terms

  • MCP (Model Context Protocol): Open protocol by Anthropic that standardizes how applications provide context (tools, prompts, resources) to LLMs; foundational for MCP apps.
  • MCP apps: Extension of MCP where servers return interactive HTML/React/Vue components (via UI resource references) that render in chat, replacing text-only LLM responses.
  • MCP host: Program (e.g., VS Code) that fetches and renders MCP app UIs (HTML) in a sandboxed iframe; responsible for security and rendering.
  • MCP client: Maintains one-to-one connection with MCP servers (e.g., GitHub Copilot in VS Code); not always the same as the host.
  • MCP server: Lightweight program that exposes MCP capabilities (tools, resources, prompts); can return tool results + UI resource references for MCP apps.
  • UI resource reference: In MCP apps, a pointer (returned by the server) to an HTML element/resource that the host fetches and renders in an iframe.
  • Sandboxed iframe: Security model for MCP apps: the host (VS Code) renders the app in an iframe that cannot access VS Code APIs, settings, or external APIs ('hamster in a cage').
  • Skill (MCP context): Structured instructions for LLMs/agents (e.g., GitHub Copilot CLI) that define how to build an MCP app—handlers, tool visibility, code examples; borrowed from Anthropic's MCP repo in the demo.
  • Tool visibility: Defines who can invoke an MCP tool: model-only, model+app, or app-only; part of the skill definition.
  • Flame graph (in demo): A visualization of profiling data showing where time is spent in a program; Liam's MCP app uses Go PPROF to profile and render an interactive flame graph in chat.
  • Excalibur: Popular MCP app/server for generating interactive architecture diagrams in chat (e.g., used by QuoteCode).
  • @MCP (VS Code extension search): Recommended way to discover and install MCP servers in VS Code; vetted list to avoid malicious servers.

Operator Notes / Why Ken Should Care

  • MCP apps are a new interface primitive for agent outputs—shift from text/structured data to interactive, branded UIs in chat. Critical for AI tooling, developer experience, and productizing workflows that require in-context interaction (e.g., checkout, data exploration, profiling).
  • Security model: MCP apps render in sandboxed iframes (host controls rendering, blocks access to APIs/settings). Vetting MCP servers is critical; use curated lists like VS Code's @MCP search. Malicious servers can return bad data or misleading UIs.
  • Real-world adoption is early but meaningful: Shopify (checkout in chat, brand consistency), Excalibur (interactive diagrams), Figma (on-the-fly components). Watch for e-commerce, data visualization, and developer tooling use cases.
  • Building: GitHub Copilot CLI + 'skills' (structured LLM instructions from Anthropic's repo) can scaffold MCP apps. UIs can be React/Vue/Svelte/vanilla JS. Server is typically TypeScript. Flow: server returns tool result (JSON) + UI resource reference (HTML) → host fetches/renders in iframe → app ↔ server callbacks for live updates.
  • Key architectural insight: the host (VS Code) handles rendering and sandboxing; the client (GitHub Copilot) handles server connections. This separation enables security and flexibility but means MCP app capabilities are limited to the iframe sandbox.
  • Implications for agent systems: MCP apps enable multi-step, stateful interactions (drill into data, update query, see new results) without leaving chat. This reduces context-switching and improves UX for workflows that were previously link-heavy or required exporting data.
  • Open question: no details on iframe sandbox enforcement mechanism (same-origin policy, CSP, custom VS Code mechanism), performance for large UIs, or how to handle errors if the server fails to return the UI resource. Also unclear how deep the sandbox goes for transactional use cases (payment gateways, OAuth).
  • For content/business: MCP apps enable new monetization paths (in-chat purchases, subscriptions) and engagement models. Brand UI in chat becomes a differentiator. Watch for marketplaces, registries, and skill libraries as the ecosystem matures.
  • For investing: early ecosystem; vetting, trust, and discovery are pain points. VS Code/@MCP is the reference; other IDEs/chat UIs will need to adopt. Tooling gaps in testing, debugging, deployment, and versioning are opportunities.

Watch Map

  • timestamp unavailable: Introduction: Marlene and Liam introduce themselves (Microsoft/GitHub, VS Code and GitHub Copilot advocacy team).
  • timestamp unavailable: Agenda: What is MCP, why MCP apps, and live demo of building/using MCP apps in VS Code.
  • timestamp unavailable: MCP overview: Open protocol by Anthropic for standardizing LLM context (tools, prompts, resources). Three parts: hosts (VS Code), clients (GitHub Copilot), servers (lightweight programs exposing MCP capabilities).
  • timestamp unavailable: Problem with early MCP: could only return text, leading to ASCII art diagrams and emoji-heavy readmes.
  • timestamp unavailable: Solution: MCP apps let servers return interactive HTML/React/Vue components that render in chat (sandboxed iframe), enabling rich UI experiences and in-context workflows.
  • timestamp unavailable: MCP app flow: User prompt → LLM calls server tool → server returns tool result + UI resource reference → VS Code fetches HTML → renders in iframe → user interacts → app calls server for fresh data.
  • timestamp unavailable: Use cases: data exploration (interactive charts), e-commerce (checkout in chat), developer tooling (profiling, logs, metrics).
  • timestamp unavailable: Real-world examples: Shopify (checkout + brand consistency), Excalibur (interactive diagrams), Figma (on-the-fly components).
  • timestamp unavailable: Liam's demo: flame graph profiler MCP app built with GitHub Copilot CLI and a skill from Anthropic's MCP repo. Server (TypeScript) profiles Go code (bubble sort, Fibonacci) with PPROF, returns profiling JSON + React UI. VS Code renders interactive flame graph in chat.
  • timestamp unavailable: Security model: MCP apps render in sandboxed iframes ('hamster in a cage') to prevent access to VS Code APIs, settings, or external APIs. Vetting MCP servers is critical; use VS Code's @MCP search.
  • timestamp unavailable: Building MCP apps: Use GitHub Copilot CLI + skills (structured LLM instructions). UIs can be React/Vue/Svelte/vanilla JS. Server returns tool result (JSON) + UI resource reference (HTML). Host fetches/renders in iframe.
  • timestamp unavailable: Demo walkthrough: Liam shows the flame graph UI in VS Code chat, explains top functions and summary stats, emphasizes that the UI eliminates text back-and-forth with LLMs about profiling data.

Source/Metadata

  • Title: Building Interactive UIs in VS Code with MCP Apps — Marlene Mhangami & Liam Hampton, GitHub
  • Transcript words: 2891
  • Duration seconds: 966
  • Timestamp note: No explicit timestamps or chapter markers were provided in the transcript; watch_map notes are ordered logically based on topic flow and demo sequence.

Transcript

2767 words en Processed in 313.5s

Hi everyone, we'll introduce ourselves. My name is Marlene and I'm a senior developer advocate at Microsoft and GitHub. Likewise, I'm Liam Hampton and I also am working at Microsoft and GitHub on the developer tools advocacy team for Visual Studio Code and GitHub Copilot. Yes, I do similar things but probably Liam is more on the VS Code side as well. So, just to get started, a bit of an agenda of what we're going to cover today in this session. We're going to talk about what MCP is and then we're going to talk about why we need MCP apps and what they are. And then Liam is going to do some live demos of how to use MCP apps, how to build them and use them in VS Code. So, just to get started, maybe I can ask the question of how many of us know what MCP is? Okay, that's a good amount of the room. Okay, good. That means that we are up to date. I will do a quick summary to talk about what it is. But MCP, of course, is an open protocol that standardizes how applications provide context to LLMs. So, it was created by Anthropic. It is open. It's an open protocol. So, thankfully, the community can use it. And it allows us to access context or LLMs to access context like tools or prompts or resources in different ways. So, just to get a bit of an overview of which parts of MCP we will be looking at with MCP tools. The first thing is that we have MCP hosts. And hosts are programs like VS Code that want to access data from your MCP servers. So, you can have different types of hosts. And they will come with different clients as well. So, the second thing is that we have clients. And these are sometimes going to be the same as the hosts but not all of the time. And these will maintain the one-to-one connection with the servers. So, in our case, in VS Code, we usually encourage people to use the client GitHub Copilot. And that's what we'll be looking at today. And then the final thing would be the servers. And with servers, these are going to actually, they're lightweight programs that expose specific capabilities through MCP to provide that context. And you can build your own servers or you can use any of the many servers that are available out there. So, in VS Code, if you actually go to the extensions tab and you type in @MCP, you'll get a list of different servers that are available. We definitely encourage you to use the server list that is in VS Code just because sometimes you can have some security issues if you just go on the internet and pick a random server. It can have malicious stuff in it. So, we recommend using what's there in VS Code or GitHub. So, when MCP was first released, one of the downsides was that you would pretty much only have it return text. So, if someone was going to ask a question, like in this case, I would ask a question asking it to draw an image, a diagram explaining what MCP is. And so, a lot of the times in the early days of MCP or in general of LLMs, you can go to a GitHub repository and most of the resources readmes have ASCII art or they have a lot of emojis. I feel like we were overcompensating with emojis because we actually couldn't generate diagrams or interesting rich texts with MCPs or the tools that we had available to us. So, a good question to ask is how can we create rich UI experiences in chat? So, this is exactly where MCP apps comes into play. So, MCP apps let server tools return rich interactive components that render directly in the chat. So, you're able to have the server actually return these nice UI elements so that you can be able to interact with them directly in the chat and also just improves the general visual element of things as well. So, I showed earlier that ASCII art example where it was text returned. I asked the same question using the Excalibur MCP server which now uses an MCP app to generate a diagram that explains MCP. And you can see that it generates this is just a screenshot of what it looks like. But another really cool thing is that you can actually interact with that diagram. You can go ahead and move it around, even update the text and so on because this is a live element that's actually available in the chat. So, how do MCP apps actually work? A good example is that maybe we have a user, we start by the user asking a question. So, they'll send a prompt, maybe they'll say, show me analytics. And the agent or the LLM is going to decide which tools to call using the MCP server. It'll connect and then decide on a tool. And the server is going to return the tool results with a UI, a resource reference. So, MCP has MCP resources and this reference will point to an HTML element that is stored that the server has generated. Then the host, so not the client, it wouldn't be GitHub Copilot, but the host which is VS Code is going to fetch the HTML from that UI reference that was referenced from the server. And then the host is going to render the app inside a sandboxed iframe. So, the user at that point is able to interact with the iframe in the host. And there's really a nice separation there between the two. And then the app can call back to the server back and forth so that you have this live interaction experience. And then the user, the server can return fresh data and the app will update as well. Some different use cases for MCP apps. One, for example, is data exploration. You can think of if you are, imagine if we were just typing into a chat all the time and we wanted to understand what you would understand more about a dataset. It would be difficult to interact with the database. It would be difficult to always type in and ask new questions. You know, maybe you found out information about a trend in with the bar chart and then you wanted to find more information about maybe some specific numbers in another chart. And actually typing in that information is going to be tiring for the user when they can just click different buttons in the UI in that way. Another thing is e-commerce. I think this is a really great example where a user maybe in one case would want to be able to actually buy something in the chat UI. So maybe not as much in VS Code, but in other chat UI like in OpenAI or something like that, the user should be able to in the chat actually go ahead and buy and go through the entire checkout experiences in the chat. Instead of just typing out in the past, what would happen is maybe you type, you can ask your client, can I buy something online? And then it would just return links to you and then you'd have to navigate over to the browser. What we want is to keep the user inside the chat and then have them interact and have that experience there. Who is currently building MCP apps? I think this is a good question to ask. Shopify is an example of a company that's currently building with MCP apps. And I listened to a really good talk about how they're also focusing on keeping the brand experience of a company the same as if you were on the company's website. If the user is in the chat, the elements that are rendered should be the same and it should give the same brand feel. So they're really working on the UI elements that are returned so that the user can literally go through the full checkout experience. Like I was mentioning, to be able to actually buy in the chat. Another group that are using MCP apps, like I mentioned before, is Excalibur. Shopify is an example of a company that's currently building with MCP apps. And I listened to a really good talk about how they're also focusing on keeping the brand experience of a company the same as if you were on the company's website. If the user is in the chat, the elements that are rendered should be the same and it should give the same brand feel. So they're really working on the UI elements that are returned so that the user can literally go through the full checkout experience. To be able to actually buy in the chat. Another group that are using MCP apps is Excalibur. That is really popular right now for generating architecture diagrams or having interactive diagrams. If you go to QuoteCode, for example, they have really nice MCP apps that use Excalibur to generate an image visualizing things. Figma is another company that's using MCP apps. I can find a picture of a nice Figma MCP app rendered, but generally speaking, they have components that you can generate on the fly with MCP apps. So I think that's all I'm going to cover. And now Liam is going to go ahead and do our live demo. Yeah, nice one. Thank you. So everybody put their hand up when Marlene asked who's using MCP or who knows what MCP is. Who's using MCP apps already? Okay. There's all right, perfect. Shout out the back. You can't see this. But essentially an MCP app is going to allow us to really interact or stay within one context, such as VS code. So the way that I do this is I actually borrowed a skill, which is on the model context protocol repository online. So it's from Anthropic. I edited it a little bit and I ran it through GitHub Copilot CLI that allows me to spit out a number of different MCP apps. So in this repository here, I've got a flame graph one. That's the one we're going to be showing today. But I've got a markdown via flight status, color picker, et cetera. Just the generic ones that you just go through when you're starting to build these projects. So starting with this read me, you can see that there is three main parts to an MCP app. You've got the tool, which is the LLM itself and the host, i.e. at the moment VS code. You've got the resource, which is then the bundled HTML UI, which you're going to be putting together. That could be in React, that could be in Vue, whatever, however you want to render your UI. And then you've got the link between the two. So the host and the MCP itself or the server are going to recognize this link between having the actual data response and a UI being available to render. So there's a good way you can do this. You've got React, you've got Vanilla JS, you've got Vue, Svelte, et cetera. So you can just go through this whole skill. This is going to basically tell Copilot CLI or Claude or whatever AI tooling that you're using, how to run this or what to do when it comes to running this skill. [SPEAKER_01] It's going to set it up in a certain way. [SPEAKER_01] And it's going to tell you exactly how to run it as well and how it should be run with code examples, such as handlers, tool visibility. [SPEAKER_01] So whether it's just the model that can call the application, whether it's the model and the app or whether it's just the app. [SPEAKER_01] So that's who invokes the tool at any given point. So for this example, I'm going to be using a Go file. I'm a Go engineer. I write a lot of Go code, but all I really care about in here is a bubble sort algorithm. So just comparing array values together, pretty standard in any coding interview. And then we've got the Fibonacci sequence as well. And plus one, this is big O. So essentially just adding to the next one before it. What I'm doing there is I'm going to use an MCP server to profile the application code over five seconds to see where's the time being spent most in this application. As any profiling would do, this is using a Go PPROF. So the underlying profile that you get in Go. So essentially the MCP server is running a localhost. This is the entry point in here. It's just a server that I'm running locally. That then calls out to the server TypeScript. This is all written in TypeScript as per the skill that was enabled. Of this entire file, this is the one that really matters the most, where the MCP is going to bundle up my Go program, run it, profile it, and spit out some data. And it's at that point that the UI is then linked to the MCP server itself to render the front end. Over here we have the React app, Flame app, which is using hooks in React. And in here we can see that we are going to look at the receiving the tool input. We've got the results. We've got where it's spending basically most of its time and the Flame graph itself. So who here has used Flame graphs or touched them? I kind of know. Basically it's a very nasty bit of data you get out at the end and it's all jumbled up. This is a really nice way to profile and see how it's working. So I'm going to open up GitHub Copilot and make sure my MCP server is running. I have it installed here and there is one tool for it. So profile the app. Hopefully if I go and ask GitHub Copilot it should still be working, it should recognize that it needs to call the tool itself. So we'll just give this just a moment to run. There we go. It's noticed I've got the Flame graph profiler installed. Should be using this. Loading the MCP app. Give it just one second to load. There we go. We can close this. Here, this is what an MCP app is really looking like inside the chat window. So it's rendered out a UI in an iframe. We can look at the top functions and the summary of how this is running. This can be edited and run down and sort of massaged as you want to make it fit your chat window. It's pretty big. But this gives a general overview of exactly what they're looking like and how you can measure them. Typically what I would be doing with this data is asking my AI models, is this good? Is this bad? Where am I spending my time? There's a lot of back and forth. Here, this is what an MCP app is really looking like inside the chat window. So it's rendered out a UI in an iframe. We can look at the top functions and the summary of how this is running. This can be edited and run down and massaged as you want to make it fit your chat window. It's pretty big. But this gives a general overview of exactly what they're looking like and how you can measure them. Typically what I would be doing with this data is asking my AI models, is this good? Is this bad? Where am I spending my time? There's a lot of back and forth. With a UI app that we have inside an iframe, you are just eliminating that. You're actually getting rid of it. You just have it all available to you in here. So you can see where it's spending most of its time in the functions, et cetera, et cetera. So that's a really good way to use it. Now, I wrote a very rudimentary drawing, which was a little bit better on Marlene's slide here. But essentially what I've done is I said, profile my application. That has been sent to the LLM model, which has then said, oh, I need to call this tool. The MTP server's run, gives me back some JSON data, passed it to the host. The host has recognized that there's a resource to link and therefore it has been rendered in an iframe in the chat window. The reason we're doing this in an iframe or why the iframe is the same reason that you put a hamster in a cage. You don't let it loose in a room. It's just going to chew things up. You don't want this application to interact with your VS Code settings, any APIs, anything external, all of that stuff. So you want to keep it all contained inside the chat window. That's the reason why it's in an iframe.