Development
Plugin
skybridge
The full-stack React framework for MCP Apps and MCP Servers. Documentation · Quickstart · Examples
Plugin Signal69/100Solid
maintained99
capable29
documented75
adopted70
Install
$ npx -y skills add alpic-ai/skybridge --agent claude-code
Run the curl in your terminal, the rest in Claude Code.
Stats
1,968
Stars
131
Forks
Active
Maintenance
TypeScript
Language
MIT
License
2d ago
Last commit
10mo ago
Created
Repo: alpic-ai/skybridge
What's inside
Skills
3/chatgpt-app-builderGuide developers through creating and updating ChatGPT apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to/mcp-app-builderGuide developers through creating and updating MCP apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user wants to/skybridgeGuide developers through creating and updating ChatGPT and MCP apps. Covers the full lifecycle: brainstorming ideas against UX guidelines, bootstrapping projects, implementing tools/views, debugging, running dev servers, deploying and connecting apps to ChatGPT. Use when a user
Badges
1
README
1Skybridge - the MCP Apps framework
About Skybridge
Skybridge helps developers build type-safe MCP apps for Claude, ChatGPT and other UI-enabled MCP clients, with a complete set of tooling designed for both humans and agents.
Why? MCP apps extend the Model Context Protocol with rich, interactive UI views rendered from MCP servers. Conversational apps need seamless interaction between the user, the UI, and the model. This means new UX patterns, developer tooling, and abstractions. Plus, the raw SDKs are low-level: no hooks, type safety, HMR, etc.
That's why we built Skybridge.
Features include:
- Delightful dev environment: Skybridge provides a dev server with a local emulator, hot module reload, and a permanent tunnel to connect your local app to Claude and ChatGPT.
- Write once, run everywhere: the framework abstracts implementation differences between MCP clients, so your app runs seamlessly in Claude, ChatGPT, VSCode, and any other MCP apps compatible client.
- Agent-ready: powerful skills, CLI, and programmatic dev tool APIs, everything your coding agent needs to build MCP apps end-to-end.
- Type-safe end-to-end: tRPC-style inference from MCP server tool definition to React view for type safety from server to frontend.
- React-first: Intuitive React Query-style hooks, with advanced state management.
- Example library: get started quickly with ChatGPT- and Claude-ready app examples for ecommerce, travel, SaaS, and more.
They chose to build their MCP apps with Skybridge:
Get started
For agents
Install our skill for building MCP apps and ChatGPT apps:
npx skills add alpic-ai/skybridge -s skybridge
Once installed, ask your agent "What skills do you have?" to confirm, then try:
- Create a new MCP app
- Migrate my MCP server to the Skybridge framework
- Add a new view to my MCP app
For humans
Bootstrap a new project with:
npm create skybridge@latest my-app
For full install instructions, read our Quickstart guide.
Documentation
The Skybridge documentation covers the full lifecycle of building MCP Apps:
- Fundamentals: understand MCP Apps, ChatGPT Apps, and how Skybridge bridges both runtimes.
- Core concepts: learn about server <> model <> UI data flows, LLM context sync, type safety, and instant local iteration with our devtools.
- Guides: build real app behavior with tools, views, state, and model communication.
- API Reference: browse our MCP server APIs, React hooks, CLI commands, and runtime compatibility.
Deploy
Deploy Skybridge apps instantly on Alpic for scalable hosting, MCP-specific analytics, permanent tunneling, app store compliance auditing and submission help. You can also self-host on any Node.js-compatible platform.
See our deployment guide for the full production path.
Community & Contributing
We'd love your help improving Skybridge. Here are a few ways to get involved:
- Bugs: If you run into a bug or unexpected behavior, open a GitHub Issue with a clear reproduction.
- Questions and ideas: Need help building with Skybridge or have ideas to improve the framework, docs, examples, or developer experience? Open an issue or share them on our Discord.
- Pull requests: For code or documentation changes, read the Contributing Guide before opening a PR.
Skybridge is released under the MIT License.
Contributors
Built and maintained with ❤️ by Harijoe, Fred Barthelet, and the Alpic team.
Example templates
Explore all our example templates in the Examples section of the documentation.
Basic
| Preview | App | Description | Demo | Code |
|---|---|---|---|---|
| Everything | Comprehensive playground app showcasing all Skybridge hooks and features. | Try Demo | View code |
Use cases
| Preview | App | Description | Demo | Code |
|---|---|---|---|---|
| Capitals Explorer | Interactive world map with geolocation, country information, and dynamic capital exploration. | Try Demo | View code | |
| Flight Booking | Flight search carousel with route details, pricing comparison, and external booking. | Try Demo | View code | |
| Ecommerce Carousel | Product carousel with persistent cart, localization, theme switching, and modal dialogs. | Try Demo | View code | |
| Investigation Game | Multi-screen mystery game with fullscreen mode, dynamic story progression and context asynchronicity demonstration | Try Demo | View code | |
| Productivity | Interactive analytics dashboard with charts, theme adaptation, localization, fullscreen mode, and bidirectional tool calls. | Try Demo | View code | |
| Time's Up | Word-guessing party game where the user gives hints and the AI tries to guess. | Try Demo | View code | |
| Lumo — Interactive AI Tutor | Adaptive tutor with Mermaid diagrams, mind maps, quizzes, and fill-in-the-blank exercises. | Try Demo | View code |
Auth
| Preview | Provider | Description | Code |
|---|---|---|---|
| Descope | Full OAuth authentication with Descope and personalized coffee shop search. | View code | |
| Clerk | Full OAuth authentication with Clerk and personalized coffee shop search. | View code | |
| WorkOS AuthKit | Full OAuth authentication with WorkOS AuthKit and personalized coffee shop search. | View code | |
| Stytch | Full OAuth authentication with Stytch and personalized coffee shop search. | View code | |
| Auth0 | Full OAuth authentication with Auth0 and personalized coffee shop search. | View code | |
| Authplane | Full OAuth authentication with Authplane and personalized coffee shop search. | View code |
UI and component libraries
| Preview | App | Description | Demo | Code |
|---|---|---|---|---|
| Manifest UI | Agentic component library example for rich AI-powered experiences. | Try Demo | View code | |
| Generative UI | LLM-generated dynamic UIs with json-render and 36 pre-built shadcn/ui components. | Try Demo | View code |
File tree
1008alpic-ai/skybridgeView on GitHub
.claude/
settings.json
.github/
release-drafter.yml
workflows/
ci.yml
conformance.yml
deploy-infra.yml
deploy-landing.yml
publish-docs.yml
publish.yml
.gitignore
.nvmrc
.vscode/
extensions.json
settings.json
AGENTS.md
biome.json
CLAUDE.md
context7.json
CONTRIBUTING.md
docs/
.gitignore
api-reference/
auth0-provider.mdx
authplane-provider.mdx
clerk-provider.mdx
cli.mdx
create-store.mdx
custom-provider.mdx
data-llm.mdx
descope-provider.mdx
file-ref.mdx
generate-helpers.mdx
mcp-auth-metadata-router.mdx
mcp-server.mdx
optional-bearer-auth.mdx
overview.mdx
register-tool.mdx
require-bearer-auth.mdx
stytch-provider.mdx
use-apps-sdk-context.mdx
use-call-tool.mdx
use-display-mode.mdx
use-download.mdx
use-files.mdx
use-host-info.mdx
use-layout.mdx
use-mcp-app-context.mdx
use-open-external.mdx
use-register-view-tool.mdx
use-request-close.mdx
use-request-modal.mdx
use-request-size.mdx
use-send-follow-up-message.mdx
use-set-open-in-app-url.mdx
use-tool-info.mdx
use-user.mdx
use-view-state.mdx
utility-types.mdx
verifier.mdx
workos-provider.mdx
build/
auth.mdx
index.mdx
state.mdx
tools.mdx
view.mdx
components/
chat-example.jsx
compat.jsx
hero.jsx
docs.json
DOCUMENTATION-MANIFESTO.md
examples/
examples.mdx
auth-auth0.mdx
auth-authplane.mdx
auth-clerk.mdx
auth-descope.mdx
auth-stytch.mdx
auth-workos.mdx
capitals.mdx
chatgpt-files.mdx
chess.mdx
ecommerce-carousel.mdx
everything.mdx
flight-booking.mdx
generative-ui.mdx
investigation-game.mdx
manifest-ui.mdx
productivity.mdx
starter.mdx
supabase-triplog.mdx
times-up.mdx
fundamentals/
apps-sdk.mdx
mcp-apps.mdx
get-started/
architecture.mdx
introduction.mdx
quickstart.mdx
guides/
auth-providers.mdx
csp.mdx
files.mdx
index.mdx
migrate.mdx
skills.mdx
ux.mdx
images/
audit-screenshot.png
auth.png
descope.webp
devtools-screenshot.png
favicon.ico
logo.png
playground-screenshot.png
showcase-auth.png
showcase-auth0.png
showcase-authplane.png
showcase-capitals.png
showcase-chatgpt-files.png
showcase-chess.png
showcase-clerk.png
showcase-ecommerce.png
showcase-example.png
showcase-flight-booking.png
showcase-generative-ui.png
showcase-investigation-game.png
showcase-lumo.png
showcase-manifest-ui.png
showcase-productivity.png
showcase-starter.png
showcase-stytch.png
showcase-supabase-triplog.png
showcase-times-up.png
showcase-workos.png
skybridge-readme-banner-dark.png
skybridge-readme-banner-light.png
SkybridgeFaviconmidnight.svg
SkybridgeFaviconwhite.svg
Skybridgemidnight.svg
Skybridgewhite(1).svg
user-logos/
bitmovin-dark.svg
bitmovin-light.svg
cottages-dark.svg
cottages-light.svg
datadog-dark.svg
datadog-light.svg
evaneos-dark.svg
evaneos-light.svg
touchstream-dark.svg
touchstream-light.svg
package.json
README.md
resources/
apps-sdk-and-mcp-apps.mdx
telemetry.mdx
ship/
deploy.mdx
index.mdx
versioning.mdx
style.css
test/
audit.mdx
devtools.mdx
index.mdx
playground.mdx
tunnel.mdx
troubleshooting.mdx
e2e/
conformance/
.env.example
.gitignore
alpic.json
notte/
alpic_expected.json
alpic.py
chatgpt_expected.json
chatgpt.py
claude_expected.json
claude.py
conformance.py
create-profile.ts
tsconfig.json
utils.py
package.json
README.md
src/
automation.ts
index.css
server.ts
tests.tsx
views/
conformance.tsx
vite-env.d.ts
tsconfig.json
vite.config.ts
examples/
auth-auth0/
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
auth-authplane/
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
auth-clerk/
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
auth-descope/
auth-descope-alpic/
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
auth-descope-mixed/
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
env.ts
helpers.ts
server.ts
views/
catalog.tsx
tsconfig.json
vite.config.ts
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
auth-stytch/
.env.example
alpic.json
assets/
authenticate.html
authorize.html
login.html
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
auth-workos/
.env.example
alpic.json
nodemon.json
package.json
README.md
src/
coffee-data.ts
env.ts
helpers.ts
index.css
server.ts
views/
search-coffee-paris.tsx
tsconfig.json
vite.config.ts
capitals/
.env.example
.gitignore
alpic.json
package.json
README.md
src/
capitals.ts
components/
ui/
shadcn-io/
spinner/
index.tsx
data/
country-to-capital.ts
env.ts
helpers.ts
index.css
server.ts
utils.ts
views/
components/
CapitalDetail.tsx
MapView.tsx
NearbyList.tsx
explore-capitals.tsx
vite-env.d.ts
tsconfig.json
vite.config.ts
chatgpt-files/
.env.example
.gitignore
alpic.json
package.json
README.md
src/
env.ts
helpers.ts
index.css
r2.ts
server.ts
views/
zip-file.tsx
tsconfig.json
vite.config.ts
chess/
.gitignore
alpic.json
package.json
README.md
src/
helpers.ts
index.css
lib/
engine.ts
match.ts
server.ts
views/
chess.tsx
tsconfig.json
vite.config.ts
ecom-carousel/
.env.example
.gitignore
alpic.json
package.json
README.md
src/
components/
... 808 moreFAQ
skybridge is a Claude Code plugin with 3 hand-picked skills for development work, indexed on Flowy. Install it with the command on its page. It includes chatgpt-app-builder, mcp-app-builder, skybridge. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is skybridge?
- The full-stack React framework for MCP Apps and MCP Servers. Documentation · Quickstart · Examples
- How do I install skybridge?
- Run these in Claude Code: npx -y skills add alpic-ai/skybridge --agent claude-code. Then prompt normally.
- Does skybridge auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is skybridge free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.