MCP Apps Are Changing the Internet. Here’s How to Build One! (Skybridge)

The Rise of MCP Apps in the Age of AI

Introduction to MCP Apps

• A significant shift is occurring in the industry due to AI, with users increasingly relying on chatbots for searches and research.

• This trend has led to a growing popularity of Multi-Channel Platform (MCP) apps, which provide interactive widgets within chatbots instead of traditional outputs like JSON files.

Overview of Skybridge Framework

• Alpic has introduced a new framework called Skybridge, designed to simplify the creation of custom MCP apps for various use cases.

• The video aims to explore how Skybridge works and demonstrate its functionalities through practical application.

Understanding MCP App Development

Dual User Interface Concept

• Unlike traditional web apps built solely for human users, MCP apps cater to both humans and AI assistants sharing the same interface.

• Both users can interact simultaneously; as humans input data, the Large Language Model (LLM) updates information in real-time.

Technical Features of Skybridge

• Skybridge is an open-source TypeScript framework that manages complex tasks such as protocol bridging and state synchronization.

• Developers can focus on writing standard React code without worrying about underlying complexities.

Enhanced Developer Experience with Skybridge 1.0

New Development Tools

• Previous challenges in local testing loops for MCP apps have been addressed by redesigning the dev tools control panel in Skybridge 1.0.

• The emulator dashboard provides three key tools:

• Alpic Playground: A sandbox for testing tools with live hot module replacement.

• Integrated Tunnel: Allows easy exposure of local servers via secure public URLs with one click.

• Beacon Audit Tool: Scans app metadata and security policies before submission to catch potential rejection triggers.

Building an E-commerce MCP App

Demo Setup

• A demo e-commerce website featuring camera lenses is created as a base for integrating an MCP app using Skybridge.

• Installation of the Skybridge skill into the specific repository allows interaction between Claude (the chatbot assistant) and the e-commerce platform.

Functionality Requirements

• The desired functionality includes listing lenses based on user queries, comparing options side-by-side, adding items to a cart, and facilitating quick checkouts.

Testing and Interacting with the MCP App

Dashboard Interaction

• Users can test their search tool by setting parameters like maximum price; results are displayed instantly reflecting real-time updates.

• Comparison features allow users to view selected lenses side-by-side before proceeding to checkout.

Finalizing Integration with Chatbot

Connector Setup

• To connect Claude with the newly created app, developers must add a custom connector using a tunnel URL from their dashboard settings.

User Interaction Simulation

Users can initiate conversations asking for lens recommendations; Claude retrieves data from the catalog seamlessly integrating with the MCP app's functionalities.

Conclusion on Ease of Use

• In just minutes, developers can create production-ready MCP apps suitable for submission to AI app stores using Skybridge’s streamlined process.