$ show alpic-ai/skybridge
Skybridge is a production-grade, full-stack TypeScript framework for building interactive MCP (Model Context Protocol) Apps and ChatGPT Apps. It provides a unified runtime to develop server-side tools with rich React-based UI views that render inside AI chat hosts like ChatGPT, Claude, Cursor, and VSCode. The framework is structured as a monorepo with packages for the core server/client library (`skybridge`), a Vite plugin for build orchestration, a developer tools SPA for local debugging, a project scaffolding CLI (`create-skybridge`), and an eval/test harness. The architecture centers on a typed MCP server implementation that handles tool registration, per-tool OAuth 2.1 authentication, an onion-model middleware system, and view resource serving. On the client side, a bridge abstraction (HostAdaptor) normalizes communication across different host protocols (OpenAI Apps SDK vs. MCP App JSON-RPC), while React hooks provide type-safe access to tool calls, view state, user context, and display modes. The framework emphasizes a 'reason, then render' two-phase pattern: a tool call computes data, then a view displays it interactively. Extensive examples cover e-commerce, games, authentication, productivity dashboards, and generative UI, demonstrating the framework's flexibility. Skybridge is not a data research project; it is a developer toolchain for building agent-native applications.
The LLM identified 6 files worth highlighting for reuse:
Implements an onion-model middleware system for the MCP protocol. Handlers are chained per method (tools/call, resources/read, etc.) with flexible filter matching (exact, wildcard, category arrays). Supports short-circuit, guards against double next() calls, propagates param mutations, and provides error capture utilities. This pattern is reusable in any MCP server implementation and demonstrates sophisticated middleware architecture.
Contains `createStore` and the underlying machinery for bidirectional synchronization between a React Zustand store and the host's view state. Handles context filtering, host-initiated updates, and provides a clean API (`useViewState`). This pattern is reusable for any iframe-based host communication and showcases a well-abstracted state sync solution.
Provides helper functions (`text`, `image`, `audio`, `embeddedResource`, `resourceLink`) to construct MCP content blocks in a type-safe and concise manner. The implementation normalizes input to the MCP SDK's `ContentBlock` union, handles blob-to-base64 conversion, and supports resource embedding. This module is self-contained and can be extracted into any MCP server project.
The `DataLLM` component provides a mechanism to expose selected view content to the model via a `__view_context` attribute. It uses a tree walker to collect text and metadata, respecting CSS `content-visibility` flags. This pattern is critical for making UI state accessible to LLMs and is designed as a low-coupling, reusable component.
Defines the `customProvider` factory that encapsulates OAuth 2.1 dynamic client registration, OpenID Connect discovery, and JWKS verification. Returns a standardized `OAuthConfig` with typed claims. All branded providers (Auth0, Clerk, etc.) are thin wrappers around this factory, making it the foundational, reusable pattern for any OAuth-compliant identity provider.
A self-contained `ProductCarousel` component built with vanilla-extract and native scroll-snap. It features arrow navigation, edge detection (start/end), visibility tracking for analytics, and supports arbitrary children. The component includes stories (Ladle) and demonstrates a reusable, accessible carousel pattern that can be dropped into any project.