MCP Apps Are Changing the Internet. Here’s How to Build One! (Skybridge)
BBetter Stack
Computing/SoftwareSmall Business/StartupsInternet Technology
Transcript
00:00:00There's a huge paradigm shift happening across the industry because of AI.
00:00:04More and more users are using chatbots nowadays for their routine searches or research,
00:00:10and that's why the concept of MCP apps is getting more and more popular.
00:00:14Instead of spitting out a JSON file or a markdown document,
00:00:18more apps and services are switching to providing these interactive and helpful widgets inside a chatbot.
00:00:24And the company Alpic recently released a cool new framework called SkyBridge
00:00:29that makes it super easy to create your own custom MCP apps for all sorts of different use cases.
00:00:35So in today's video, we'll take a look at SkyBridge, see how it works, and try it out for ourselves.
00:00:41It's going to be a lot of fun, so let's dive into it.
00:00:47To really understand why SkyBridge is such a big deal, you have to understand how these new apps work.
00:00:53When you build a traditional web app, you are building it for one user, the human.
00:00:58But with an MCP app, you're actually building for two users at once, the human and the AI assistant,
00:01:05because they both share the exact same interface.
00:01:08The human can click buttons, type inputs, and slide sliders, and the LLM instantly sees that state.
00:01:15And conversely, the LLM can update the data in the background,
00:01:18and the UI changes in real time right in front of you.
00:01:21And SkyBridge is an open source TypeScript framework for that that handles all the complex plumbing,
00:01:26the protocol bridging, the state sync, and the security rules,
00:01:30so you can just focus on writing standard React code.
00:01:34Now, if you've ever tried to build MCP apps for ChatGPT or Claude before,
00:01:39you know that the local testing loop used to be a massive headache.
00:01:43You had to manually set up public tunnels, copy-paste configurations,
00:01:47and restart your chat sessions just to fix a tiny CSS typo.
00:01:52But the coolest part of SkyBridge 1.0 is that it completely redesigned the DevTools control panel.
00:01:59Now, when you run your local dev server, it fires up an emulator dashboard in your browser.
00:02:04And inside this dashboard, you have three nice tools.
00:02:08The first one is the Alpik Playground,
00:02:11a local sandbox where you can test your tools and tweak your React widgets using live hot module replacement.
00:02:17And you can see the changes instantly without touching an actual LLM yet.
00:02:21And secondly, there's an integrated tunnel,
00:02:24which allows you with literally a single click to expose your local server through a secure public URL.
00:02:30So you don't have to mess around with external tunneling anymore.
00:02:33Just paste this URL into ChatGPT's developer settings and you're live.
00:02:37And third is the Beacon Audit tool.
00:02:40And this is a lifesaver if you plan to submit your apps to public stores.
00:02:44It scans your app's metadata, tools, and security policies to catch common rejection triggers
00:02:49before you submit your app for review.
00:02:52And the coolest thing is that even if you've never built an MCP app,
00:02:56you can easily install the SkyBridge skill onto your favorite AI agent to get started instantly.
00:03:02So now let's try to build a small MCP app on our own and see how it works.
00:03:07So for this demo, I've went ahead and created this little e-commerce website
00:03:11where you can shop for different camera lenses.
00:03:14And it's basically a fully built React-based store with a cart and checkout functionality.
00:03:19And now I want to add an MCP app for it.
00:03:22So that if a potential customer uses a chatbot like ChatGPT or Claude to search for camera lens recommendations,
00:03:30it will immediately call our MCP app to show our product listings for the end user.
00:03:36So as I said before, the easiest way to get started is just to install the SkyBridge skill.
00:03:42And we can install it globally or just for our specific repo.
00:03:46And for this demo purpose, I'm going to go ahead and install it in the repo.
00:03:51And now you can see we have this .agents directory with the SkyBridge skill present.
00:03:57And all I have to do now is just ask Claude to build me an MCP app for my e-commerce shop.
00:04:04And before building it, Claude will first ask me some follow-up questions about the intent of the app
00:04:09to better understand what kind of functionality we need to include in it.
00:04:13And for this demo, I want to have an app that lists lenses based on what the user is looking for.
00:04:18And then we can select them and compare them side by side and also add them to our cart
00:04:24and provide a quick checkout solution for our customers.
00:04:28And that's basically all I need to do.
00:04:29And now I just let Claude do its thing.
00:04:32And in about a few minutes, we see that Claude has generated our MCP app.
00:04:37And the coolest part is that now we can open the developer dashboard provided by SkyBridge
00:04:41and try it out for ourselves.
00:04:44So now if we open the dashboard, we can see how it looks.
00:04:47And here we have our search lenses tool and the place order tool.
00:04:53So first of all, for search lenses, I'm just going to insert the max price for the lenses I'm looking for.
00:05:00And let's limit it to five lenses maybe.
00:05:03And there you go.
00:05:04It found 14 matches that are under $2,000.
00:05:09Here's how the app looks on desktop.
00:05:12We can also preview the mobile view.
00:05:14Looks good.
00:05:15We also have a dark mode and a light mode.
00:05:18And here we have the tool output and the state.
00:05:23And watch what happens if I select some of the lenses.
00:05:26As you can see, the state updates on the fly, which is super cool.
00:05:31So now let's choose three lenses.
00:05:34And now if we click compare, we now get to the compare screen.
00:05:40And here we can see all our three lenses side by side with all the parameters.
00:05:45And if we're happy with this selection, we can also go to the checkout.
00:05:49And this moves to the checkout stage where we can put in our full name, email, and shipping address and place our order.
00:05:59So as you can see, this dashboard is really cool for testing out your widgets to see if everything is working as expected.
00:06:08And now if we go to cloud, and in settings, we have this section called connectors.
00:06:16And we have to click customize.
00:06:19And for this, you will need the tunnel URL.
00:06:21So make sure you have activated the tunnel.
00:06:24And we can just copy this URL.
00:06:26And in the connectors section, you just have to add a custom connector.
00:06:31Give a name.
00:06:33And paste in that tunnel URL.
00:06:38And just click add.
00:06:39I've already added it here.
00:06:41And last thing you need to do is click connect.
00:06:45And you can also set the permissions if you want these tools to run automatically or you want an approval from the user.
00:06:53And then we can just go ahead and start a new chat.
00:06:57And in the new chat, I can now ask, give me some recommendations for the best lenses under $2,000 for portrait shooting.
00:07:05And we can now see that it says it will search the lens shop catalog for some great portrait options under $2,000.
00:07:12And look at that.
00:07:14It opened our MCP app.
00:07:16How cool is that?
00:07:18And we can do the same things over here.
00:07:20We can select some of the lenses over here.
00:07:24And then go to the compare section.
00:07:27And it has this little comparison table.
00:07:32The only thing I noticed is that we have this white space from the previous state of our tool.
00:07:40So this is probably something you can fix in CSS.
00:07:43But everything is looking great.
00:07:46And we also have the option to check out.
00:07:49And we get to the checkout section where we can place our order.
00:07:54So how cool is this?
00:07:57And lastly, and most importantly, to see if your app is ready to be published to the public app stores,
00:08:02we can also run an audit of our app through the developer dashboard and check if we have any issues with it.
00:08:10And basically, that's it.
00:08:11In just a few minutes, we were able to build a production-ready MCP app with SkyBridge.
00:08:16That we could theoretically submit to the AI App Store.
00:08:20So I hope this shows you how easy it is to get up and running with SkyBridge.
00:08:25And honestly, it feels like the future of the modern web.
00:08:28I think we will start seeing more and more of these interactive MCP widget apps inside our chatbots.
00:08:34So it's nice that there are frameworks like SkyBridge out there that are making the process of creating these kinds of apps so much easier for us developers.
00:08:42So there you have it, folks.
00:08:44That is SkyBridge in a nutshell.
00:08:46So what do you think about SkyBridge?
00:08:47Have you tried it?
00:08:48Will you use it?
00:08:49Let us know in the comments section down below.
00:08:52And folks, if you like these types of technical breakdowns, please let me know by smashing that like button underneath the video.
00:08:58And also, don't forget to subscribe to our channel.
00:09:01This has been Andrus from BetterStack, and I will see you in the next videos.
00:09:16you