$git clone https://github.com/alpic-ai/skybridgeSkybridge 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.
| 1 | # Skybridge - the MCP Apps framework |
| 2 | |
| 3 | <p align="center"> |
| 4 | <a href="https://docs.skybridge.tech"> |
| 5 | <picture> |
| 6 | <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/skybridge-readme-banner-dark.png" /> |
| 7 | <img alt="Skybridge, the full-stack React framework for MCP apps and MCP servers" src="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/skybridge-readme-banner-light.png" width="100%" /> |
| 8 | </picture> |
| 9 | </a> |
| 10 | </p> |
| 11 | |
| 12 | <p align="center"> |
| 13 | <strong>The full-stack React framework for MCP Apps and MCP Servers.</strong> |
| 14 | </p> |
| 15 | |
| 16 | <p align="center"> |
| 17 | <a href="https://docs.skybridge.tech">Documentation</a> · |
| 18 | <a href="https://docs.skybridge.tech/quickstart/create-new-app">Quickstart</a> · |
| 19 | <a href="https://github.com/alpic-ai/skybridge/tree/main/examples">Examples</a> |
| 20 | </p> |
| 21 | |
| 22 | <p align="center"> |
| 23 | <a href="https://www.npmjs.com/package/skybridge"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/v/skybridge?color=77F5EE&labelColor=161B22&style=for-the-badge"><img alt="npm version" src="https://img.shields.io/npm/v/skybridge?color=E3FAF7&labelColor=F6F8FA&style=for-the-badge"></picture></a> |
| 24 | <a href="https://www.npmjs.com/package/skybridge"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/npm/dm/skybridge?color=D7FFC8&labelColor=161B22&style=for-the-badge"><img alt="npm downloads" src="https://img.shields.io/npm/dm/skybridge?color=E8FBD9&labelColor=F6F8FA&style=for-the-badge"></picture></a> |
| 25 | <a href="https://discord.com/invite/gNAazGueab"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/badge/Discord-community-77F5EE?style=for-the-badge&logo=discord&logoColor=77F5EE&labelColor=161B22"><img alt="Discord community" src="https://img.shields.io/badge/Discord-community-E3FAF7?style=for-the-badge&logo=discord&logoColor=5865F2&labelColor=F6F8FA"></picture></a> |
| 26 | <a href="https://github.com/alpic-ai/skybridge/blob/main/LICENSE"><picture><source media="(prefers-color-scheme: dark)" srcset="https://img.shields.io/github/license/alpic-ai/skybridge?color=D7FFC8&labelColor=161B22&style=for-the-badge"><img alt="License: MIT" src="https://img.shields.io/github/license/alpic-ai/skybridge?color=E8FBD9&labelColor=F6F8FA&style=for-the-badge"></picture></a> |
| 27 | </p> |
| 28 | |
| 29 | ## About Skybridge |
| 30 | |
| 31 | 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. |
| 32 | |
| 33 | Why? MCP apps extend the [Model Context Protocol](https://modelcontextprotocol.io/docs/getting-started/intro) 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. |
| 34 | Plus, the raw SDKs are low-level: no hooks, type safety, HMR, etc. |
| 35 | |
| 36 | That's why we built *Skybridge*. |
| 37 | |
| 38 | Features include: |
| 39 | |
| 40 | - **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. |
| 41 | - **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. |
| 42 | - **Agent-ready**: powerful skills, CLI, and programmatic dev tool APIs, everything your coding agent needs to build MCP apps end-to-end. |
| 43 | - **Type-safe end-to-end**: tRPC-style inference from MCP server tool definition to React view for type safety from server to frontend. |
| 44 | - **React-first**: Intuitive React Query-style hooks, with advanced state management. |
| 45 | - **Example library**: get started quickly with ChatGPT- and Claude-ready app examples for ecommerce, travel, SaaS, and more. |
| 46 | |
| 47 | They chose to build their MCP app |