# Skybridge

> The #1 full stack open-source TS framework for building ChatGPT and MCP Apps

## Docs

- [API Reference](https://docs.skybridge.tech/api-reference.md): Detailed documentation for all hooks and utilities provided by Skybridge.
- [CLI Reference](https://docs.skybridge.tech/api-reference/cli.md): Complete reference for Skybridge CLI commands
- [createStore](https://docs.skybridge.tech/api-reference/create-store.md): Create Zustand stores with automatic view state persistence, actions, and middleware support.
- [data-llm Attribute](https://docs.skybridge.tech/api-reference/data-llm.md): Create a feedback loop between your view UI state and the model for contextual responses.
- [generateHelpers](https://docs.skybridge.tech/api-reference/generate-helpers.md): Create fully typed hooks with end-to-end inference from your MCP server, like tRPC for views.
- [Type Utilities](https://docs.skybridge.tech/api-reference/infer-utility-types.md): Extract input, output, and structured content types from your MCP server definition.
- [McpServer](https://docs.skybridge.tech/api-reference/mcp-server.md): The main class for building MCP servers with Skybridge, supporting tools, views, and type inference.
- [registerTool](https://docs.skybridge.tech/api-reference/register-tool.md): Register an MCP tool — with or without a React view
- [useAppsSdkContext](https://docs.skybridge.tech/api-reference/use-apps-sdk-context.md): Low-level hook for subscribing to OpenAI host global state values directly.
- [useCallTool](https://docs.skybridge.tech/api-reference/use-call-tool.md): React hook for calling MCP tools from views with typed API and state management.
- [useDisplayMode](https://docs.skybridge.tech/api-reference/use-display-mode.md): Read and control view display modes: inline, fullscreen, or picture-in-picture.
- [useFiles](https://docs.skybridge.tech/api-reference/use-files.md): Upload, select, and download files within views, with host-managed storage across tool calls.
- [useLayout](https://docs.skybridge.tech/api-reference/use-layout.md): Access dynamic layout info like viewport dimensions, theme, and visual environment in views.
- [useMcpAppContext](https://docs.skybridge.tech/api-reference/use-mcp-app-context.md): Low-level hook for subscribing to MCP App host context values directly.
- [useOpenExternal](https://docs.skybridge.tech/api-reference/use-open-external.md): Navigate users to external URLs properly from within your app views.
- [useRequestModal](https://docs.skybridge.tech/api-reference/use-request-modal.md): Trigger modals portaled outside the view iframe for better overlay display.
- [useSendFollowUpMessage](https://docs.skybridge.tech/api-reference/use-send-follow-up-message.md): Programmatically trigger AI conversation turns based on user actions in your view.
- [useSetOpenInAppUrl](https://docs.skybridge.tech/api-reference/use-set-open-in-app-url.md): Set the URL that will be opened when users click the 'open in app' button in fullscreen mode.
- [useToolInfo](https://docs.skybridge.tech/api-reference/use-tool-info.md): React hook for accessing tool input, output, metadata, and execution status in Skybridge views.
- [useUser](https://docs.skybridge.tech/api-reference/use-user.md): Access session-stable user information like locale and timezone in your app views.
- [useViewState](https://docs.skybridge.tech/api-reference/use-view-state.md): React hook for persistent view state that survives re-renders and display mode changes.
- [Data Flow](https://docs.skybridge.tech/concepts/data-flow.md): Learn how data moves between the host, your MCP server, and views in Skybridge applications.
- [Fast Iteration](https://docs.skybridge.tech/concepts/fast-iteration.md): Develop Apps locally with Skybridge's DevTools and Vite HMR for instant feedback without tunneling.
- [Core Concepts](https://docs.skybridge.tech/concepts/index.md): Understand the five key concepts that power Skybridge: write once run everywhere, data flow, LLM context sync, fast iteration, and type safety.
- [LLM Context Sync](https://docs.skybridge.tech/concepts/llm-context-sync.md): Keep the LLM informed about view state with data-llm attributes for better conversational context.
- [Type Safety](https://docs.skybridge.tech/concepts/type-safety.md): Get end-to-end TypeScript type inference from server to view with generateHelpers.
- [Write Once, Run Everywhere](https://docs.skybridge.tech/concepts/write-once-run-everywhere.md): How Skybridge abstracts runtime differences so your apps work across all ChatGPT and MCP Apps hosts.
- [DevTools](https://docs.skybridge.tech/devtools/devtools.md): Test your app views locally with Skybridge's browser-based DevTools and debugging tools.
- [Skills](https://docs.skybridge.tech/devtools/skills.md): Use AI coding assistants pre-loaded with Skybridge expertise to build your app.
- [FAQ](https://docs.skybridge.tech/faq.md): Common questions and troubleshooting for Skybridge type safety, deployment, and App development.
- [Fundamentals](https://docs.skybridge.tech/fundamentals.md): Understanding Model Context Protocol (MCP), the MCP Apps portable baseline, and ChatGPT-specific extensions.
- [Apps SDK (ChatGPT)](https://docs.skybridge.tech/fundamentals/apps-sdk.md): Deep dive into ChatGPT's runtime: MCP Apps compatibility, the window.openai API, and ChatGPT-only features.
- [MCP Apps](https://docs.skybridge.tech/fundamentals/mcp-apps.md): Deep dive into the MCP ext-apps specification: MCP protocol, Skybridge hooks, and how MCP Apps clients render views.
- [Communicating with the Model](https://docs.skybridge.tech/guides/communicating-with-model.md): Use data-llm for passive context sync and useSendFollowUpMessage for active communication with the LLM.
- [Fetching Data](https://docs.skybridge.tech/guides/fetching-data.md): Learn two patterns for getting data into views: initial hydration with useToolInfo and user-triggered fetching with useCallTool.
- [Host Environment Context](https://docs.skybridge.tech/guides/host-environment-context.md): Adapt your view to the host's theme, locale, display mode, and device with environment hooks.
- [Managing State](https://docs.skybridge.tech/guides/managing-state.md): Persist view state across renders with useViewState and createStore for local and global state management.
- [Start building with Skybridge](https://docs.skybridge.tech/home.md): Everything you need to create MCP and ChatGPT Apps, from brainstorming to production.
- [Add Skybridge to existing app](https://docs.skybridge.tech/quickstart/add-to-existing-app.md): Add Skybridge packages to your existing MCP server or React app for view support and type inference.
- [Use skybridge/server](https://docs.skybridge.tech/quickstart/add-to-existing-app/server.md): Add view registration and TypeScript type inference to your existing MCP server with skybridge/server.
- [Use skybridge/web](https://docs.skybridge.tech/quickstart/add-to-existing-app/web.md): Add React hooks and utilities to your App views with skybridge/web standalone package.
- [Build for Production](https://docs.skybridge.tech/quickstart/build-for-production.md): Deploy your app to production with optimized builds and production server configuration.
- [Quickstart](https://docs.skybridge.tech/quickstart/create-new-app.md): Get started with a fully working App in 5 minutes thanks to our starter template.
- [Deploy](https://docs.skybridge.tech/quickstart/deploy.md): Deploy your App and share it to your users
- [Migrate](https://docs.skybridge.tech/quickstart/migrate.md): Migrate ChatGPT App or ext-apps to Skybridge
- [Test Your App](https://docs.skybridge.tech/quickstart/test-your-app.md): Test your app locally with DevTools, or in ChatGPT Developer Mode and compatible MCP Clients for integration testing.
- [All Apps](https://docs.skybridge.tech/showcase.md): Example apps built with Skybridge
- [Auth — Auth0](https://docs.skybridge.tech/showcase/auth-auth0.md): Full OAuth authentication with Auth0 and personalized coffee shop search.
- [Auth — Clerk](https://docs.skybridge.tech/showcase/auth-clerk.md): Full OAuth authentication with Clerk and personalized coffee shop search.
- [Auth — Stytch](https://docs.skybridge.tech/showcase/auth-stytch.md): Full OAuth authentication with Stytch and personalized coffee shop search.
- [Auth — WorkOS AuthKit](https://docs.skybridge.tech/showcase/auth-workos.md): Full OAuth authentication with WorkOS AuthKit and personalized coffee shop search.
- [Awaze — Cottage Search](https://docs.skybridge.tech/showcase/awaze.md): Holiday cottage search and booking experience powered by MCP.
- [Capitals Explorer](https://docs.skybridge.tech/showcase/capitals.md): Interactive world map with geolocation and dynamic capital exploration.
- [Ecommerce Carousel](https://docs.skybridge.tech/showcase/ecommerce-carousel.md): Product carousel with persistent cart, localization, and modal checkout flow.
- [Evaneos — Travel Destinations](https://docs.skybridge.tech/showcase/evaneos.md): Personalized travel discovery powered by Evaneos experts in ChatGPT.
- [Everything](https://docs.skybridge.tech/showcase/everything.md): Comprehensive playground showcasing Skybridge hooks and utilities.
- [Flight Booking](https://docs.skybridge.tech/showcase/flight-booking.md): Flight search carousel with route details, pricing comparison, and external booking links.
- [Generative UI](https://docs.skybridge.tech/showcase/generative-ui.md): LLM-generated dynamic UIs with json-render and shadcn/ui components.
- [Investigation Game](https://docs.skybridge.tech/showcase/investigation-game.md): Interactive murder mystery game for MCP Apps
- [Lumo — Interactive AI Tutor](https://docs.skybridge.tech/showcase/lumo.md): Adaptive educational tutor with diagrams, mind maps, quizzes, and exercises.
- [Magic 8-Ball](https://docs.skybridge.tech/showcase/magic-8-ball.md): Classic fortune-telling toy that answers yes-or-no questions with mystical responses.
- [Manifest UI](https://docs.skybridge.tech/showcase/manifest-ui.md): Manifest UI is an agentic component library for building rich, interactive views.
- [Productivity](https://docs.skybridge.tech/showcase/productivity.md): Data visualization dashboard for MCP Apps
- [Time's Up](https://docs.skybridge.tech/showcase/times-up.md): Word-guessing party game for MCP Apps
- [Telemetry](https://docs.skybridge.tech/telemetry.md): Learn what data Skybridge collects, why we collect it, and how to opt out.