The argument in one line.
SkyBridge makes it possible to build interactive React widgets that live natively inside AI chatbots, turning any web app into an MCP app without rebuilding your stack.
Read if. Skip if.
READ IF YOU ARE…
- Developers who want to ship interactive UI inside ChatGPT or Claude instead of plain-text responses
- Founders and indie builders exploring MCP as a new distribution channel for their product
- React developers curious how to wire a frontend into AI chatbot ecosystems with minimal boilerplate
- Anyone following the MCP ecosystem who wants a concrete end-to-end build demo rather than theory
SKIP IF…
- Non-technical readers — this is a live coding walkthrough that assumes TypeScript and React familiarity
- Teams whose users aren't on Claude or ChatGPT and have no near-term plans to be
The full version, fast.
AI chatbots are displacing traditional web browsing, and MCP apps are the format built for that shift — interactive React widgets that live directly inside ChatGPT and Claude rather than sending users to an external site. SkyBridge, an open-source TypeScript framework by Alpic, handles the protocol bridging, state sync, and security layer so builders write standard React and get a dual-user interface where both the human and the AI share real-time state. The dev workflow includes a local emulator dashboard, one-click secure tunneling, and hot module replacement — eliminating the manual tunnel-and-restart loop that made MCP development painful. Building an MCP app is now roughly as fast as building a standard React component.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 00:44
01 · Hook + intro
Trend statement — MCP apps are replacing JSON outputs in chatbots — then names SkyBridge as the tool of the day.
00:44 – 02:50
02 · How MCP apps work
Core concept: traditional apps serve one user; MCP apps serve two simultaneously (human + AI). SkyBridge handles the protocol bridge, state sync, and security so you write standard React.
02:50 – 03:02
03 · Old dev loop problem
Before SkyBridge 1.0, local testing required manual tunnels, copy-paste configs, and chat restarts — painful for fast iteration.
03:02 – 03:03
04 · SkyBridge dev dashboard
Three-tool dashboard: Alpic Playground (hot reload, no live LLM), integrated tunnel (one-click public URL), Beacon audit (pre-submission check).
03:03 – 04:22
05 · Demo setup
Installs SkyBridge skill into Claude Code agent for a pre-built camera lens e-commerce React store, then describes desired MCP app (search, compare, cart, checkout).
04:22 – 06:10
06 · Claude builds the MCP app
Claude Code generates the MCP app. Developer opens the SkyBridge dashboard and demos: price-filtered lens search (14 results under $2,000), mobile/dark mode preview, live state updates on selection.
06:10 – 07:00
07 · Compare + checkout flow
Selects three lenses, hits compare — side-by-side spec table renders. Proceeds to checkout with name/email/address form. Dashboard validates the full funnel.
07:00 – 07:56
08 · Connecting to live Claude
Activates the integrated tunnel, copies URL, adds custom connector in Claude settings with one click. Sets tool permissions (auto vs. approval).
07:56 – 08:20
09 · Live test inside Claude
Asks Claude for portrait lens recommendations under $2,000 — MCP app opens inline in the chat. Select, compare, checkout all work live in the chatbot UI.
08:20 – 08:55
10 · Beacon audit + publish path
Runs Beacon audit through the dev dashboard to check for app store rejection triggers. Notes the app is theoretically ready to submit to ChatGPT or Claude app stores.
08:55 – 09:20
11 · Wrap + CTA
Outlook statement: MCP widget apps are the future of the web. Subscribe CTA, credits.
Lines worth screenshotting.
- MCP apps serve two users simultaneously — the human clicking buttons and the AI reading state — which is a fundamentally different design problem than a standard web app.
- SkyBridge handles protocol bridging, state sync, and security rules so the developer writes standard React code and nothing else.
- The old MCP development loop required manual tunnel setup, config copy-pasting, and chat session restarts just to fix a CSS typo — SkyBridge eliminated all three steps.
- A single-click tunnel in SkyBridge replaces the entire external tunneling workflow that used to be the biggest friction point in MCP app development.
- The Beacon audit tool scans for common app store rejection triggers before submission — which means your app gets rejected in your local terminal, not in public.
- When an LLM updates data in the background, the UI changes in real time in front of the user — the chatbot and the human share the same live interface.
- Installing a SkyBridge skill onto an AI agent is now the fastest path from zero to a working MCP app without writing a single line of scaffolding code.
- Every website that wants to be findable inside AI chatbots is eventually going to need an MCP app — the transition from traditional SEO to chatbot presence is structural, not optional.
- The shift from 'users go to websites' to 'users stay in chatbots and websites come to them' is the same disruption the app store created for mobile, running a decade faster.
- An MCP app that shows interactive product listings inside ChatGPT converts differently than a link — the user never leaves the conversation to make a decision.
MCP apps are the new distribution channel.
Builder playbook
The chatbot is now a storefront — and SkyBridge is how you put your app inside it.
- Build for two users: design your React component so both the human and the LLM can read and update the same state.
- Ship an MCP skill, not just an API — the SkyBridge skill pattern means Claude Code can scaffold your app from a plain-English brief.
- Use the Alpic Playground to iterate fast without burning API calls — hot reload against a local emulator, connect to the real LLM only when you're ready.
- The integrated tunnel kills the ngrok/copy-paste workflow — one click and you're live in ChatGPT or Claude settings.
- Run Beacon before submitting — catch policy rejections locally, not after a two-week review queue.
- The AI app stores (ChatGPT plugins, Claude connectors) are early — shipping now means occupying a slot before the space gets crowded.
Terms worth knowing.
- MCP app
- An interactive web widget built to run inside AI chatbots like ChatGPT or Claude — serving both the human user (who clicks buttons and sliders) and the AI (which reads and updates the same state in real time), blurring the line between a traditional website and an AI tool response.
- SkyBridge (Alpic)
- An open-source TypeScript framework by Alpic that handles the protocol bridging, state synchronization, and security rules needed to build MCP apps — allowing developers to write standard React code without hand-rolling the AI-to-UI plumbing.
- Protocol bridging
- The layer of code that translates between an AI model's data format (e.g., MCP tool calls and JSON responses) and a user-facing UI framework (e.g., React), so both the human interface and the AI interface operate on the same shared state.
- Hot module replacement (HMR)
- A development feature that instantly updates only the changed part of a running web app in the browser without a full page reload — used here in SkyBridge's playground to let developers tweak React widgets and see changes immediately while testing.
- Secure tunnel (dev tool)
- A service that exposes a locally running web server to the public internet via a temporary URL — used here so developers can connect their local MCP app to ChatGPT or Claude's developer settings without deploying to a production server.
- Beacon audit tool
- A pre-submission checker in SkyBridge that scans an MCP app's metadata, tools, and security policies to identify issues that would cause rejection before the developer submits the app to a public marketplace.
- State sync (AI + UI)
- The real-time synchronization of data between an AI model's internal view of an app and the user-facing interface, so that when the AI updates data in the background, the UI changes instantly for the human — and vice versa.
- Alpic
- The company behind SkyBridge, building tooling and infrastructure for the emerging MCP app ecosystem — enabling developers to publish interactive widgets that run natively inside major AI chatbot interfaces.
Things they pointed at.
Lines you could clip.
00:47
“You're actually building for two users at once — the human and the AI assistant, because they both share the exact same interface.”
02:19
“You had to manually set up public tunnels, copy-paste configurations, and restart your chat sessions just to fix a tiny CSS typo.”
08:16
“In just a few minutes, we were able to build a production-ready MCP app with SkyBridge that we could theoretically submit to the AI app store.”
08:50
“It feels like the future of the modern web.”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
00:00There's a huge paradigm shift happening across the industry because of AI. More and more users are using chatbots nowadays for their routine searches or research, and that's why the concept of MCP apps is getting more and more popular.
00:14Instead 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 that makes it super easy to create your own custom MCP apps for all sorts of different use cases.
00:35So 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:47To 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.
01:08The 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 , so you can just focus on writing standard React code.
01:34Now if you've ever tried to build MCP apps for chat GPT or Claude before, you know that the local testing loop used to be a massive headache. You had to manually set up public tunnels, copy paste configurations and restart your chat sessions just to fix a tiny CSS typo.
01:52But the coolest part of SkyBridge one point zero is that it completely redesigned the dev tools control panel. Now when you run your local dev server, it fires up an emulator dashboard in your browser.
02:05And inside this dashboard, you have three nice tools. The first one is the Alpic playground, a local sandbox where you can test your tools and and tweak your React widgets using live hot module replacement.
02:17And 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. So you don't have to mess around with external tunneling anymore.
02:33Just paste this URL into ChatGPT's developer settings and you're live. And third is the beacon audit tool.
02:40And 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. 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.
03:02So now let's try to build a small MCP app on our own and see how it works. So for this demo, I've went ahead and created this little ecommerce website where you can shop for different camera lenses, and it's basically a fully built React based store with a cart and checkout functionality.
03:20And now I want to add an MCP app for it so that if a potential customer uses a chatbot like ChatGPT or Claude to search for camera lens recommendations, it will immediately call our MCP app to show our product listings for the end user.
03:37So 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. And for this demo purpose, I'm going to go ahead and install it in the repo. And now you can see we have this dot agents directory with the SkyBridge skill present.
03:57And all I have to do now is just ask Claude to build me an MCP app for my ecommerce shop. 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.
04:28And that's basically all I need to do and now I just let Claude do its thing. 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 and try it out for ourselves.
04:44So 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. So first of all, for search lenses, I'm just gonna insert the max price for the lenses I'm looking for and let's limit it to five lenses maybe.
05:03And there you go. It found 14 matches that are under $2,000.
05:10Here's how the app looks on desktop. We can also preview the mobile view. Looks good.
05:15We also have a dark mode and a light mode. And here we have the tool output and the state. And watch what happens if I select some of the lenses.
05:26As you can see, the state updates on the fly, which is super cool. So now let's let's choose three lenses. And now if we click compare, we now get to the compare screen and here we can see all our three lenses side by side with all the parameters.
05:46And if we're happy with this selection, we can also go to the checkout. And this moves to the checkout stage where we can put in our full name, email, and shipping address and place our order.
05:59So as you can see, this dashboard is really cool for testing out your widgets to see if everything is working as expected. And now if we go to Claude and in settings, we have this section called connectors, and we have to click customize.
06:19And for this, you will need the tunnel URL, so make sure you have activated the tunnel. And we can just copy this URL. And in the connector section, you just have to add a custom connector, give a name, and paste in that tunnel URL and just click add.
06:39I've already added it here. And last thing you need to do is click connect, and you can also set the permissions if you want these tools to run automatically or you want an approval from the user.
06:53And then we can just go ahead and start a new chat. And in the new chat, I can now ask, give me some recommendations for the best lenses under $2,000 for portrait shooting.
07:05And we can now see that it says it will search the lens shop catalog for some great portrait options under $2,000. And look at that. It it opened our MCP app.
07:16How cool is that? And we can do the same things over here. We can select some of the lenses over here and then go to the compare section and it has this little comparison table.
07:32The only thing I noticed is that we have this white space from the previous state of our tool.
07:40So this is probably something you can fix in CSS. But everything is looking great and we also have the option to checkout and we get to the checkout section where we can place our order.
07:54So how cool is this? And lastly and most importantly, 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.
08:10And, basically, that's it. In just a few minutes, we were able to build a production ready MCP app with SkyBridge that we could theoretically submit to the AI app store.
08:20So I hope this shows you how easy it is to get up and running with SkyBridge, and, honestly, it feels like . I think we will start seeing more and more of these interactive MCP widget apps inside our chatbots.
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. So there you have it folks. That is SkyBridge in a nutshell.
08:46So what do you think about SkyBridge? Have you tried it? Will you use it?
08:49Let us know in the comment section down below. And folks, if you like these types of technical breakdowns, please let me know by smashing that like button underneath the video, and also don't forget to subscribe to our channel.
09:01This has been Andres from BetterStack and I will see you in the next videos.
The Hook
The bait, then the rug-pull.
The web has always had one user: you. But the chatbot era just added a second — the AI sitting between your app and the person asking questions. SkyBridge is the first framework to treat that seriously, letting your React components serve both users over the same live state.
Named ideas worth stealing.
00:47concept
Two-User Interface Model
Traditional apps build for one user (human). MCP apps build for two simultaneously — the human AND the AI — sharing identical live state. The LLM sees every click; every LLM update changes the UI in real time.
Steal forpitch deck hook explaining why MCP apps matter vs. standard APIs
03:17list
SkyBridge Dev Dashboard (3 tools)
- Alpic Playground — hot reload sandbox, no live LLM needed
- Integrated Tunnel — one-click public URL, replaces ngrok
- Beacon Audit — pre-submission rejection scanner
Three-panel local dev environment that removes the friction from the old test loop.
Steal fordev tool product positioning — showing your DX is better than the incumbent
03:42concept
Install Skill → Describe → Build
SkyBridge ships as an AI agent skill. Install into Claude Code, describe your app in plain English, Claude generates the MCP app. No boilerplate required.
Steal forany product that wants to show zero-to-working in under 5 minutes of setup
How they asked for the click.
VERBAL ASK
08:52subscribe
“If you like these types of technical breakdowns, please let me know by smashing that like button — and don't forget to subscribe to our channel.”
Soft, single request at end of video after the product case is closed. No separate pitch, no mid-roll.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
