Skybridge: A React Framework for Building Interactive MCP Apps Inside AI Chatbots
Skybridge is an open-source TypeScript framework from Alpic for building Model Context Protocol (MCP) apps. These are interactive React widgets that render directly inside AI chatbots like ChatGPT and Claude, replacing static text responses with live UIs that both the human user and the LLM can read and update.
How MCP apps work
An MCP app is shared between two users simultaneously: the human and the AI. The human interacts with the widget (clicking buttons, filling forms, adjusting filters). The LLM can read the widget's current state in real time and can update that state programmatically. Both see the same interface.
This shared visual context allows the LLM to act on what it sees rather than on text descriptions, and allows UI changes triggered by the LLM to surface immediately to the human user.
What Skybridge provides
Without a framework, building MCP apps requires manually handling protocol bridging, real-time state synchronization, security policies, and tunnel setup. The previous developer workflow for testing locally involved external tunnels (ngrok), manual URL pasting into chatbot settings on every restart, and full session restarts after small code changes.
Skybridge handles the infrastructure and replaces that workflow with an integrated local development environment.
Dev tools
Playground. A local sandbox with live HMR. Code changes reflect instantly in the widget preview without restarting the server.
Integrated tunnel. One-click public HTTPS URL for the local dev server. Paste it into chatbot settings once; no external tunnel service required.
Beacon Audit Tool. Scans the app's metadata, tool definitions, and security policies for compliance with platform guidelines (GPT Store, Claude connectors). Catches common rejection triggers before submission.
Building a LensShop MCP app
The following walkthrough builds an e-commerce MCP app for a camera lens shop. The app allows users to search, filter, compare, and check out lenses from within a chatbot.
Installing the Skybridge skill
From the project root:
The installer asks for scope (global or project). Selecting Project clones the skill into .agents/skills/skybridge, making its templates and instructions available to an AI assistant.
Prompting the AI to scaffold the app
With the skill installed, give the AI assistant a prompt describing the app:
The Skybridge skill prompts the AI to run a discovery phase before generating code. It asks for the target user and pain point, and for the 1–3 core actions to prioritize (in this case: search/filter lenses, compare 2–3 lenses, add to cart/checkout).
The AI then produces a SPEC.md outlining the planned tools, views, and architecture. After approval, it generates:
- A
mcp/directory with a TypeScript Skybridge project - Server-side tools (
search_lenses,place_order) that call the shop's existing API - React view files (
.tsx) for the lens list, comparison table, and checkout form, using Skybridge hooks (useViewState,useToolInfo) - A
Dockerfileto run both the existing shop and the MCP server in the same container
Testing in the emulator
With the server running, the emulator dashboard is available at http://localhost:54932.
The dashboard has four panels:
- Tools (left): lists registered tools with input fields; run any tool as the LLM would
- Tool Output (top center): raw JSON returned by the server
- View State (top right): the widget's current state as JSON, updating in real time
- Rendered Widget (bottom center): the live React component preview
To simulate a user flow: select search_lenses with no filters and a limit of 5, click Run, and the lens list renders. Clicking lenses updates the selection array in the View State panel in real time. Selecting multiple lenses surfaces Compare and Check out buttons. Compare transitions the widget to a side-by-side table (stage: "compare"); checkout transitions to a form (stage: "checkout"). The entire flow is testable locally without connecting to an LLM.
Connecting to Claude
Activating the tunnel
In the emulator dashboard, navigate to the Tunnel tab and start the tunnel. Copy the generated public HTTPS URL.
Adding a custom connector in Claude
In Claude Settings → Connectors, click Add custom connector, set a name ("LensShop"), paste the tunnel URL as the Remote MCP server URL, and save. Click Connect on the new connector and set tool permissions.
Using the live app
In a new Claude chat:
"Give me some recommendations for the best lenses under $2000 for portrait shooting."
Claude recognizes the request, calls the search_lenses tool, and renders the interactive widget in the chat window instead of a text response.
Final thoughts
Skybridge's main practical contribution is collapsing the MCP development feedback loop. The combination of local HMR, an integrated tunnel with a stable URL, and a full emulator that simulates LLM tool calls means the workflow for iterating on an MCP app is similar to iterating on a normal React app.
The AI-scaffolding path (installing the skill and prompting the AI to generate the app) produces a working skeleton quickly, but the real value is in the testing infrastructure, which makes refining that skeleton fast and predictable.
For developers already building in React who want to add chatbot-native UI experiences to their products, Skybridge removes most of the infrastructure work that would otherwise require a custom MCP server implementation.
Source code and documentation are at github.com/alpic-ai/skybridge.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.