Full transcript
0:14Hi everyone. Uh we'll introduce
0:16ourselves. My name is Madelaine and I'm
0:19a senior developer advocate at Microsoft
0:21and GitHub.
0:22>> And likewise, I'm Liam Hampton and I
0:25also am working at Microsoft and GitHub
0:27on the developer tools advocacy team for
0:28Visual Studio Code and GitHub Copilot.
0:31>> Yes. I do similar things but probably
0:33Liam is more in the VS Code side as
0:36well.
0:37Um so just to get started, a bit of an
0:39agenda of what we're going to cover
0:40today in this session. We're going to
0:42talk about what MCP is and then we're
0:44going to talk about why we need MCP apps
0:47and what they are. And then Liam is
0:49going to do some live demos of how to
0:53use MCP apps, how to build them and use
0:55them in VS Code.
0:58So just to get started, maybe I can ask
1:01uh the question of how many of us know
1:03what MCP is.
1:05Okay, that's a good that's a good amount
1:07of the room. Okay, good. That means that
1:09we are up to date. I will do a quick
1:12then summary
1:14uh to talk about what it is but MCP, of
1:16course, is an open protocol that
1:19standardizes how applications provide
1:21context to LLMs. So it was created by
1:24Anthropic.
1:25Uh it is open. Uh it's an open protocol
1:29so hope thankfully the community can use
1:32it and it allows us to access context or
1:35LLMs to access context like tools or
1:38prompts or resources
1:40um in different ways.
1:42So just to get uh
1:44a bit of an overview of which parts of
1:47MCP we will be looking at with MCP
1:50tools. The first thing is that we have
1:53MCP hosts. And hosts are prob are
1:56programs like VS Code that want to
2:00access data from your MCP servers. So,
2:03you can have different types of hosts,
2:05um and they will come with different
2:08clients as well.
2:09So, the second thing is that we have
2:12clients and these are sometimes going to
2:16be the same as the host, but not all of
2:18the time. And these will maintain the
2:20one-to-one connection with the servers.
2:23So, in our case in VS Code, we usually
2:25encourage people to use the client
2:27GitHub Copilot. And that's what we'll be
2:29looking at today.
2:31And then the final thing would be the
2:32servers. And with servers, these are
2:35going to actually lightweight programs
2:38that expose specific capabilities
2:40through MCP to provide that context. And
2:44you can build your own servers or you
2:47can use any of the many servers that are
2:49available out there. So, in VS Code, if
2:52you actually go to the extensions tab
2:54and you type in at MCP, you'll get of
2:57different servers that are available. We
2:59definitely encourage you to use the
3:01server list that is in VS Code just
3:04because sometimes you can have some
3:06security issues if you just go on the
3:08internet and pick a random server, it
3:11can have malicious stuff in it. So, we
3:13recommend using um
3:16what's there in in VS Code or or GitHub.
3:19So, when MCP was first released, one of
3:22the downsides was that you would pretty
3:25much only have it return text. So, if
3:29someone was going to ask a question like
3:32in this case, I would ask a question
3:34asking it to draw an image, a diagram
3:37explaining what MCP is. And so, a lot of
3:40the times in the early days of MCP or in
3:44general of LLMs, you can go to a GitHub
3:47repository and most of the readmes have
3:49ASCII art or they have a lot of emojis.
3:52I feel like we were overcompensating
3:54with emojis because we actually couldn't
3:57generate diagrams or interesting rich
4:00text with MCPs or the tools that we had
4:03available to us.
4:05So, a good question to ask is how can we
4:08create rich UI experiences in chat?
4:12So, this is exactly where MCP apps comes
4:15into play.
4:17So, MCP apps let server tools return
4:21rich interactive components that render
4:23directly in the chat. So, you're able to
4:26have the server actually return these
4:29nice UI elements so that you can be able
4:32to interact with them directly in the
4:33chat and also just improves the general
4:36visual element of things as well.
4:39So, I showed earlier that ASCII art
4:42example where it was text returned. I
4:45asked the same question using the
4:47Excalidraw MCP server, which now uses an
4:51MCP app to generate a diagram that
4:54explains MCP. And you can see that it
4:57generates This is a just a screenshot of
4:59of what it looks like. But there,
5:01another really cool thing is that you
5:03can actually interact with that diagram.
5:05You can go ahead and move it around um
5:08even update the text and so on because
5:10this is a live element that's actually
5:12available in the chat.
5:15So, how do How do you MCP apps actually
5:18work? A good example is that maybe we
5:21have a user. We start by the user asking
5:24a question. So, they'll send a prompt.
5:26Maybe they'll say, "Show me analytics."
5:28And the agent with the LLM is going to
5:30decide which tools to call using the MCP
5:34server. It'll connect and then decide on
5:35a tool. And then the server is going to
5:38return the tool results with a UI a
5:42resource reference. So, MCP has MCP
5:45resources, and this reference will point
5:48to an HTML element that is stored that
5:52the server has generated. Then the host,
5:55so not the client, it wouldn't be GitHub
5:57Copilot, but the host, which is VS Code,
6:00is going to fetch the HTML from that UI
6:03reference that was referenced from the
6:05server, and then the host is going to
6:08render the app inside a sandboxed
6:11iframe. So, the user at that point is
6:14able to interact with the iframe in the
6:16host, and there's really a nice
6:18separation there between the two. And
6:20then the app can call back to the server
6:23back and forth so that you have this
6:25live interaction experience. And then
6:28the use the server can return fresh
6:29data, and the app will update as well.
6:33Some different use cases for MCP apps.
6:37One, for example, is data exploration.
6:40You can think of if you are Imagine if
6:43we were just typing into a chat all the
6:45time, and we wanted to understand more
6:47about a data set. It'd be difficult to
6:49interact with the database. It'd be
6:51difficult to always type in and ask new
6:54questions. Oh, you know, maybe you found
6:57out information about a trend in
7:01with the bar chart, and then you wanted
7:03to find more information about um maybe
7:07some specific numbers in another chart,
7:09and actually typing in that information
7:12is going to be tiring for the user when
7:14they can just click different buttons in
7:16the UI in that way. Another thing is
7:18e-commerce. I think this is a really
7:20great example where a user maybe in one
7:24case would want to be able to actually
7:26buy something in the chat UI. So, maybe
7:29not as much in VS Code, but in other
7:31chat UIs like in OpenAI or something
7:33like that, the user should be able to in
7:37the chat actually go ahead and buy and
7:39go through the entire checkout
7:41experiences in the chat instead of just
7:44typing out in the past what would happen
7:47is maybe you type
7:48you can ask your
7:50client, can I buy something online? And
7:54then it would just return links to you
7:56and then you'd have to navigate over to
7:57the browser. What we want is to keep the
8:00user inside the chat and then have them
8:02interact and have that experience there.
8:06Who is currently building MCP apps? I
8:10think this is a good question to ask.
8:12Spotify is not Spotify, Shopify.
8:16Shopify is an example of a company
8:19that's currently building with MCP apps.
8:22And I listened to a really good talk
8:24about how they're also focusing on
8:27keeping the brand experience of a
8:30company the same as if you were on the
8:32company's website. If the user is in the
8:34chat, the elements that are rendered
8:36should be the same and it should give
8:38the same brand feel. So, they're really
8:41working on the UI elements that are
8:42returned so that the user can literally
8:44go through the full checkout experience
8:46like I was mentioning
8:48to be able to actually buy in the chat.
8:51Another group that are using MCP apps
8:54like I mentioned before is Excalidraw.
8:57That is really popular right now for
8:59maybe generating architecture diagrams
9:02or having interactive diagrams. If you
9:04go go to Cloud Code for example,
9:07they have really nice MCP apps that use
9:10Excalidraw to just generate an image
9:13visualizing things. Figma is another
9:16company that's using MCP apps. I
9:18couldn't find a picture of a nice Figma
9:21MCP app rendered, but generally speaking
9:24they have components that you can
9:27generate on the fly with MCP apps. So, I
9:30think that's all I'm going to cover and
9:32now Liam is going to go ahead and do our
9:34live demo.
9:35>> Yeah, nice one. Thank you. So, everybody
9:37put their hand up when Marlon asked
9:39who's using MCP or who knows what MCP
9:41is. Who's using MCP apps already?
9:45Okay, there's like all right, perfect.
9:48Uh shout at the back if you can't see
9:49this.
9:51Um but essentially an MCP app is going
9:52to allow us to really interact or stay
9:54within one context such as VS Code. So,
9:57the way that I do this is I actually
9:59borrowed borrowed a skill which is on
10:01the Model Context Protocol repository
10:03online. So, it's from Anthropic. I
10:05edited it a little bit and I ran it
10:07through GitHub Copilot CLI. That allows
10:10me to spit out a number of different MCP
10:12apps. So, in this repository here I've
10:14got a flame graph one. That's the one
10:15we're going to be showing today. Uh but
10:17I've got a markdown viewer, flight
10:18status, um color picker, etc. Just the
10:21gen generic ones that you just go
10:22through when you're starting to build
10:23these projects. So, starting with this
10:26uh readme, you can see that there is
10:28three main parts to an MCP app. You've
10:30got the tool which is the LLM itself and
10:33the host, i.e. at the moment VS Code.
10:35You've got the resource which is then
10:37the bundled HTML HTML UI which you're
10:40going to be putting together. That could
10:41be in React, that could be in Vue,
10:43whatever, however you want to render
10:44your UI. Uh and then you've got the link
10:46between the two. So, the host and the
10:48MCP itself or the server are going to
10:51recognize the link between having the
10:52actual data response and a UI being
10:55available to render.
10:57So, there's good ways you can do this.
10:58Like I said, you've got React, you've
10:59got vanilla JS, you've got Vue, Svelte,
11:01etc. So, you can just go through this
11:03whole skill. This is going to basically
11:04tell Copilot CLI or Claude or whatever
11:07AI tooling that you're using how to run
11:09this or what to do when it comes to
11:11running this skill. Uh it's going to set
11:13it up in a certain way uh and it's going
11:15to tell you exactly how to run it as
11:17well and how it should be run with code
11:19examples such as handlers, tool
11:20visibility,
11:22um so whether it's just the model that
11:23can call the application, whether it's
11:25the model and the app, or whether it's
11:26just the app. So, that's who invokes the
11:28tool at any given point.
11:31So, for this example I'm going to be
11:32using a Go file. I'm a Go engineer. I
11:34write a lot of Go code, but all I really
11:36care about in here is a bubble sort
11:38algorithm. So, just comparing an array
11:40values together, pretty standard in any
11:42coding interview. Uh and then we've got
11:44the Fibonacci sequence as well. So, n +
11:471. This is like big O. So, essentially
11:48just adding to the next one before it.
11:51What I'm doing there is I'm going to use
11:52an MCP server to profile the application
11:55code over 5 seconds to see where is the
11:57time being spent most in this
11:59application. As any profiling would do,
12:01this is using Go pprof, so the
12:05underlying profile that you get in Go.
12:07But, essentially the MCP server is
12:08running localhost. This is the entry
12:10point in here. It's just a server that
12:12I'm running locally.
12:13That then calls out to the server
12:15TypeScript. This is all written in
12:16TypeScript
12:18as per the skill that was enabled. Of
12:21this entire file, this is the one that
12:23really matters the most, where the MCP
12:25is going to bundle up my Go program, run
12:27it, profile it, and spit out some data.
12:30And it's at that point that the UI is
12:32then linked to the MCP server itself to
12:35render the front end. I Over here, we
12:38have the React app flame app, which is
12:40using hooks in React. And in here, we
12:43can see that we're going to look at the
12:45receiving the tool input. We got the
12:47results. We got the um
12:50uh where it's spending basically most of
12:51its time and the flame graph itself. So,
12:53who who who here has used flame graphs
12:55or
12:56touched them or kind of know? Basically,
12:58it's a very nasty bit of data you get
12:59out at the end, and it's all jumbled up.
13:02Um
13:03this is a really nice way to profile and
13:05see how it's working. So, I'm going to
13:06open up GitHub Copilot and my make sure
13:09my MCP server is running. I have it
13:11installed here, and there is one tool
13:13for it. So, profile the app. Hopefully,
13:15if I go and ask GitHub Copilot, it
13:17should still be working. It should
13:19recognize that it needs to call the tool
13:21itself.
13:23So, I'll just give this just a moment to
13:24run. There we go. It's noticed I've got
13:26the flame uh flame graph profiler
13:28installed.
13:30Should be using this, loading the MSP
13:31app.
13:35Give it just 1 second to load. There we
13:38go. We can close this. Here, this is
13:40what an MSP app is really looking like
13:41inside the chat window. So, it's
13:43rendered out a UI in an iframe. We can
13:46look at the top functions and the
13:47summary of how this is running. This can
13:50be edited and then run down and sort of
13:52massaged as you want to make it fit your
13:54chat window. Mine is pretty big. Uh but
13:56this gives a general overview of exactly
13:59what they're looking like and how you
14:00can match them. Typically, what I would
14:02be doing with this data is asking my AI
14:04models is this good? Is this bad? Where
14:06am I spending my time? There's a lot of
14:08back and forth.
14:09With a UI app that we have inside an
14:11iframe, you are just eliminating that.
14:13You're actually getting rid of it. You
14:14just have it all available to you in
14:16here. So, you can see where it's
14:17spending most of its time in the
14:18functions, etc., etc. So, that's a
14:21really good way to use it. Now, I wrote
14:24a very rudimentary drawing, which was a
14:26little bit better
14:27um on Marlene's slide here. But
14:29essentially, what I've done is I said
14:30profile my application. That has been
14:32sent to the LLM model, which has then
14:35said I need to call this tool. The MSP
14:37server's run, gives me back some JSON
14:39data, passed it to the host. The host
14:41has recognized that there's a resource
14:43to link and therefore it has been
14:45rendered in an iframe in the chat
14:47window. The reason we're doing this in
14:48an iframe or the why the iframe is the
14:52same reason that you put a hamster in a
14:53cage, right? If you don't let it loose
14:55in a room, it's just going to chew
14:56things up. You don't want this
14:58application to interact with your VS
15:00Code settings, any APIs, anything
15:01external, all of that kind of stuff. So,
15:04you want to keep it all contained inside
15:06the chat window. That's the reason why
15:07it's in an iframe. And I believe that is
15:10actually at time now. So, I guess
15:13Marlene, anything else?
15:15>> Uh nope. Uh
15:16we are Microsoft is here. GitHub has a
15:20booth on the fourth floor on the third
15:22floor. So, oh.
15:24Uh
15:25How do I get back? Need to be in the
15:26camera. But, GitHub has a booth
15:29available. We also have Microsoft Build
15:31this year that's really going to be
15:33focusing on code and we'll have a bunch
15:35of workshops. It's going to be on the
15:36third to the sixth, I think, of June.
15:40So, we'd invite you to come by either
15:42our booth at GitHub or to check out
15:45Microsoft Build as well online. But,
15:47yeah, thanks for joining us.
15:48>> So, that's it. Thank you.