WEBVTT 00:00:00.000 --> 00:00:04.880 There's a huge paradigm shift happening across the industry because of AI. 00:00:04.960 --> 00:00:10.160 More and more users are using chatbots nowadays for their routine searches or research, 00:00:10.160 --> 00:00:29.590 and that's why the concept of MCP apps is getting more and more popular. Instead of spitting out a JSON file or a markdown document, more apps and services are switching to providing these interactive and helpful widgets inside a chatbot. And the company Alpic recently released a cool new framework called SkyBridge 00:00:29.590 --> 00:00:43.895 that makes it super easy to create your own custom MCP apps for all sorts of different use cases. So in today's video, we'll take a look at SkyBridge, see how it works, and try it out for ourselves. It's gonna be a lot of fun, so let's dive into it. 00:00:47.735 --> 00:01:08.450 To really understand why SkyBridge is such a big deal, you have to understand how these new apps work. When you build a traditional web app, you are building it for one user, the human. But with an MCP app, you're actually building for two users at once, the human and the AI assistant because they both share the exact same interface. 00:01:08.935 --> 00:01:39.675 The human can click buttons, type inputs, and slide sliders, and the LLM instantly sees that state. And conversely, the LLM can update the data in the background and the UI changes in real time right in front of you. And SkyBridge is an open source TypeScript framework for that that handles all the complex plumbing, the protocol bridging, the state sync, and the security rules, so you can just focus on writing standard React code. Now if you've ever tried to build MCP apps for chat GPT or Claude before, 00:01:39.915 --> 00:01:47.755 you know that the local testing loop used to be a massive headache. You had to manually set up public tunnels, copy paste configurations 00:01:47.755 --> 00:01:52.180 and restart your chat sessions just to fix a tiny CSS typo. 00:01:52.500 --> 00:01:57.620 But the coolest part of SkyBridge one point zero is that it completely redesigned 00:01:57.620 --> 00:02:08.425 the dev tools control panel. Now when you run your local dev server, it fires up an emulator dashboard in your browser. And inside this dashboard, you have three nice tools. 00:02:08.745 --> 00:02:11.305 The first one is the Alpic playground, 00:02:11.385 --> 00:02:30.050 a local sandbox where you can test your tools and and tweak your React widgets using live hot module replacement. And you can see the changes instantly without touching an actual LLM yet. And secondly, there's an integrated tunnel which allows you with literally a single click to expose your local server through a secure public URL. 00:02:30.455 --> 00:02:35.895 So you don't have to mess around with external tunneling anymore. Just paste this URL into ChatGPT's 00:02:35.895 --> 00:02:52.050 developer settings and you're live. And third is the beacon audit tool. And this is a lifesaver if you plan to submit your apps to public stores. It scans your apps metadata tools and security policies to catch common rejection triggers before you submit your app for review. 00:02:52.290 --> 00:03:02.745 And the coolest thing is that even if you've never built an MCP app, you can easily install the SkyBridge skill onto your favorite AI agent to get started instantly. 00:03:02.905 --> 00:03:07.305 So now let's try to build a small MCP app on our own and see how it works. 00:03:07.625 --> 00:03:11.625 So for this demo, I've went ahead and created this little ecommerce website 00:03:11.890 --> 00:03:14.530 where you can shop for different camera lenses, 00:03:14.530 --> 00:03:19.970 and it's basically a fully built React based store with a cart and checkout functionality. 00:03:20.050 --> 00:03:27.250 And now I want to add an MCP app for it so that if a potential customer uses a chatbot like ChatGPT 00:03:27.250 --> 00:03:30.855 or Claude to search for camera lens recommendations, 00:03:30.855 --> 00:03:36.855 it will immediately call our MCP app to show our product listings for the end user. 00:03:37.015 --> 00:03:46.730 So as I said before, the easiest way to get started is just to install the SkyBridge skill and we can install it globally or just for our specific repo. 00:03:47.130 --> 00:03:51.530 And for this demo purpose, I'm going to go ahead and install it in the repo. 00:03:51.610 --> 00:03:57.050 And now you can see we have this dot agents directory with the SkyBridge skill present. 00:03:57.775 --> 00:04:04.015 And all I have to do now is just ask Claude to build me an MCP app for my ecommerce shop. 00:04:04.575 --> 00:04:28.005 And before building it, Claude will first ask me some follow-up questions about the intent of the app to better understand what kind of functionality we need to include in it. And for this demo, I want to have an app that lists lenses based on what the user is looking for, and then we can select them and compare them side by side and also add them to our cart and provide a quick checkout solution for our customers. 00:04:28.165 --> 00:04:32.325 And that's basically all I need to do and now I just let Claude do its thing. 00:04:32.725 --> 00:04:42.310 And in about a few minutes, see that Claude has generated our MCP app. And the coolest part is that now we can open the developer dashboard provided by SkyBridge 00:04:42.310 --> 00:04:43.990 and try it out for ourselves. 00:04:44.470 --> 00:04:53.155 So now if we open the dashboard, we can see how it looks. And here we have our search lenses tool and the place order tool. 00:04:53.395 --> 00:04:57.315 So first of all, for search lenses, I'm just gonna insert 00:04:57.475 --> 00:05:02.995 the max price for the lenses I'm looking for and let's limit it to five lenses maybe. 00:05:03.795 --> 00:05:05.475 And there you go. It found 00:05:06.040 --> 00:05:08.200 14 matches that are under 00:05:08.440 --> 00:05:09.880 $2,000. 00:05:10.280 --> 00:05:14.760 Here's how the app looks on desktop. We can also preview the mobile view. 00:05:15.000 --> 00:05:18.440 Looks good. We also have a dark mode and a light mode. 00:05:19.225 --> 00:05:23.145 And here we have the tool output and the state. 00:05:23.225 --> 00:05:26.265 And watch what happens if I select some of the lenses. 00:05:26.585 --> 00:05:34.080 As you can see, the state updates on the fly, which is super cool. So now let's let's choose three lenses. 00:05:34.960 --> 00:05:37.440 And now if we click compare, 00:05:38.000 --> 00:05:41.920 we now get to the compare screen and here we can see 00:05:42.400 --> 00:05:45.600 all our three lenses side by side with all the parameters. 00:05:46.055 --> 00:05:49.655 And if we're happy with this selection, we can also go to the checkout. 00:05:50.215 --> 00:05:52.695 And this moves to the checkout stage 00:05:53.015 --> 00:05:54.055 where we can 00:05:55.255 --> 00:06:04.840 put in our full name, email, and shipping address and place our order. So as you can see, this dashboard is really cool for testing out your widgets 00:06:05.240 --> 00:06:08.520 to see if everything is working as expected. 00:06:09.000 --> 00:06:11.000 And now if we go to Claude 00:06:12.315 --> 00:06:16.235 and in settings, we have this section called connectors, 00:06:17.115 --> 00:06:18.955 and we have to click customize. 00:06:19.435 --> 00:06:26.820 And for this, you will need the tunnel URL, so make sure you have activated the tunnel. And we can just copy this URL. 00:06:27.060 --> 00:06:28.900 And in the connector section, 00:06:29.140 --> 00:06:31.460 you just have to add a custom connector, 00:06:31.860 --> 00:06:32.900 give a name, 00:06:34.100 --> 00:06:35.700 and paste in that 00:06:37.060 --> 00:06:38.260 tunnel URL 00:06:38.415 --> 00:06:41.375 and just click add. I've already added it here. 00:06:41.855 --> 00:06:44.975 And last thing you need to do is click connect, 00:06:45.375 --> 00:06:49.935 and you can also set the permissions if you want these tools to run automatically 00:06:49.935 --> 00:06:53.050 or you want an approval from the user. 00:06:53.690 --> 00:06:57.130 And then we can just go ahead and start a new chat. 00:06:57.530 --> 00:07:03.450 And in the new chat, I can now ask, give me some recommendations for the best lenses under $2,000 00:07:03.450 --> 00:07:04.650 for portrait shooting. 00:07:05.425 --> 00:07:12.945 And we can now see that it says it will search the lens shop catalog for some great portrait options under $2,000. 00:07:13.265 --> 00:07:20.385 And look at that. It it opened our MCP app. How cool is that? And we can do the same things over here. 00:07:20.990 --> 00:07:24.350 We can select some of the lenses over here 00:07:24.590 --> 00:07:27.630 and then go to the compare section 00:07:28.110 --> 00:07:29.710 and it has this little 00:07:30.990 --> 00:07:32.350 comparison table. 00:07:32.350 --> 00:07:35.230 The only thing I noticed is that we have this 00:07:35.685 --> 00:07:36.965 white space 00:07:37.445 --> 00:07:43.605 from the previous state of our tool. So this is probably something you can fix in CSS. 00:07:44.245 --> 00:07:46.405 But everything is looking great 00:07:46.565 --> 00:07:48.885 and we also have the option to checkout 00:07:49.890 --> 00:07:54.290 and we get to the checkout section where we can place our order. 00:07:54.690 --> 00:07:56.850 So how cool is this? 00:07:57.250 --> 00:07:59.010 And lastly and most importantly, 00:07:59.010 --> 00:08:16.485 to see if your app is ready to be published to the public app stores, we can also run an audit of our app through the developer dashboard and check if we have any issues with it. And, basically, that's it. In just a few minutes, we were able to build a production ready MCP app with SkyBridge 00:08:16.725 --> 00:08:20.005 that we could theoretically submit to the AI app store. 00:08:20.630 --> 00:08:25.350 So I hope this shows you how easy it is to get up and running with SkyBridge, 00:08:25.350 --> 00:08:42.925 and, honestly, it feels like the future of the modern web. I think we will start seeing more and more of these interactive MCP widget apps inside our chatbots. So 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:43.165 --> 00:08:52.000 So there you have it folks. That is SkyBridge in a nutshell. So what do you think about SkyBridge? Have you tried it? Will you use it? Let us know in the comment section down below. 00:08:52.320 --> 00:08:58.480 And folks, if you like these types of technical breakdowns, please let me know by smashing that like button underneath the video, 00:08:58.800 --> 00:09:05.645 and also don't forget to subscribe to our channel. This has been Andres from BetterStack and I will see you in the next videos.