MCP Apps: Rich UI for Any AI Client, No Frontend Required

So over the last year, model context protocol or MCP has gone crazy. There are basically MCP interfaces for everything. Whether it's Slack, Canva, Brave, Outlook, you name it, there is an MCP interface for that. And the reason it's gone crazy is that we finally had a standardized way of calling tools. But a problem with MCP is basically MCP interfaces return text. So you connect with your host, i.e. chat GPT VS Code uh

Claude um you call the tool, you get your result back, but it renders it in line as part of the conversation as text. What it didn't have until now is a standardized way of presenting UI interfaces. And that's where MCP apps comes in. It was launched about a month ago and it's the first official extension to model context protocol. And probably the bit that surprised everyone is it was co-authored by both Anthropic and OpenAI building upon the MCP UI

community project. And that means two direct competitors have now agreed on one shared interface for interactive AI interfaces. So that means any UI that you build upon MCP will work on chat GBT. It will work on claude. In fact, it will work on any interface that supports the standard. And how it works is pretty simple. All you do is declare a reference to a UI resource in your MCP tool and then basically the host will go

off and fetch that resource and render it within a sandbox iframe. So, pretty cool, huh? Yes, unless you've written your MCP server in anything other than Typescript. And if you have, then it gets pretty complicated pretty quickly. So, today I'm going to show you how you can properly decouple your MCP servers from your MCP UI and how I built a component library that makes that a whole lot easier. So, first things

first, just to make things a little bit real, I'm going to show you how MCP apps works within Claude and ChatgPT. So, I've got Cloud open at the moment. I am going to uh click on settings and we're going to add a new connector that I've built with an MCP server uh already. So, I am going to go to connectors and then at the bottom here, I'm going to add custom connector. I'm going to give it the name chart and then I'm going to

pass in a URL. So, https chuck mcp chart fly/mcp. So I am just going to uh add that and then if I now open up a new chat you are going to see if I click on connectors you see chart is enabled. Now I'm going to keep weather enabled which is a weather server that I built as well. Again all of these are open source. I'll put the links to them uh for the GitHub

in the description. And now I'm going to see how this works. So I'm going to ask it a question which is show me a chart showing the temperature in Molly and Cornwall tomorrow broken down by hour. Now before we switch on the chart server I'm just going to leave that off for a second. I'm going to ask that query with sonet 4.6 without the chart server and let's see how this looks. So the first thing you can see there is call my MCP server and it's doing a geocode location. So it's going to try and work

out where Molly and Cornwall is and you can see that it's done there. And then once it's got the weather for that, so it's got the weather forecast for that geo code, it is then going to try and draw an hourly temperature chart. Now, because I haven't given it access to my chart server, it is probably going to generate some React code and then do that. Now, that's fine, but it's not consistent, and therefore, we're not

going to get the same results every time. And if I certainly if I go to check GPT or whatever, it's going to look different, and I don't necessarily want code running. So, there you go. That's a pretty awesome chart. Um, but as you say, it's going to generate code every time and it's not going to give me the same result. So, let's do this a different way. So, I'm now going to open up chat and now I am going to switch on my chart server. I'm going to ask it the same question. I'm going to say, show me a chart using the temperature in Mullen Como broken down by hour. Let's see what

happens. Now, it's done exactly what it did before, which is done the geocode location, got the weather forecast. But notice now that it's called my tool uh my MCP server uh with a tool called show chart which is now showing me the chart that I actually want which is the hourly temperature uh in this way and that chart is part of my component library. Now, the cool thing about this, if I go into chat GPT, for example, notice I'm in developer mode at the moment. But if

I go into settings and then if we go into apps there, you're going to see that I have the exact same chart and weather server that we defined earlier. There you see Chuck MCP chart blah blah blah blah. So now if I ask the exact same question, show me a chart using a temperature mulling cornal tomorrow. And now I'm going to enable my chart server and I'm going to enable my weather server. Now I am in developer mode. Um

but this works exactly for the same for anything in the marketplace, the apps marketplace because they're all written with MCP server support and MCP apps. So now what should happen here is when I run show me a chart using temperature mulling Cornwall um what should happen is it's going to call my tool. So, it's now going to call my weather geocode location. And then once it's done that, it should call the exact same chart tool. So, we should have the same

response. There we go. It's came back. It's done the same tool calls as we did. It called my weather server, etc. And there you go. There's the exact same chart that we saw um on two different UIs. In fact, if I wanted to, I could go a little bit further and we could run the same query from uh my MCP CLI, which also supports um which also supports MCP app. So, if I say show me a chart using temperature, mulling Cornwall um using MCP uh CLI, we

will get a chart that looks exactly the same as Claude and ChatgPT. And if we look at that, you see you can see the exact calls that have been made. It's done a geolo code to go and work out where Mullian is and then it's gone and got the weather forecast and then once it's done that it's going to make the call to the chart server. There we go. You can see MCP CLI has made the same call. It's done a geocode location. It's done a get weather forecast just the same as cla GPT did. And then finally,

it's made this call here which is to chart from JSON uh which is the chart server that I created here. And then if we uh look back at the browser, there's the exact same chart running local host there. So again, it is a standard. And again, if we want to look at the tools there, there's the exact tools from the chart server. Show chart, chart from CSV, and chart from JSON. So there's three reason this becomes super important and why it's not just a send them a link to a web app type thing. The

first one is context, which is the app lives inside a conversation. You don't switch tabs. You don't lose the thread. The UI is right there part of the conversation. It's next to the question that generated it. Let me show you what I mean there. So, if I just come back into MCP CLI and say rerender this as a bar chart. So, you see I've still got all the context from before, you know, blah blah blah. Show me a temperature, etc. But now, it's just going to go and

update that chart to uh be a bar chart instead of a line chart that we had before. So again, if I come back into the browser, you see there's my interactive chart and it's now changed from the line chart. And again, you can do the same within chat GBT. We can just say change this to a bar chart. And of course, it will do the same thing. There we go. Same chart whether it's in chat GBT or whether it is running from MCP

CLI. The second thing that makes this important is birectional data flow. So uh the UI can call your MCP tools. The host can push data into the UI. A standalone web app would need its own API, its own authorization, its own state management. MCP apps get all of this through the MCP server. And I think that's pretty cool because you can have that conversation back and forth and have true interactivity. And again, in a future video, I'll show you how that works. And the last one is sandboxing,

which basically means the app can't escape the parent page, it can't read cookies, it can't escape its container, and host controls what it can and can't do. So, let me kind of show you what this looks like. Again, the code is available uh within uh my uh repo. So, this is a regular fast MCP server. I'm not doing anything special. You can see I'm just doing MCP fast MCP. And then there's a tool here. So, MCP tool get language popularity. Now, there is no UI coming back. This is just a regular old

fast MCP uh server. Now if I run that for a second. So we will just do a uh uvun um simple server.py. You can see it starts up on port 8000 there. And now if I just modify um this to call local um so mcpi is already hooked up to um this particular server. Uh anything that runs

on 8,000 will run. You can see there's the tools which is get language popularity. show the get language popularity chart and you can see because I it doesn't have a UI element to this uh it tries and draws a chart there using ASKI art which is kind of cool but it makes a call the tool call as you would expect there so if I now switch this to um uh how you would call uh a manual server

and fast MCPS so we'll just run the same um and then I'll show you what the code looks like there. Then if we just run this one more time, we'll run the exact same thing in MCP CLI. This time if I look at tools, same tool, show chart. Um, but now when I say get the language popularity chart, it should spin up a chart in my local window as before. So we'll say yes to that. Um, if I go into my browser, you can see there's Python

JavaScript Rosco. And you can see that's the exact same style of chart that we had before because it's using the same component. That is the key thing. It's using the same component and I'll show you what that is in a second. So let's have a look at the code there for a second. Um we will go to manual server. It's a little bit complicated and fast MCP but again I'll show you how I've simplified that in a second. So the first thing that I want you to see here

is that we have a regular MCP tool. So you see there's MCP tool just as we had before. But there is a new keyword that is added in here which is meta. And that is probably the key key thing. So we need to have some uh metadata associated with that. And then you can see here there's a resource UI. So in this case um I've specified the the resource URI as UI language chart. And then you can

see here CDN URL. It's associated with uh a link to a chart. We'll go and look at that what that looks like in a second. And then the if we look at the definition of the chart view for that resource URI that we set there, you can see what I'm doing there is I'm making a really nasty call. So I'm basically going to go and call that chart v1 there. Going to make that call and then

uh I'm going to get the results from it, put it in a cache, and then return that down there. So now when we look at show chart, you see it's going to do this return. It's a special um uh uh call which is return call tool result and it's going to send back its regular content just as it would have done before but now it's going to send this structured content fast MCP um which has the type the chart popularity the data

but basically it is now because I've got that meta as part of this in the resource URI then it's going to render out the chart and that is basically how it works and that's nasty if you're a Python developer because you have to go and write all your React components, your TypeScript, etc., etc., etc. So, I've made it a little bit easier in a couple of places. So, the first one is that um I have made an improved version

of fast MCP, a decorator. I'm going to show you what that looks like in a second. Um but the other thing that I've done is with my own server framework Chuck MCP server uh which is a super fast MCP uh server framework which I use to develop tools. I've actually created a decorator called MCP view tool. And then all I need to do is pass in a resource URI like I did before. Uh pass in a view URL. So say where the view is going to live and we're going to look at that. Notice it's the same view URL as I

showed earlier. And now from a a show chart perspective, you can just return the same data as well. So that's a little bit easier because that decorator means that you don't uh need to go and do the reads of the HTML etc. And in fact, if I wanted to, if I just run um if I do a UV run chuck manual server um which again is on 8,000 and then we just make the exact same call as we did

before. Let me kill that. And then we do that same call. You can see if I say get the language popularity, um you're going to see that it's going to come back with basically the same chart. And there you go. Here's the chart coming back. Um notice how fast Chuckmc is. It is a very very fast server framework. Um that's the the reason I built that. So that works pretty pretty well. And I think that's a simpler I did make it a little

bit easier for both fastmcp and chuckmc server which is if we now go into um a decorator server in fastmcp. One of the things that I've done here and again I'm not going to go into it too much in my video but in my GitHub repo chuck view schemas um what that allows you to do is wrap up React components that I pre-built and I'll show you what that looks like in a second. And I also go and automatically

generate schemas for fastmcp so that you can have a tool decorator. So now that means in fastmcp for those specific tools you just need to go at chart tool pass in the data light show popularity and then that's going to work and you're going to get the same chart. And now if I just run it one more time you're going to see that you get the exact same uh chart as we did before. And there we go. So how does this actually work? Well,

what I've actually done here, and if we go to um Chuckmc UI views, I've created a story book of pretty much all of the components that you might need. Um, and again, I've hosted them up on Chuckmc UI uh views. So that means that if you need to use just an existing view like a chart server or whatever then pretty

much um you can just use that component right so you can just say here's the bar chart the line chart the exact same stuff that you you saw a little bit earlier and it's within that component and I built a whole set of component libraries amongst that so you've got everything from kind of let's say a box plot for example you've got code views use. Um, I've got an audio player there. We've got a video player. There we go.

Playing some video there. You can see specttogram. You've got a quiz component. This is pretty cool. Start quiz. Pacific Ocean. Next question. See the interactivity there. Really cool, right? Um, so you can build entire quizzes within this. Um, and then, uh, you can see your results. Um, you can have things like polls, for example, see the results. And again, that can all be sent back to the MCP server as well.

I've got things like notebooks, for example, which are going to do data analysis. Uh we've got markdown. Uh PDF is in there. There's heat maps. I've just built a ton of uh components. And again, they're all or views and they're able to be used. You see there's data table, there's a counter, and again supports uh dark mode um and light mode. there's comparisons and they're all

basically available to to to kind of view there. Now, if I compare that to the then the chart server. So, if we look at the chart server that I built at the beginning of the video, um very similar to that one that we just built live with the kind of Python uh side of things. I built this using Chuck MCP, but if we have a look at that, you can see exactly chart tool, MCP description, show chart, etc. So, it's using that

exact same decorator that I showed you earlier. And again, I wouldn't necessarily need to use the the decorator. I could use the uh the view tool that I showed you earlier as well. But there's the chart tool there. You can see it's got a better description explaining exactly what all the properties are. Um it's got all these dock strings. Um, but the key thing underneath the hood here is it's using that exact same decorator which just

points back to what the UI resource is. But to come back to that point, it means that the view is now decoupled from the actual app. So we can build things like chart servers, markdown servers here. And again, if I come back to the fast MCP version that I did there and look at the more uh raw and manual version, um, you don't necessarily need to be a React developer anymore. You could just use a component library. Um, as I said, I published one. You can just go and uh clone that. You can deploy it yourself

or you could just stick in the URL and then run it for yourself. And by the time we Yeah. And by the time we do the record, I'll probably do a CDN version of the URL there and then you can just utilize that yourself. But as I said, you can just clone this and use it. So anyway, I hope this video has been useful. I hope it gives you a good overview of MCP apps, why it's useful, how it works across different uh utilities, and then hopefully you like the idea of being able to cover decouple

the UI from your actual MCP tool servers. Um, and uh how you can use that to build interactive UIs across different applications. As I said, that component library I've open source. You can go clone it, do whatever you want with it. Run it on your own servers. You can build upon it. Or, you know, you can just use the techniques that I've used and do something there yourself. Anyway, I hope this video has been useful and I'll catch you on the next