alpic-ai / skybridge

Skybridge **Build ChatGPT & MCP Apps. The Modern TypeScript Way.** The fullstack TypeScript framework for AI-embedded widgets. **Type-safe. React-powered. Platform-agnostic.** Documentation · Quick Start · Showcase ✨ Why Skybridge? ChatGPT Apps and MCP Apps let you embed **rich, interactive UIs** directly in AI conversations. But the raw SDKs are low-level—no hooks, no type safety, no dev tools, and no HMR. **Skybridge fixes that.** | | | |:--|:--| | 👨‍💻 **Full Dev Environment** — HMR, debug traces, and local devtools. No more refresh loops. | ✅ **End-to-End Type Safety** — tRPC-style inference from server to widget. Autocomplete everywhere. | | 🔄 **Widget-to-Model Sync** — Keep the model aware of UI state with . Dual surfaces, one source of truth. | ⚒️ **React Query-style Hooks** — , , callbacks. State management you already know. | | 🌐 **Platform Agnostic** — Write once, run anywhere. Works with ChatGPT (Apps SDK) and MCP-compatible clients. | 📦 **Showcase Examples** — Production-ready examples to learn from and build upon. | 🚀 Get Started **Create a new app:** **Or add to an existing project:** **👉 Read the Docs 👈** 📦 Architecture Skybridge is a fullstack framework with unified server and client modules: • ** ** — Define tools and widgets with full type inference. Extends the MCP SDK. • ** ** — React hooks that consume your server types. Works with Apps SDK (ChatGPT) and MCP Apps. • **Dev Environment** — Vite plugin with HMR, DevTools emulator, and optimized builds. Server Widget 🎯 Features at a Glance • **Live Reload** — Vite HMR. See changes instantly without reinstalling. • **Typed Hooks** — Full autocomplete for tools, inputs, outputs. • **Widget → Tool Calls** — Trigger server actions from UI. • **Dual Surface Sync** — Keep model aware of what users see with . • **React Query-style API** — , , callbacks. • **Platform Agnostic** — Works with ChatGPT (Apps SDK) and MCP Apps clients (Goose, VSCode, etc.). • **MCP Compatible** — Extends the official SDK. Works with any MCP client. 📖 Showcase Explore production-ready examples: | Example | Description | Demo | Code | |------------------------|----------------------------------------------------------------------------------|-----------------------------------------------------|-------------------------------------------------------------------------------------| | **Capitals Explorer** | Interactive world map with geolocation and Wikipedia integration | Try Demo | View Code | | **Ecommerce Carousel** | Product carousel with cart, localization, and modals | Try Demo | View Code | | **Everything** | Comprehensive playground showcasing all hooks and features | Try Demo | View Code | | **Investigation Game** | Interactive murder mystery game with multi-screen gameplay and dynamic story progression | Try Demo | View Code | | **Productivity** | Data visualization dashboard demonstrating Skybridge capabilities for MCP Apps | Try Demo | View Code | | **Time's Up** | Word-guessing party game where the user gives hints and the AI tries to guess the secret word | Try Demo | View Code | | **Auth — Clerk** | Full OAuth authentication with Clerk and personalized coffee shop search | — | View Code | | **Auth — WorkOS AuthKit** | Full OAuth authentication with WorkOS AuthKit and personalized coffee shop search | — | View Code | | **Manifest Starter** | Starter app with Manifest UI agentic components out-of-the-box | Try Demo | View Code | See all examples in the Showcase or browse the examples/ directory. See CONTRIBUTING.md for setup instructions **MIT License** · Made with ❤️ by **Alpic**