973: The Web’s Next Form: MCP UI (with Kent C. Dodds)

Scott and Wes sit down with Kent C. Dodds to break down MCP, context engineering, and what it really takes to build effective AI-powered tools. They dig into practical examples, UI patterns, performance tradeoffs, and whether the future of the web lives in chat or the browser. Show Notes 00:00 Welcome to Syntax! 00:44 Introduction to Kent C. Dodds 02:44 What is MCP? 03:28 Context Engineering in AI 04:49 Practical Examples of MCP 06:33 Challenges with Context Bloat 08:08 Brought to you by Sentry.io 09:37 Why not give AI API access directly? 12:28 How is an MCP different from Skills 14:58 MCP optimizations and efficiency levers 16:24 MCP UI and Its Importance 19:18 Where are we at today with MCP 24:06 What is the development flow for building MCP servers? 27:17 Building out an MCP UI. 29:29 Returning HTML, when to render. 36:17 Calling tools from your UI 37:25 What is Goose? 38:42 Are browsers cooked? Is everything via chat? 43:25 Remix3 47:21 Sick Picks & Shameless Plugs Sick Picks Kent: OneWheel Shameless Plugs Kent: http://EpicAI.pro,http://EpicWeb.dev,http://EpicReact.dev Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. We got him on. Kentsey Dodd's number one fan of the show. We've been trying to get him on forever and he's a busy guy and hasn't wanted to come on, but we finally nabbed him and he's here today to talk to us about MCP and MCPUI. The UI stuff is really interesting. It's kind of being worked on right now. It's kind of cutting edge and really exciting, in my opinion. I'm pretty excited about it. So, welcome Kent. Thanks for coming on.

• 0:26Speaker 01

  Yeah, man. I'm thrilled to be on. Yeah, definitely number one fan. I have listened to every Syntax episode since day one.

• 0:33Wes Bos?

  Oh, my gosh.

• 0:34Speaker 01

  So, I'm an OG fan.

• 0:37Wes Bos?

  That's insane. Well, we appreciate it. That's great.

• 0:40Speaker 01

  Yeah, you guys, you make a good show. So, keep it up.

• 0:43Wes Bos?

  Well, thanks, Kent. So, for those who don't know you, give us a quick rundown of who you are and what you do.

• 0:49Speaker 01

  Yeah, well, I am Sentry's favorite one-wheel owner. You probably can't see it in the video here, but I got a one-wheel on my wall that has-

• 0:58Wes Bos?

  I'm pissed I didn't get one of those.

• 0:59Speaker 01

  Sentry branding on it. It's so sick.

• 1:03Scott Tolinski?

  I would kill myself on one of those. I absolutely would. I can hardly walk back and forth to my office without tripping and dying, so.

• 1:10Speaker 01

  Oh, well, no. So, I enjoy that, but I'm a full-time educator. I worked in industry for a while and then went full-time educator in 2019, took a break to build a remix and we sold it to Shopify. And then I jumped back into full-time educating at that point. So, yeah, Epic, or my first big thing that most people probably know me from, Egghead, Friend and Masters, then Testing JavaScript, EpicReact.dev, EpicWeb.dev, and now I'm doing EpicAI.pro because the .dev was taken.

• 1:43Scott Tolinski?

  .pro is kind of good, though. I didn't know about .pro, yeah.

• 1:46Speaker 01

  I actually have been thinking that AI is like, it's applicable to way more than just developers, of course, but like, there are so many people in the world who could benefit so greatly from AI and they just have no idea. And so, maybe pivoting Epic AI a little bit to be bigger than just development and like, start getting into, I'm going to turn you into an Epic AI professional. Like yeah, AIify your business. So anyway, just that might work out.

• 2:16Wes Bos?

  For anyone listening, you might be wanting to turn it off because you might be thinking, if you don't know who Kent is, you might be being like some AI huckster they're having on. Ken is legit. He knows what he's talking about. He knows how to code in and he's incredibly reasonable, I would say. So certainly stick around. There's a lot of good stuff coming.

• 2:37Speaker 01

  I do have opinions, but I like to think that they're well founded. And if they're not, then I'll call it out.

• 2:43Wes Bos?

  All right, let's get into real quick. We're going to explain what MCP is. And then I think a majority of the show, we're going to dive into to MCP UI as well as like, like both how to build for it, you know, like people who build websites are probably going to be building MCP servers and MCP UI widgets, I believe they're called. So you're probably going to want to scale up on this. So give us a quick rundown of like, what is MCP?

• 3:10Speaker 01

  Yeah, it's, there was a joke, I think yesterday by Dax, he said that nobody wrote down what MCP stands for and now nobody can remember.

• 3:18Wes Bos?

  Yeah, I saw that. And the moment I read that tweet, I was just thinking, yeah, that's, that's right. I don't remember what it stands for. Yeah.

• 3:25Speaker 01

  Yeah, it's a model context protocol. And so we talk a lot about context engineering with AI and and how important it is to get the right context into the model so that it can actually do the things that you want it to do. The model context protocol is all about that. Without going way too deep into all the history here, most of us remember when AI first started being a part of our workflows and a lot of that workflow was just copy pasting things into the chat and then copy pasting things back out. MCP UI is about eliminating that or not UI necessarily, but MCP generally is about eliminating the need to get things into the context window and then get things out of the context window back into the real world. So

• 4:07Speaker 01

  we've had the ability to call tools from these models for a long time, but the mechanisms for doing that were not standardized. And so what MCP does is just standardize that. And so if you're a service provider, you have some context like Sentry is actually a great example of this. They have awesome, you all have an awesome MCP server and you have a lot of context that developers want in their chats. And so by building an MCP server, you can work with any agent that supports MCP. And so that's, it's like the jQuery of context management, if you want to say like, it just normalizes all the differences across the different agents.

• 4:49Wes Bos?

  Yeah, like if you, if you're running like a chat or you have your own API calls or whatever, you can sort of like load it up with several MCP servers, which, once those are loaded, it will, it will load all the, the tools available for it. So one silly simple example I, I've built is a currency conversion MCP, because if you're using like ChatGPT, it like, of course it knows like currency conversions and whatever, because it has its own, own tools baked in, right? But if you're using like a straight up API, you're just like pinging the OpenAI API or Claude or whatever, it doesn't necessarily have access to the internet or things like that. So if you want to give it specific tools, like for example, converting currency, or another one I've used is, is doing math, you

• 5:33Wes Bos?

  can build out these different servers where you can give it access to do things like pull in the latest rates or get your latest bugs from Sentry, et cetera, et cetera. And it can sort of do things on your behalf.

• 5:45Speaker 01

  Yeah. Another practical example is I just, I, I've had this app for a long time. I rebuilt it recently. It's called Media RSS. It's open source. You can find it on my GitHub. But basically what it does is I've got a directory of media files, mostly audiobooks and that sort of thing. And I just point my app to this directory and it turns it into an RSS feed. And, and I can create lots of different RSS feeds and stuff. And so I've got an RSS feed for each one of my kids. And then I add the books that I think they're, they're okay listening to and whatever.

• 6:16Wes Bos?

  That's great.

• 6:17Speaker 01

  And yeah, so of course I hook up MCP to that. And now I can go to ChatGPT and I say, what books is Rebecca missing that like she should probably have in her library? Yeah, go ahead and add those. And it's actually like a really Really practical thing that I use regularly now. It's pretty cool.

• 6:33Scott Tolinski?

  Yeah, that's great. So, uh, to give some people some focus, I mean, we're talking about like context in regards to, you know, giving the AI as much context as it needs to fix any problem. What happens, Kent, when that context becomes bloated?

• 6:50Speaker 01

  Yeah, I think most people listening who've used AI like know that things tend to get kind of funny when it gets bloated. And, and most AI harnesses have mechanisms for like dealing with that, whether that be summarize the conversation to keep it going or whatever. It always seems to get turned sideways in that situation. And honestly, like, it's actually a lot like a human. If you approach a human developer or something, you say, here's like everything that you could possibly know about this code base. Now I want you to go fix this button. They might be a little confused about which button you're talking about. They could get confused about what it like, what parts of all the things you just told them were relevant to the task that you're giving them.

• 7:31Speaker 01

  And so the real challenge for anybody working with AI is to know the right context to include and the right context to exclude. And make sure that you're only including the right stuff. So one criticism of MCP is that for the model to know whether to call these tools, it needs to have those tools descriptions and titles and all like inputs, everything. It needs to know all of that upfront to know whether those tools are appropriate to call. And that leads to context blow. Like imagine you installed GitHub MCP server and you install the playwright MCP server and the Sentry one. Sentry actually does a pretty good job. I don't want to, this is not a paid thing, but Sentry probably has.

• 8:14Scott Tolinski?

  Keep going. Yeah, let's hear about how good the Sentry one is.

• 8:16Speaker 01

  Sentry probably has one of the best MCP servers available. Yeah, like you include all these MCP servers. Now what you have left in your context window is just so small. And, and then like the model thinks that those things are actually really important. It overweight their importance. And so a lot of optimizations have been made just in the last few months to like dynamically determine which, you know, once I get the user prompt, let's go find the appropriate MCP tools to include. And then we'll send all just that subset over to the model. And there are a whole bunch of others, like you've probably heard of code mode and, and code execution and all of that stuff. We're at the phase with MCP now where.

• 8:57Speaker 01

  We've made it work. Now we are trying to make it right and also make it fast and like we're optimizing. And so there are going to be a lot of things that are tried. Some things aren't going to work very well. But like MCP now, today, is a lot more useful and valuable than it was a year ago. And it's like barely a year old.

• 9:17Scott Tolinski?

  Yeah, right. Wow. Yeah. It feels like a lifetime.

• 9:19Wes Bos?

  I think there's still quite a bit that's still being figured out. But everybody's happy that it's at least a standard, you know, that that can work across tools, whether using in a coding, whether using it in some sort of chat, whether you're making API calls. It's ideally all a standard. But one question a lot of people have is like, what is the difference? If you're building out an MCP server, sometimes it feels like you're just hot potatoing the requests from the MCP onto an API. Like, what, why don't you just give the AI access to your API directly?

• 9:55Speaker 01

  Yeah, yeah, there are a couple of reasons for that. First of all, I'll say if you're just doing like a one off thing, you probably can just give it access to your API. Like cursor, especially, I just say curl this URL, here's the stuff, and boom, it'll do it. And now I can move on with my life. And so like, sometimes just giving it an API is the right answer. Other times, making a skill, like if it needs to be a reusable thing, making a skill that has like, here are the specific APIs, like that also can be fine for your specific niche use case. What MCP becomes really valuable is when you have something that you want to have a little bit more control over how this API

• 10:37Speaker 01

  is called, you want to make it reusable by other people and other agents outside of just your one specific use case. And also, if you have a really, really huge amount of use cases that you want to support, it's more than just like, hit this one API, and now we're done. One problem that early MCP adopters had was they had like their open API spec or their swagger docs or whatever, they'd just hand this over to some tool that would just do that hot potatoing, and it would expose a tool for every API. And models did really poorly with that. And if you think about a model I want to be clear, models are not human, but if you think about them like they are,

• 11:20Speaker 01

  some of these things become more clear. If you were to just give SwaggerDocs for something the size of Jira over to a developer, there's a pretty good chance that they would call the right APIs, but there's a really, really even better chance that they would call the wrong ones, or call them in the wrong order, or forget to call one, or whatever. And the model's going to do the exact same thing. And so what do we do for humans who are going to be interacting with this? Well, we build them a website, and we collect all of those different API calls into different buttons and like navigations between things. And you like progressively discover different capabilities as you're navigating around. And so that's sort of what MCP does as well. Right now, Wes, you're totally right. I think

• 12:02Speaker 01

  we're still working through things. I think dynamic discovery of tools, it's supported in the spec, but not a lot of people are doing that. And not a lot of hosts really support that very well. But this progressive discovery of tools, I think is something that we're going to see a lot of. And I really equate the like API and website to API and MCP server, one serving an agent and one serving a user.

• 12:26Wes Bos?

  Makes sense.

• 12:27Speaker 01

  Makes a lot of sense to me.

• 12:28Scott Tolinski?

  Yeah. You see now Anthropic came out with Skills for Claude, and you're hearing the word Skills pop up a lot more. I think that can get a little bit confused in terms of like, what, how is MCP differentiated from the idea of Skills, or some of the things have maybe like slash, slash, commands?

• 12:49Wes Bos?

  Commands, prompts. They've like, like, it's probably six or seven things in Claude code. I am curious about that as well.

• 12:57Speaker 01

  Yeah, yeah. So to here, here, I, like I said, my opinions are typically well-formed, and I will tell you when they're not. So I have not, actually, I still have not used Claude code.

• 13:08Scott Tolinski?

  Okay, yeah.

• 13:09Speaker 01

  But I have used like similar, similar things, and I feel like I have a pretty good understanding of things. Skills are basically like a simple way to, to have basically a spec of how you accomplish a certain task. Okay, do this, then do that, and then if it's going to Be this way, then you need to do it that. And if it's this way, then do it this other way. And what's really cool about those is that you can share those across teams like you can just, you know, copy paste this markdown file or whatever. And that's really powerful. And that, some people saw that and they're like, oh, okay, MCP is dead. We can just use this now. And the people who feel that way don't quite capture the the scope of MCP. Um, I think we need to remember that MCP is much bigger than just like people developing

• 13:51Speaker 01

  software on a desktop. Um, MCP, like I use MCP on my phone and ChatGPT. Uh, like I'm not running a CLI on my phone. MCP enables that. And so like, it's a little bit bigger. The other cool thing about skills is that you can actually use a skill to tell it to call an MCP server. And so MCP being like really portable and adaptable. Again, if it's a really simple thing, then uh, you say, yeah, just call this API, you know, curl it and and bingo, bango, and you can move on with it. But for things that are highly reusable, um, having the protocol there is really helpful. There are a bunch of other things. I think like you got your cursor rules and everything else that we've talked about. There's a lot of overlap on what these

• 14:33Speaker 01

  different features are capable of doing. And that's mostly because we don't know what we're doing. We're all just kind of figuring out the best way to do this. For a while, we had like 300 different files. Now it's Agents MD, but there are problems with that too. So like, we're all just trying to figure out the best way to do this. But uh, none of these things uh, eliminate um, the really the reason I'm excited about MCP uh, and most of them just complement MCP anyway.

• 14:57Wes Bos?

  I'm, I'm pretty sure it was, I think it was open code. I was reading their docs where they only load the description of the skill up top. And then once it's actually needed, then they'll load the entire thing. So they're not muddying the um, the entire context window. But I think like, that's something similar we're gonna get.

• 15:15Speaker 01

  Yeah, yeah. Optimizations like that are exactly what we need. Um, last year, when people started talking, well, actually, when I first got into MCP, I, I saw this as a problem right from the start. And I was like, how would you solve this problem? Is this an unsolvable problem? Because I made a really big bet, like going into, you know, as much into MCP as I did. And so I was really careful thinking about it. You don't want to jump into something that has unsolvable problems. And it was really obvious to me like as let's assume again that the agent is a human. If I had a human assistant and I asked them to do something they've never done before. They're going to go over to Google and figure out how to do it like they'll just do. How do I send money to this person to pay them for pizza or whatever?

• 15:55Speaker 01

  And Google will give them some results and and they'll say, hey, uh, they'll come back to me and say, I've got PayPal and I've got Cash App. And I've got like these others. Which one do you want to use? I I'd like to use PayPal for this, please. Okay, great. And then the next time they'll remember, oh, yeah, you use PayPal last time. Uh, I'm gonna just assume that you're good with that this time. And I I don't see any reason why the agent couldn't do something similar. They'll have some sort of search mechanism, find the thing you like, and then save that in your memory. And and now it's really your assistant.

• 16:21Wes Bos?

  Yeah. All right, so that's MCP. There's a couple of other pieces of MCP, but probably tool calling is is the biggest one. But like one thing that is is currently being worked on is this idea of MCP UI. Because MCP will simply just return data, right? And then you just you give that data to the AI and then it can it can parse through that. And then figure out how to how to respond back generally in in text, right? But if text is not the the be all, end all of everything. Sometimes you want to return buttons or UI or a carousel or images or or literally anything else. So there's this idea of instead of the MCP server returning just data.

• 17:04Wes Bos?

  It returns HTML, CSS, JavaScript, right? So give us an explainer of that.

• 17:09Speaker 01

  Yeah, this is a very early on as I started getting into MCP. I thought, okay, yeah, this is really important. We need to have something like this. And and where I got this idea was I talked with Ryan Florence, a buddy of mine, who we talked a lot about. The future of user interaction. We'd actually just seen Evan Bacon at ReactConf. And he gave this demo of using React Server Components with React Native. And it was like, of course, yeah, that's mind blowing. How cool. But the demo itself, the subject matter was the thing that blew my mind. What what it was is he basically said, hey, here's What a chat GPT conversation looks like if I ask it about movies and it was just a bunch of text. And here's Gemini and they had an image in there. Wow, that's great.

• 17:53Speaker 01

  And then he had his, uh, which use server components, which is what he was demoing. But what was cool about it was it was like native elements and you could actually click on different buttons in the conversation. And, and those would interact with the conversation. And I was like, yeah, we have the technology to do this now. And so as soon as I started getting into MCP, I realized, well, here's a gap. Like we, MCP is capable of, of enabling this behavior. So I opened up an issue on, uh, the, or a discussion on the protocol. And that evolved into a project by Liad and Ido, who created MCP UI. And which is basically is two part thing. It's a, a part for the host or an SDK for the host and then an SDK for the server.

• 18:38Speaker 01

  So if you're building a host, that would be like a host would be VS Code or Cursor or Claude Desktop or ChatGPT. That's, that's the host or Goose. Uh, and then the server is your MCP server. So the host is needed because it needs to take the, the UI that is returned and then render it properly. And then of course, the server SDK, um, just makes it so that you can return the right shape of, of that JavaScript, HTML and CSS. So that the host can render that. And so, uh, that worked super well, lots of adoption. And, um, I, I could, there's probably a lot more to say about that, but I'll just pause right there. That's, that's where we were back in like June of last year.

• 19:18Wes Bos?

  Okay. Cause the last time I've dipped into it was probably like November. And at that time, there was kind of like, like the, the state of returning UI from, um, MCP was like kind of in two spots, right? The MCP UI was trying to figure out what their spec was. And then possibly move into the, the actual MCP spec, you can tell me that. And then there was also this other thing, which is OpenAI came out with their Apps SDK, which was a sore, like very, very crappy implementation of MCP UI. Being able to return HTML CSS and, and render it inside of the chat GPT, um, thing.

• 20:03Wes Bos?

  So like, where are we at right now with all of this stuff?

• 20:06Speaker 01

  Yeah, yeah. So dude, I'll never forget when ChatGPT came out with that. It was like such a so much validation for what's going on because let's keep in mind that at this point, ChatGPT has nine hundred million users weekly, and that's an old number. Like just an insane number of users. As far as the consumer side and maybe on all sides, ChatGPT is the biggest dog in this race if you're talking about users. And so they literally could do anything they want. They could be like, we're gonna be like Apple. We're gonna have our own marketplace. We're gonna have a proprietary operating system. We're like, do our own thing and you all have to bow to us because this is where all the users are. But instead, they decided, you know what, we're gonna just jump on board with the standards thing.

• 20:51Speaker 01

  Instead of a closed ecosystem, we're gonna jump with this open ecosystem. And I just applaud them for that because really there were all the incentives were pointed in the other direction. So yeah, in like September, October, they released ChatGPT apps, the Apps SDK. And yeah, it was a little bit rough, but it was rough in the right ways. Like MCPUI had some security challenges that it needed to to address and things. And so ChatGPT was very serious about that and you know, security typically makes our jobs harder. And so the APIs were a little bit funny. MCPUI very quickly built an adapter layer and so you could continue with your MCPUI apps that you'd built up to that point.

• 21:36Speaker 01

  And and use those in ChatGPT with just a couple of differences for security reasons. And yeah, from like the day it was announced, I reached out to a contact that I have at OpenAI. And I was like, hey, just wanna like check, did you look at MCPUI? Like where's what's the feeling there? And they were like, yeah, absolutely. We we want to collaborate. We want this to be open. We want this to be a part of the spec. All of their APIs were very OpenAI focused. And so that made me a little bit nervous, but they were like, no, no, we did that intentionally so that it was like, this is just our implementation of this. We're gonna move away from that for the general thing. And so, yeah, yeah, I know. What a relief.

• 22:21Speaker 01

  Yeah, so in I think November, a little bit before the most recent MCP spec release, they announced that they are going to be working on an extension to the spec, which there may be future extensions. This will be the first official extension to the spec for what they call MCP apps. And what's really encouraging to me is that, like, all this time, you've seen all of the right players participating in MCP. You've got Google, you've got Amazon, you've got Microsoft, and OpenAI and Anthropic. Like, all of the right people are involved here. And then when they released the MCP apps blog post, it all of those companies were associated. Well, not all of them, but yeah, you had OpenAI,

• 23:04Speaker 01

  Anthropic, Microsoft is involved, and then the two guys, Leot and Ido, who built MCP UI. And so they're all participating in this open spec. And it, and actually, around that same time, MCP was donated to the Linux Foundation. And there, we could probably talk about that at Link too, but I'm very encouraged by that as well. So the MCP apps extension is still in development. It resembles, it really does look like a marriage between MCP UI and ChatGPT apps, which I think is really encouraging. It's a really good thing. And Goose already supports MCP apps. Postman supports MCP apps. ViaS Code has, I think it's in a branch right now,

• 23:49Speaker 01

  like, an experimental release or something, but they have MCP app support. I'm not sure what the process on ChatGPT and Claude Desktop are, but yeah, they can't be too far behind.

• 24:02Scott Tolinski?

  Yeah. So when you're working on this stuff as a developer, I often found, I built an MCP server for a video we did to deliver me pizza to my house. I can only imagine this problem I'm going to say is going to be exaggerated when you get into UI stuff. But I found me personally being ignorant to writing MCP servers, the debugging and writing process for an MCP server felt really difficult in terms of like, I just have to try this thing. It felt like going back to the old days of opening up the website and like just trying it.

• 24:39Wes Bos?

  Yeah, the feedback loop of OpenAI was so slow. Like you had to go back into settings and like refresh the connector and it would go download all the templates.

• 24:49Scott Tolinski?

  But even writing my own MCP server, the feedback loop was slow because I would get to like the fifth or sixth step in ordering a pizza and then something would go wrong and then I'd have to start over. And I was just like, what's the typical dev flow for building MCP servers?

• 25:02Wes Bos?

  Yeah, we're using an inspector. Maybe, oh, we'll let Kent tell us what that is.

• 25:06Speaker 01

  Yeah, this is, this is a super good question. Honestly, I really like the analogy to early web days because that's actually what this feels like to me. Or anybody who jumped on the mobile train really early and building mobile apps, that's very familiar to them as well. Where the DX is just like very poor. So, and then like, we all know that when something gets significant adoption, more and more people are interested in it, more and more people are feeling that pain. And so more and more people go in and solve that, those pain points. And so that has happened over the last year. There's a really great tool specifically Wes for chat GPT apps because that process is the worst.

• 25:48Speaker 01

  It's like, yeah, not fun, but it's called MCP Jam.

• 25:53Wes Bos?

  That's what I've been using, yeah.

• 25:54Speaker 01

  Yeah, it's fantastic. I don't remember if it's a fork of the inspector or like a brand new project, but.

• 26:01Wes Bos?

  It's a pretty heavy fork of something, like they forked it like probably six months ago. It's an excellent, so basically if anyone wants to know what it is, is when you fire it up, you add your MCP servers and then it asks for all the tools, resources, templates, prompts, all of the things that an MCP server can give you. And then you're, and then you can, it has like a chat, you can give it like an API key, but you can also just like fire off each of the different functions and see what the response is from each. It's, it's really good.

• 26:32Speaker 01

  Yeah, it's very good. But still, I would say that it's nowhere near the hot module replacement that we're used to on like front-end stuff. And the workflow is a little slower than we'd like. Testing is not really something most people do much of. Testing MCP is actually pretty interesting, too, because while your code doesn't necessarily involve an LLM, so you don't necessarily need evals, you are writing descriptions and titles and like things that are going to be used by the LLM, and those things probably need evals. And so it's a little bit tricky. And right now, we're pretty early in that workflow, but it is definitely improving.

• 27:17Wes Bos?

  Let's talk about the actual flow for building out an MCP UI. Because like with MCP, what you do is you you register tools. You have like a schema of what what arguments it can take in, and then you give it a schema of what type of data it can return back. But then, like, once you're past data, what does it look like for actually registering? Do you register components? How does that work?

• 27:42Speaker 01

  Yeah, good question. So if we're just talking straight up MCP, which applies very much to MCP UI as well, there are a couple of ways that you can distribute your MCP server. How you distribute it depends on the clients or the host applications that you want to be able to connect. So if you're building something for developers running in an editor, then you can actually use either one of these approaches. One is it runs as a local process on their machine, and the host application just communicates over standard I/O. So it spins it up as a sub-process and then talks to it over standard I/O. And so what distribution on that is just like publish it as an NPM package, and then NPX, yada, yada, and then like Bob's your uncle.

• 28:25Speaker 01

  And it's that's pretty straightforward. And SDK has it like pretty easy to to start that server with the standard I/O protocol and all that. If you want it to be usable by like a website or even lots of desktop applications as well.

• 28:43Speaker 01

  Or chatgpt.com or cloud.ai. Then you're going to want to host this remotely on your own server. Because chatgpt.com is not going to be running sub-processes for you. And so, so you do need to run this as a remote thing. In the early days of the spec, there have been a couple bouncing around of how this is done. But now we're pretty much settled. We're still actually evolving to make this more of a stateless protocol as well. But it's pretty much just an HTTP with streaming interface. You make a GET request. You leave that open so that you can stream events back. And then you make POST request to make tool calls and stuff. As far as your server, though, it actually resembles the standard I O server code like really closely.

• 29:24Speaker 01

  It's just that little bit of integration of how you're connecting to clients.

• 29:29Wes Bos?

  Let's say I want to return some HTML, right? Like instead of returning data, you simply just return HTML and it will render it on out. But like, do I need to have all of that HTML rendered ahead of time? And like, and also if it's like a React component, I gotta like bundle it and then put it in? Like, what does that workflow look like?

• 29:51Speaker 01

  Yeah, yeah. So with the MCP app spec right now and chat GPT kind of introduced this as part of the security concerns. You do need to have that HTML upfront and it's you're going to be serving that HTML through a resource. So what happens is you have a tool that has metadata and actually like user specific data and stuff. So that that's going to be like your GET request when your app first loads up. It's kind of how you might think about that. But it includes metadata about your app and and the initial data. And then you have the resource that's like your static assets. And so this will be the HTML that HTML can link out to JavaScript files and CSS files.

• 30:34Speaker 01

  But you you're also going to include basically CSP suggestions. So that's your content security policy suggestions, like what resources or what domains can you? Can this HTML reach out to? There's a lot with security on that and that we could go deeper on that. But basically, the idea is you have this resource that returns a hunk of HTML that can reference JavaScript bundles and CSS and stuff typically.

• 31:02Speaker 01

  This is going to be like not a routed app. It's not like, let's just take my app and iframe it into the conversation. That's, that's not the user experience we're going for. It's more like a widget. I call it a widget. They're actually bike shedding what they're going to call it right now. They, they might end up calling it a component, uh, which I think might be a little confusing. But in any case, it, it effectively is just a, a smaller thing that, um, accomplishes the specific task and interacts with that conversation. So for your side of things, yeah, you generate the HTML and that HTML should be static. It cannot be dynamically generated on a per request basis or anything. The dynamic stuff comes from the tool side of things.

• 31:45Wes Bos?

  And, and that HTML and JavaScript that is, is returned, it can then like make more calls on your behalf, right? Like, like you might want to return, their example is like a pizza place, right? You might want to click a button that says, order pizza, or, uh, you might want to configure a pizza and then, and then click submit and then that will send it back to the chat, right? So like these, these are, this is not just like, display the weather widget and it looks nice, you know? Or display a chart, but their actual, you can interact with them, right?

• 32:17Speaker 01

  Yeah, yeah. Actually, I like to think of, uh, Tony Stark and how he interacts with Jarvis. Uh, I can't believe that it's been this long into the podcast and I haven't said the name Jarvis yet. Uh, cause this is like the thing I've been harping on for the last year, like why I got into MCP is because we can build Jarvis now. But, uh, like Jarvis will create an interface for Tony and then he'll say something to Jarvis and then Jarvis will change that interface.

• 32:40Wes Bos?

  Yeah.

• 32:41Speaker 01

  Um, sometimes completely do away with it and make a new one. And sometimes just like add, you know, expand to the thing or whatever. And it's a very interactive sort of experience. And so, um, and then like sometimes Tony will press a button and then that changes something in the interface and then Jarvis says something as a result of that. It's like, it goes both directions. And it's so, uh, yeah, it's, it's very much a, um, interactive experience, not just with the app itself, uh, in isolation, but also with that conversation that's going on. That is what gets me really excited about this is the the potential for the way that humans interact with our software. For the last couple of years, everybody's been wanting to try and put a chatbot into their application.

• 33:24Speaker 01

  Well, now we've flipped it on its head and we want to put the application in the chatbot. And that makes it so much more powerful because now my agent who understands not only the stuff that I do in this application for, you know, ordering pizza, but they also understand my contacts and I can say, order pizza for my best friends and send them all a message that like this is happening and and the agent can kind of coordinate all of that. Where if if I had an agent just for contacts and another agent just for ordering pizza, I'd have to go to each one and and fill them up with the context necessary for them to do the task.

• 34:02Wes Bos?

  Is it not like a like a missed opportunity that the fact that you can't programmatically generate markup? AI is very good at generating markup. Like you give it a couple of shad CN components and say, I want to display a UI for doing X, Y, and Z with this data. You return the markup and like right now you can't do that. Is that missed or is that a security thing?

• 34:25Speaker 01

  Yeah, that's a great call out. That was part of my original discussion was like, maybe this is just the MCP server returns a bunch of components and then the the agent decides what to do with them. I think that's that's not a closed door that could still possibly happen. Ruben Casas, who's at Postman, he made a demo where he effectively did that using sampling, which is your MCP server. This is another feature of MCP we didn't talk about, but effectively the MCP server can can go back to the client to the host application, say, hey, can I borrow the LLM for a second? Do this thing for me, like do this completion, give me back the result and then I'll do something with that. And so he used it to generate HTML and then sent that back.

• 35:10Speaker 01

  So he kind of worked around the problem. But yeah, I don't know if I'm ready to call it a missed opportunity. I think that's still a possibility, something that we could do, but it's not part of the spec yet.

• 35:22Wes Bos?

  And what about like calling the LLM from your UI as well? You know, like if you click a button and it it just pings the LLM's API and is able to like run a query for you. Is that possible?

• 35:36Speaker 01

  Yes, actually, it is possible. You can send a message and like have that continue the conversation. I have a fun example where I have ChatGPT pull up a calculator. And it's all Tron themed because I made this example when the new Tron movie was coming out. And if you made a calculation that resulted in 1982, when the original Tron movie was released, then it would send a prompt back to ChatGPT to tell it to act as if it was the master control program from the original Tron and like try to, you know, talk to you like you're a program or like see if you're a user, whatever. It's just fun, fun little thing. But yeah. So that that conversation can work back and forth.

• 36:17Wes Bos?

  But like, can you, can you get the data from that? I like, I've known that you can send a prompt back to the chat and then it will run it, which in turn may render a new embedded widget. But I'm always, I'm always curious about like, like, what if I want to stay on that widget?

• 36:31Speaker 01

  Yeah. Yeah. So two, two answers to the question. So first, you can call tools from your UI. So like click a button, call a tool, get the results. So that's exactly what you're asking. But you can also, there are a couple of ways that the UI can be visualized. So you can have it be just like a little widget as part of the conversation flow. Not all of the hosts really support this just yet, but there's experiments with having a sidecar. So it's like right next to the conversation. That, yeah, I'm with you, Wes. Like, that is the thing that gets me really interested and excited. Another one that ChatGPT demoed was the Zillow app. It went fullscreen and then you just got this little chat input at the bottom.

• 37:13Speaker 01

  And then you just say, now filter it this way. Now, like, you know, find me houses in this area. And like only those within walking distance to a school or whatever. And it just updates that fullscreen UI.

• 37:22Wes Bos?

  Okay. Yeah, that's sweet.

• 37:24Speaker 01

  Yeah.

• 37:25Scott Tolinski?

  You had mentioned Goose a couple of times. Can you talk about what Goose is and how you use it?

• 37:31Speaker 01

  Yeah, so Goose was built by Block. Most people probably familiar with Square. But yeah, it's a cool company, cool people, and they, like most tech companies, are always looking for ways to make their engineers more productive. So they decided to build a desktop application and CLI that is effectively an agent. They were one of the really early ones to do that, and they jumped into MCP like really heavily. They call them extensions. They also actually have a feature called Recipes, which is an early take on skills, what everybody's doing with skills now. But yeah, just a cool company, really early on both MCP and MCP UI. And they actually donated, Block donated Goose to the Linux

• 38:15Speaker 01

  Foundation, along with all the MCP stuff, too. So it's an open source project. Yeah, definitely one to look at if you're looking for an agent. And you, like, if you give it all the permissions, then it can do all kinds of crazy things on your computer.

• 38:28Scott Tolinski?

  Yeah, I'm kind of doing that with Claude Bot right now. Yeah. And we just recorded an episode about personal software. And yeah, it is, uh, it's crazy, that's for sure. Oh, my gosh. Yeah. I don't know what to say about it other than that.

• 38:42Wes Bos?

  Okay, so the chat UI for this, is it, everybody's saying like, the web browser is done, websites are over, the entire existence of interacting with anything in the world is going to be via a chat app. And, and we've seen some people like Airbnb say like, that's not a good experience. That sucks. I'd rather people go to our own website and we have full control over it. And then other people are saying, yeah, absolutely, it's, it's gonna be it. We've seen it happen in, in China, lots of the, like, there's, there's on WhatsApp and all these, what's, what's the Chinese one that's everybody uses? Not

• 39:23Wes Bos?

  WhatsApp, it's WeChat. WeChat has this whole idea of, of like apps in WeChat. They've had it for, for many, many years. So it's, it certainly is something that is happening. But like, do you really think that this chat UI with embedded little widgets is, is this is the end game?

• 39:40Speaker 01

  You know, I hear people talk about Facebook apps. You remember that?

• 39:45Wes Bos?

  Yeah, they made some money on Facebook apps back in the day. Yeah.

• 39:50Speaker 01

  So like we we've been here before, like, you know, um, I I think that this is different. Chat is not necessarily always the better experience, like text is not always the better experience. So like if I say, hey, I'm I'm making chicken, I need a timer. I don't want it to say, okay, I set a timer for thirty minutes. Just go ahead and ask me anytime you want to know how much time you got left. You know, like, that's not a great experience, right? I want to have like a UI that shows the countdown and and maybe a pause and a start again button and stuff. So like, we do still need UI. Sometimes we don't, and it's actually really fun to build an app. I I've got an app that I built that is only accessible through MCP. And it's a journaling app.

• 40:33Speaker 01

  And so like, I just say, here was my day, add that to my journal. And and it was great. It it works super, super well. But lots of times you do want to have a UI. So I think having a marriage between these two things is a good thing. Is a chat or like an agent like experience the end app? I mean, who knows what comes after, but like, is that where we're actually going? I actually think yes, because the experience is so much better. And we've we've been trying this, like I said, for the last couple of years. Everybody's adding chatbots to their apps because it's really nice. I don't know if anybody listening has used Shopify Sidekick. But that thing is sick. Really, really cool. You can control the app just using natural language. People love it. It's awesome.

• 41:18Speaker 01

  The problem with Sidekick and things like it is that it only has context of the app. But like, not the other things. So like, I've also got Kit where I'm sending email marketing things and I want those two things to integrate. Maybe Shopify and Kit can get together and build an actual integration. Or I can just have an agent that does that integration for me automatically. And so like, I want to spend time over there in the agent that understands not just what I'm doing in this app, but also what I'm doing in these others and and has memory about my preferences from the past. And then it can manage those integrations. But again, text isn't the the end all be all there either. And so bringing in some UI when appropriate to that conversation makes a lot of sense.

• 42:01Speaker 01

  So I do think that this is where we're going because the UX potential is just so much better.

• 42:06Scott Tolinski?

  Yeah. Yeah, we were just talking about this with Home Assistant. Like, I had a natural language to modify my Home Assistant. And before, I was editing YAML files on my phone for my phone's keyboard. It's like, oh, this is so much better. Oh, so yeah, I feel that, totally.

• 42:21Wes Bos?

  Home Assistant has an incredibly powerful UI where you can do literally anything. And everybody hates it because it's, it's hard. It's hard to use. And that's not a, that's not a knock against like the UI developers. It's just a very complex piece of software. And, and clicking buttons is maybe not the best way to interface with it. You know, it's a powerful piece of software and maybe the better way to interface with it is via, via text, right? Via natural language.

• 42:52Scott Tolinski?

  Yeah.

• 42:52Speaker 01

  Yeah, absolutely. And I actually, since you brought up Home Assistant, I have to say, uh, thank you for singing the praises of CloudFlare Tunnels, um, recently. Because, um, I, uh, that Media RSS app is running on my NAS. I've got a Synology and that's where all my audiobooks and stuff are. And, uh, not exposing ports is great. Um, so.

• 43:12Scott Tolinski?

  Oh, yeah.

• 43:13Speaker 01

  Yeah. Yeah, yeah. I, I've got a, an MCP server running in my closet, connected to ChatGPT through a CloudFlare Tunnel. It's awesome.

• 43:21Wes Bos?

  Oh, that's amazing.

• 43:22Scott Tolinski?

  I love it, yeah.

• 43:22Wes Bos?

  CloudFlare Tunnels are awesome.

• 43:24Scott Tolinski?

  Yeah.

• 43:25Wes Bos?

  One other thing unrelated to MCP I wanted to ask about is, is Remix 3, right? Like, I was at the announcement and I know you obviously used to work on Remix and it's a pretty exciting, um, space. What are your thoughts on Remix 3, which they've done away with React and, and built this entirely new thing?

• 43:43Speaker 01

  Yeah, man, I am very excited about that. Um, especially their emphasis on making it really good with LLMs. Um, it, like, I don't think I'm alone in saying that the game actually has changed now, um, with agents being able to write our code. That Media RSS app, I have looked at maybe 2% of that code. Um, I literally, I have the, the, I, I kind of. Was very hands-on with the planning and everything early on. And then, once I got it to a good state, then I could just send like a Cursor Cloud Agent to go build a feature. And then I would have Cursor Bug Bot review it and Code Rabbit as well. And then just like iterate, iterate, okay, now Cursor says it's good, let's merge it.

• 44:28Speaker 01

  So like having a framework that is like really specifically tuned to be really easy to work with agents works really well. And one thing specifically that makes Remix really good with that is that closure that appears in the component right above where your JSX is. So for those who aren't familiar, Remix component is very similar to React component, except that instead of returning JSX, you return a function that returns JSX. And that function is the thing that is called anytime an update needs to happen. And so the upper closure above that function, you can do whatever you want to in it, like fetch some data or you know, connect to Bluetooth or whatever you need to do.

• 45:09Wes Bos?

  Have variables that don't go away.

• 45:11Speaker 01

  Yeah. Yeah, yeah, exactly. And that's how state is managed, is just you make a variable and then you reassign it and say, go update and boom. It's a really simple model. And I think because of that model, I just have an Agents MD that has maybe 200 lines of like, here's how Remix is different from React and like here's the different ways. This is how context works. This is how you get a reference to the DOM, now different stuff like that. And yeah, it's just like killed it. It's done so well with Remix. So very thrilled about that. It's funny, for a while, I had the biggest Remix app in the world. That was my website. And then with Remix V1, I think I now again have the biggest Remix app in the world

• 45:55Speaker 01

  because it's not actually released yet. And it's like a 20,000 line of code app. It's not like a small one pager thing. They don't even have a client-side router yet. So like, we're pretty early, but it's been awesome.

• 46:10Wes Bos?

  That's great. I'm, I'm pretty excited about that. And I, when we were trying to predict what it was in the like year leading up to the announcement that some of our predictions were way off, which it was like, one of them was like, it's going to be a Shopify theming system.

• 46:25Speaker 01

  Yeah.

• 46:26Wes Bos?

  You know, but one of them was that there it's going to be a clear, concise, explicit API that leans on web standards. That AI will be very good at writing. And I'm glad to hear that. That's, that's actually the case.

• 46:38Speaker 01

  Yeah, you know, they, they have a much bigger ambition as well. I was talking on X with Michael about this and like, they're going to build an ORM. Like they're, they're going like full everything. They're building a component library, which would be super nice. So like a, a shad CN that's built by the framework authors.

• 46:56Wes Bos?

  Yeah, I, that's, that's what they should all do. Right? Yeah. Yeah, I agree.

• 47:01Speaker 01

  So I'm very excited about the like, the scope of what they've taken on, and they've just proven over the last decade that they can deliver. So I'm just looking forward to, I think they said March was their plan for, and I don't think that's secret. I hope it's not secret, but, but yeah, I think they were planning on releasing something in March.

• 47:19Wes Bos?

  Sick. Wicked. Wow. Let's get into sick picks and shameless plugs. Finally, I guess we don't have to explain what a sick pick is. Did you come prepared with one? I know we caught you a little last minute here.

• 47:33Speaker 01

  Yeah, shoot. You know, like I, for the last several years, I always thought, what would I, what would I pick as my sick pick? And now like, I, I had, I actually didn't think about it. So I'm gonna, I'm gonna go ahead and pick a one wheel. If, if y'all haven't tried a one wheel before, yeah, like they're dangerous, all of that. You know, live in life. You, you gotta live. Yeah. And so hop on a one wheel sometime. Those things are a blast. My shameless plug is going to be epicweb.dev and epicreact.dev and epicai.pro. I am actively developing stuff on those platforms and it is really the best way to learn

• 48:11Speaker 01

  React and full stack web development and AI with MCP specifically that I am aware of. So go take, take a look at those. It's a pretty unique take it. Retention focused learning. So that's my shameless plug.

• 48:26Scott Tolinski?

  Yeah, you've been doing it for a long time, Kent. So you got the skills right there. So

• 48:31Speaker 01

  Thank you.

• 48:32Scott Tolinski?

  Yeah, a lot of positive reviews on all fronts. So thanks so much. It was really great to connect with you in Seattle this year and talk about MZP. So I'm glad we got to make this happen.

• 48:43Wes Bos?

  All right. Well, thank you so much and we will catch you later.

• 48:47Speaker 01

  Thank y'all. Bye.

• 48:48Wes Bos?

  Peace.