skybridge 0.0.0-dev.e4c9359 → 0.0.0-dev.e4f73e5

package/README.md

@@ -1,323 +1,153 @@
-<div align="center">
-
-# Skybridge
-
-**Skybridge is the TypeScript framework for building ChatGPT apps**
-
-[![By Alpic](https://img.shields.io/badge/Made%20by%20Alpic-f6ffed?logo=alpic)](https://alpic.ai)
-
-![NPM Downloads](https://img.shields.io/npm/dm/skybridge?color=e90060)
-![NPM Version](https://img.shields.io/npm/v/skybridge?color=e90060)
-![GitHub License](https://img.shields.io/github/license/alpic-ai/skybridge?color=e90060)
-
-</div>
-
-Skybridge comes with 2 packages:
-
-- `skybridge/server`: A drop-in replacement of the `@modelcontextprotocol/sdk` official `McpServer` class with extra features for widget development.
-- `skybridge/web`: A react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
-
-## Quick start
-
-To get started in less than a minute, you can [create a new repository](https://github.com/new?template_name=apps-sdk-template&template_owner=alpic-ai) using our [ChatGPT SDK template](https://github.com/alpic-ai/apps-sdk-template). This template includes a basic setup for both the server and the widgets.
-
-## Installation
-
+# Skybridge - the MCP Apps framework
+
+<p align="center">
+  <a href="https://docs.skybridge.tech">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/skybridge-readme-banner-dark.png" />
+      <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%" />
+    </picture>
+  </a>
+</p>
+
+<p align="center">
+  <strong>The full-stack React framework for MCP Apps and MCP Servers.</strong>
+</p>
+
+<p align="center">
+  <a href="https://docs.skybridge.tech">Documentation</a> ·
+  <a href="https://docs.skybridge.tech/quickstart/create-new-app">Quickstart</a> ·
+  <a href="https://github.com/alpic-ai/skybridge/tree/main/examples">Examples</a>
+</p>
+
+<p align="center">
+  <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&amp;labelColor=161B22&amp;style=for-the-badge"><img alt="npm version" src="https://img.shields.io/npm/v/skybridge?color=E3FAF7&amp;labelColor=F6F8FA&amp;style=for-the-badge"></picture></a>
+  <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&amp;labelColor=161B22&amp;style=for-the-badge"><img alt="npm downloads" src="https://img.shields.io/npm/dm/skybridge?color=E8FBD9&amp;labelColor=F6F8FA&amp;style=for-the-badge"></picture></a>
+  <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&amp;logo=discord&amp;logoColor=77F5EE&amp;labelColor=161B22"><img alt="Discord community" src="https://img.shields.io/badge/Discord-community-E3FAF7?style=for-the-badge&amp;logo=discord&amp;logoColor=5865F2&amp;labelColor=F6F8FA"></picture></a>
+  <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&amp;labelColor=161B22&amp;style=for-the-badge"><img alt="License: MIT" src="https://img.shields.io/github/license/alpic-ai/skybridge?color=E8FBD9&amp;labelColor=F6F8FA&amp;style=for-the-badge"></picture></a>
+</p>
+
+## 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](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. 
+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: 
+
+<p align="center">
+  <a href="https://www.datadoghq.com"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/datadog-dark.svg"><img src="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/datadog-light.svg" alt="Datadog" height="24"></picture></a>
+  &nbsp;&nbsp;
+  <a href="https://bitmovin.com"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/bitmovin-dark.svg"><img src="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/bitmovin-light.svg" alt="Bitmovin" height="22"></picture></a>
+  &nbsp;&nbsp;
+  <a href="https://www.evaneos.com"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/evaneos-dark.svg"><img src="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/evaneos-light.svg" alt="Evaneos" height="18"></picture></a>
+  &nbsp;&nbsp;
+  <a href="https://www.touchstream.media"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/touchstream-dark.svg"><img src="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/touchstream-light.svg" alt="Touchstream" height="24"></picture></a>
+  &nbsp;&nbsp;
+  <a href="https://www.cottages.com"><picture><source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/cottages-dark.svg"><img src="https://raw.githubusercontent.com/alpic-ai/skybridge/main/docs/images/user-logos/cottages-light.svg" alt="Cottages.com" height="24"></picture></a>
+</p>
+
+## Get started
+
+**For agents**
+
+Install our [skill](https://docs.skybridge.tech/devtools/skills) for building MCP apps and ChatGPT apps:
 ```bash
-pnpm add skybridge
+npx skills add alpic-ai/skybridge -s skybridge
 ```
+Once installed, ask your agent "What skills do you have?" to confirm, then try:
 
-## Concepts
-
-### Widgets
-
-> A widget is a UI component that turns structured tool results into a human-friendly UI. Those are built using React components. They are rendered inside an iframe inline with the conversation on ChatGPT.
-
-Each widget in your app must have a unique name. The name is used to bridge the tool invocation result with the widget React component.
-
-For example, in order to register a new widget named `pokemon` on your ChatGPT app. You should have the following file structure and file contents:
-
-_Project structure_
-
-```
-server/
-└── src/
-    └── index.ts // Register the widget with McpServer.widget()
-web/
-└── src/
-    └── widgets/
-        └── pokemon.tsx // Use the same widget name as the file name
-```
-
-_server/src/index.ts_
-
-```ts
-import { McpServer } from "skybridge/server";
-
-const server = new McpServer();
-
-server.widget(
-  "pokemon"
-  // Remaining arguments...
-);
-```
-
-_web/src/widgets/pokemon.tsx_
-
-```ts
-import { mountWidget } from "skybridge/web";
-
-const Pokemon: React.FunctionComponent = () => {
-  // Your React component code goes here...
-};
-
-mountWidget(<Pokemon />);
-```
-
-## Packages
-
-### skybridge/server
+- _Create a new MCP app_
+- _Migrate my MCP server to the Skybridge framework_
+- _Add a new view to my MCP app_ 
 
-The `skybridge/server` package is a drop-in replacement of the `@modelcontextprotocol/sdk` official `McpServer` class with extra features for widget development. If you're already using the `@modelcontextprotocol/sdk`, you can simply replace your `McpServer` import with `skybridge/server` and you're good to go.
+**For humans**
 
-### skybridge/web
-
-The `skybridge/web` package is a react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
-
-**Vite plugin**
-
-The `skybridge/web` package comes with a Vite plugin that allows you to build your widgets as regular Vite apps.
-
-```ts
-import { defineConfig } from "vite";
-import { skybridge } from "skybridge/web";
-
-export default defineConfig({
-  plugins: [skybridge()],
-});
-```
-
-**Typed Hooks**
-
-Skybridge provides fully typed hooks that give you autocomplete for tool names and type inference for inputs/outputs - similar to tRPC. This is opt-in and requires exporting your server type.
-
-> **Tip:** For the best TypeScript experience, use typed hooks throughout your application. They provide autocomplete, type safety, and better IDE support.
-
-_Server setup (server/src/index.ts)_
-
-```ts
-import { McpServer } from "skybridge/server";
-import { z } from "zod";
-
-const server = new McpServer({ name: "my-app", version: "1.0" }, {})
-  .widget("search-voyage", {}, {
-    description: "Search for trips",
-    inputSchema: {
-      destination: z.string(),
-      departureDate: z.string().optional(),
-    },
-    outputSchema: {
-      results: z.array(z.object({ id: z.string(), name: z.string() })),
-      totalCount: z.number(),
-    },
-  }, async ({ destination }) => {
-    // Your tool logic here...
-    return { content: [{ type: "text", text: `Found trips to ${destination}` }] };
-  })
-  .widget("get-details", {}, {
-    inputSchema: { tripId: z.string() },
-  }, async ({ tripId }) => {
-    return { content: [{ type: "text", text: `Details for ${tripId}` }] };
-  });
-
-// Export the server type for the client
-export type AppType = typeof server;
-```
-
-_One-time setup (web/src/skybridge.ts)_
-
-Create typed hooks once and export them for use across your app. This file acts as a bridge between your server types and your widgets:
-
-```ts
-import type { AppType } from "../server"; // type-only import
-import { createTypedHooks } from "skybridge/web";
-
-export const { useCallTool, useToolInfo } = createTypedHooks<AppType>();
-```
-
-_Usage in widgets (web/src/widgets/search.tsx)_
-
-```tsx
-import { useCallTool, useToolInfo } from "../skybridge"; // import typed hooks
-
-export function SearchWidget() {
-  const { callTool, data, isPending } = useCallTool("search-voyage");
-  //                                                 ^ autocomplete for tool names
-  const toolInfo = useToolInfo<"search-voyage">();
-  //                              ^ autocomplete for widget names
-
-  const handleSearch = () => {
-    callTool({ destination: "Spain" });
-    //         ^ autocomplete for input fields
-  };
-
-  return (
-    <div>
-      <button onClick={handleSearch} disabled={isPending}>
-        Search
-      </button>
-      {toolInfo.isSuccess && (
-        <div>Found {toolInfo.output.totalCount} results</div>
-        //                      ^ typed output
-      )}
-    </div>
-  );
-}
-```
-
-**Hooks**
-
-The `skybridge/web` package comes with a set of hooks to help you build your widgets :
-
-- `useOpenAiGlobal`: A generic hook to get any global data from the OpenAI iFrame skybridge runtime (in `window.openai`).
-- `useToolOutput`: A hook to get the initial tool `structuredContent` returned when rendering the widget for the first time. The data inside this hook is not updated when the tool is called again.
-- `useToolResponseMetadata`: A hook to get the initial tool `meta` returned when rendering the widget for the first time. The data inside this hook is not updated when the tool is called again.
-- `useToolInfo`: A hook to get the tool input, output, and response metadata with type inference. Provides a discriminated union based on status (pending/success).
-- `useCallTool`: A @tanstack/react-query inspired hook to send make additional tool calls inside a widget.
-- `createTypedHooks`: A factory that creates typed versions of `useCallTool` and `useToolInfo` with full type inference from your server type.
-
-_useOpenAiGlobal_
-
-```ts
-import { useOpenAiGlobal } from "skybridge/web";
-
-const theme = useOpenAiGlobal("theme");
+Bootstrap a new project with:
+```bash
+npm create skybridge@latest my-app
 ```
+For full install instructions, read our [**Quickstart guide**](https://docs.skybridge.tech/quickstart/create-new-app).
 
-_useToolOutput_
+## Documentation
 
-```ts
-import { useToolOutput } from "skybridge/web";
+The [Skybridge documentation](https://docs.skybridge.tech) covers the full lifecycle of building MCP Apps:
 
-const toolOutput = useToolOutput();
-```
+- [Fundamentals](https://docs.skybridge.tech/fundamentals): understand MCP Apps, ChatGPT Apps, and how Skybridge bridges both runtimes.
+- [Core concepts](https://docs.skybridge.tech/concepts): learn about server <> model <> UI data flows, LLM context sync, type safety, and instant local iteration with our devtools.
+- [Guides](https://docs.skybridge.tech/guides/fetching-data): build real app behavior with tools, views, state, and model communication.
+- [API Reference](https://docs.skybridge.tech/api-reference): browse our MCP server APIs, React hooks, CLI commands, and runtime compatibility.
 
-_useToolResponseMetadata_
+## Deploy
 
-```ts
-import { useToolResponseMetadata } from "skybridge/web";
+Deploy Skybridge apps instantly on [Alpic](https://alpic.ai) 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.
 
-const toolResponseMetadata = useToolResponseMetadata();
-```
+See our [deployment guide](https://docs.skybridge.tech/quickstart/deploy) for the full production path.
 
-_useToolInfo_
+## Community & Contributing
 
-```ts
-import { useToolInfo } from "skybridge/web";
+We'd love your help improving Skybridge. Here are a few ways to get involved:
 
-const toolInfo = useToolInfo<{
-  input: { query: string };
-  output: { results: string[] };
-  responseMetadata: { id: number };
-}>();
+- **Bugs**: If you run into a bug or unexpected behavior, open a [GitHub Issue](https://github.com/alpic-ai/skybridge/issues) 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](https://github.com/alpic-ai/skybridge/issues) or share them on our [Discord](https://discord.com/invite/gNAazGueab).
+- **Pull requests**: For code or documentation changes, read the [Contributing Guide](https://github.com/alpic-ai/skybridge/blob/main/CONTRIBUTING.md) before opening a PR.
 
-// toolInfo.input is typed based on the input type
-// toolInfo.output is typed based on the output type (undefined when pending)
-// toolInfo.status narrows correctly: "pending" | "success"
+Skybridge is released under the [MIT License](https://github.com/alpic-ai/skybridge/blob/main/LICENSE).
 
-if (toolInfo.isPending) {
-  // toolInfo.output is undefined here
-  console.log(toolInfo.input.query);
-}
+### Contributors
 
-if (toolInfo.isSuccess) {
-  // toolInfo.output is typed here
-  console.log(toolInfo.output.results);
-}
-```
+Built and maintained with ❤️ by [Harijoe](https://github.com/harijoe), [Fred Barthelet](https://github.com/fredericbarthelet), and the [Alpic](https://alpic.ai) team.
 
-_useToolInfo_ with typed hooks (recommended)
+<a href="https://github.com/alpic-ai/skybridge/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=alpic-ai/skybridge" alt="Skybridge contributors">
+</a>
 
-```tsx
-import { useToolInfo } from "../skybridge"; // import typed hooks
+## Example templates
 
-export function SearchWidget() {
-  const toolInfo = useToolInfo<"search-voyage">();
-  //                              ^ autocomplete for widget names
-  // toolInfo.input is typed as { destination: string; departureDate?: string; ... }
-  // toolInfo.output is typed as { results: Array<...>; totalCount: number; } | undefined
+Explore all our example templates in the [Examples](https://docs.skybridge.tech/examples) section of the documentation.
 
-  if (toolInfo.isSuccess) {
-    return <div>Found {toolInfo.output.totalCount} results</div>;
-  }
+### Basic
 
-  return <div>Searching for {toolInfo.input.destination}...</div>;
-}
-```
+| Preview | App | Description | Demo | Code |
+| --- | --- | --- | --- | --- |
+| <img src="docs/images/showcase-example.png" alt="Everything" width="160" /> | Everything | Comprehensive playground app showcasing all Skybridge hooks and features. | [Try Demo](https://everything.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/everything) |
 
-_useCallTool_ in synchronous mode
-
-```ts
-import { useCallTool } from "skybridge/web";
-
-export const TestTool: React.FunctionComponent = () => {
-  const { callTool, isPending } = useCallTool("myToolName");
-
-  return (
-    <div>
-      <button
-        disabled={isPending}
-        onClick={() => {
-          callTool({ input: "test input" }, {
-            onSuccess: (data) => {
-              alert("Tool returned: " + data);
-            },
-          });
-      >
-        Call Tool inside a widget
-      </button>
-    </div>
-  );
-};
-```
+### Use cases
 
-_useCallTool_ in asynchronous mode
-
-```ts
-import { useCallTool } from "skybridge/web";
-
-export const TestTool: React.FunctionComponent = () => {
-  const { callToolAsync, isPending } = useCallTool("myToolName");
-
-  return (
-    <div>
-      <button
-        disabled={isPending}
-        onClick={async () => {
-          const data = await callToolAsync({ input: "test input" });
-          alert("Tool returned: " + data);
-        }}
-      >
-        Call Tool inside a widget
-      </button>
-    </div>
-  );
-};
-```
-
-## Migrate your existing MCP server to a ChatGPT app
+| Preview | App | Description | Demo | Code |
+| --- | --- | --- | --- | --- |
+| <img src="docs/images/showcase-capitals.png" alt="Capitals Explorer" width="160" /> | Capitals Explorer | Interactive world map with geolocation, country information, and dynamic capital exploration. | [Try Demo](https://capitals.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/capitals) |
+| <img src="docs/images/showcase-flight-booking.png" alt="Flight Booking" width="160" /> | Flight Booking | Flight search carousel with route details, pricing comparison, and external booking. | [Try Demo](https://flight-booking.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/flight-booking) |
+| <img src="docs/images/showcase-ecommerce.png" alt="Ecommerce Carousel" width="160" /> | Ecommerce Carousel | Product carousel with persistent cart, localization, theme switching, and modal dialogs. | [Try Demo](https://ecommerce.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/ecom-carousel) |
+| <img src="docs/images/showcase-investigation-game.png" alt="Investigation Game" width="160" /> | Investigation Game | Multi-screen mystery game with fullscreen mode, dynamic story progression and context asynchronicity demonstration | [Try Demo](https://investigation-game.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/investigation-game) |
+| <img src="docs/images/showcase-productivity.png" alt="Productivity" width="160" /> | Productivity | Interactive analytics dashboard with charts, theme adaptation, localization, fullscreen mode, and bidirectional tool calls. | [Try Demo](https://productivity.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/productivity) |
+| <img src="docs/images/showcase-times-up.png" alt="Time's Up" width="160" /> | Time's Up | Word-guessing party game where the user gives hints and the AI tries to guess. | [Try Demo](https://times-up.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/times-up) |
+| <img src="docs/images/showcase-lumo.png" alt="Lumo Interactive AI Tutor" width="160" /> | Lumo — Interactive AI Tutor | Adaptive tutor with Mermaid diagrams, mind maps, quizzes, and fill-in-the-blank exercises. | [Try Demo](https://lumo-mcp-app-39519fdd.alpic.live/try) | [View code](https://github.com/connorads/lumo-mcp-app) |
 
-If you're already using the `@modelcontextprotocol/sdk` to build a MCP server, you can migrate to a ChatGPT app by following these steps:
+### Auth
 
-1. Replace your `McpServer` import from `@modelcontextprotocol/sdk` with the same import from `skybridge/server`
-2. Create a new vite project in a folder named `web` and install the `skybridge` package
-3. Replace the `vite.config.ts` file with the following:
+| Preview | Provider | Description | Code |
+| --- | --- | --- | --- |
+| <img src="docs/images/descope.webp" alt="Auth Descope" width="160" /> | Descope | Full OAuth authentication with Descope and personalized coffee shop search. | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/auth-descope) |
+| <img src="docs/images/showcase-clerk.png" alt="Auth Clerk" width="160" /> | Clerk | Full OAuth authentication with Clerk and personalized coffee shop search. | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/auth-clerk) |
+| <img src="docs/images/showcase-workos.png" alt="Auth WorkOS AuthKit" width="160" /> | WorkOS AuthKit | Full OAuth authentication with WorkOS AuthKit and personalized coffee shop search. | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/auth-workos) |
+| <img src="docs/images/showcase-stytch.png" alt="Auth Stytch" width="160" /> | Stytch | Full OAuth authentication with Stytch and personalized coffee shop search. | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/auth-stytch) |
+| <img src="docs/images/showcase-auth0.png" alt="Auth Auth0" width="160" /> | Auth0 | Full OAuth authentication with Auth0 and personalized coffee shop search. | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/auth-auth0) |
 
-```ts
-import { defineConfig } from "vite";
-import { skybridge } from "skybridge/web";
+### UI and component libraries
 
-export default defineConfig({
-  plugins: [skybridge()],
-});
-```
+| Preview | App | Description | Demo | Code |
+| --- | --- | --- | --- | --- |
+| <img src="docs/images/showcase-manifest-ui.png" alt="Manifest UI" width="160" /> | Manifest UI | Agentic component library example for rich AI-powered experiences. | [Try Demo](https://manifest-ui.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/manifest-ui) |
+| <img src="docs/images/showcase-generative-ui.png" alt="Generative UI" width="160" /> | Generative UI | LLM-generated dynamic UIs with json-render and 36 pre-built shadcn/ui components. | [Try Demo](https://generative-ui.skybridge.tech/try) | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/generative-ui) |

package/bin/run.js

@@ -0,0 +1,5 @@
+#!/usr/bin/env node
+
+import { execute } from "@oclif/core";
+
+await execute({ dir: import.meta.url });

package/dist/cli/build-helpers.d.ts

@@ -0,0 +1,10 @@
+export declare const ENTRY_WRAPPER_CONTENT = "import { __setBuildManifest } from \"skybridge/server\";\nimport manifest from \"./vite-manifest.js\";\n\n__setBuildManifest(manifest);\n\nconst userMod = await import(\"./server.js\");\nexport default userMod.default;\n";
+export declare function emitEntryWrapper(distDir: string): void;
+export declare function emitManifestModule(manifestPath: string, outPath: string): void;
+/** Emit an empty Vite manifest for view-less (headless) servers. */
+export declare function emitEmptyManifestModule(outPath: string): void;
+export declare function ensureAssetsDir(assetsDir: string): void;
+export declare const VERCEL_FUNCTION_NAME = "mcp";
+export declare const VERCEL_CONFIG: unknown;
+export declare const VERCEL_VC_CONFIG: unknown;
+export declare function emitVercelBuildOutput(root: string): Promise<void>;

package/dist/cli/build-helpers.js

@@ -0,0 +1,93 @@
+import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync, } from "node:fs";
+import path from "node:path";
+// Primes the manifest in skybridge's module scope, then dynamically imports
+// `./server.js` so user code runs *after* the side channel is set. The
+// dynamic import is load-bearing: a static `export { default } from ...` is
+// hoisted with the rest of the static graph and would evaluate `server.js`
+// before `__setBuildManifest` runs.
+export const ENTRY_WRAPPER_CONTENT = `import { __setBuildManifest } from "skybridge/server";
+import manifest from "./vite-manifest.js";
+
+__setBuildManifest(manifest);
+
+const userMod = await import("./server.js");
+export default userMod.default;
+`;
+export function emitEntryWrapper(distDir) {
+    writeFileSync(path.join(distDir, "__entry.js"), ENTRY_WRAPPER_CONTENT);
+}
+export function emitManifestModule(manifestPath, outPath) {
+    const manifest = readFileSync(manifestPath, "utf-8");
+    writeFileSync(outPath, `export default ${manifest};\n`);
+}
+/** Emit an empty Vite manifest for view-less (headless) servers. */
+export function emitEmptyManifestModule(outPath) {
+    writeFileSync(outPath, "export default {};\n");
+}
+export function ensureAssetsDir(assetsDir) {
+    mkdirSync(assetsDir, { recursive: true });
+}
+export const VERCEL_FUNCTION_NAME = "mcp";
+export const VERCEL_CONFIG = {
+    version: 3,
+    routes: [
+        {
+            src: "/assets/(.*)",
+            headers: { "Access-Control-Allow-Origin": "*" },
+            continue: true,
+        },
+        { handle: "filesystem" },
+        { src: "/(.*)", dest: `/${VERCEL_FUNCTION_NAME}` },
+    ],
+};
+export const VERCEL_VC_CONFIG = {
+    runtime: "nodejs22.x",
+    handler: "index.js",
+    launcherType: "Nodejs",
+    shouldAddHelpers: true,
+};
+// Emit a Build Output API tree under `.vercel/output/`. Bundling the server
+// with esbuild produces a self-contained function bundle, so we don't ship
+// `node_modules` and don't touch tracked paths like `api/` or `public/`.
+//
+// Entry is `dist/__entry.js` — the wrapper that primes the Vite manifest via
+// `__setBuildManifest` before importing user code. Bundling `dist/server.js`
+// directly would skip that priming and 500 on view resource reads when the
+// function falls back to `readFileSync('dist/assets/.vite/manifest.json')`
+// (Vercel functions don't ship `dist/`).
+export async function emitVercelBuildOutput(root) {
+    const outputDir = path.join(root, ".vercel", "output");
+    const funcDir = path.join(outputDir, "functions", `${VERCEL_FUNCTION_NAME}.func`);
+    const staticAssetsDir = path.join(outputDir, "static", "assets");
+    rmSync(outputDir, { recursive: true, force: true });
+    mkdirSync(funcDir, { recursive: true });
+    const { build } = await import("esbuild");
+    await build({
+        entryPoints: [path.join(root, "dist", "__entry.js")],
+        bundle: true,
+        platform: "node",
+        target: "node22",
+        format: "esm",
+        outfile: path.join(funcDir, "index.js"),
+        // Lets esbuild DCE dev-only branches that pull in vite/devtools.
+        define: { "process.env.NODE_ENV": '"production"' },
+        // Dev-only deps reachable from re-exports; safe to leave unresolved since
+        // the code paths that touch them are eliminated by the NODE_ENV define.
+        external: ["vite", "@skybridge/devtools"],
+        banner: {
+            // ESM bundles miss CJS interop globals that some deps reach for.
+            js: "import{createRequire}from'node:module';const require=createRequire(import.meta.url);",
+        },
+    });
+    writeFileSync(path.join(funcDir, ".vc-config.json"), `${JSON.stringify(VERCEL_VC_CONFIG, null, 2)}\n`);
+    writeFileSync(path.join(funcDir, "package.json"), `${JSON.stringify({ type: "module" }, null, 2)}\n`);
+    const assetsSrc = path.join(root, "dist", "assets");
+    if (existsSync(assetsSrc)) {
+        cpSync(assetsSrc, staticAssetsDir, { recursive: true });
+    }
+    else {
+        mkdirSync(staticAssetsDir, { recursive: true });
+    }
+    writeFileSync(path.join(outputDir, "config.json"), `${JSON.stringify(VERCEL_CONFIG, null, 2)}\n`);
+}
+//# sourceMappingURL=build-helpers.js.map

package/dist/cli/build-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"build-helpers.js","sourceRoot":"","sources":["../../src/cli/build-helpers.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  cpSync,\n  existsSync,\n  mkdirSync,\n  readFileSync,\n  rmSync,\n  writeFileSync,\n} from \"node:fs\";\nimport path from \"node:path\";\n\n// Primes the manifest in skybridge's module scope, then dynamically imports\n// `./server.js` so user code runs *after* the side channel is set. The\n// dynamic import is load-bearing: a static `export { default } from ...` is\n// hoisted with the rest of the static graph and would evaluate `server.js`\n// before `__setBuildManifest` runs.\nexport const ENTRY_WRAPPER_CONTENT = `import { __setBuildManifest } from \"skybridge/server\";\nimport manifest from \"./vite-manifest.js\";\n\n__setBuildManifest(manifest);\n\nconst userMod = await import(\"./server.js\");\nexport default userMod.default;\n`;\n\nexport function emitEntryWrapper(distDir: string): void {\n  writeFileSync(path.join(distDir, \"__entry.js\"), ENTRY_WRAPPER_CONTENT);\n}\n\nexport function emitManifestModule(\n  manifestPath: string,\n  outPath: string,\n): void {\n  const manifest = readFileSync(manifestPath, \"utf-8\");\n  writeFileSync(outPath, `export default ${manifest};\\n`);\n}\n\n/** Emit an empty Vite manifest for view-less (headless) servers. */\nexport function emitEmptyManifestModule(outPath: string): void {\n  writeFileSync(outPath, \"export default {};\\n\");\n}\n\nexport function ensureAssetsDir(assetsDir: string): void {\n  mkdirSync(assetsDir, { recursive: true });\n}\n\nexport const VERCEL_FUNCTION_NAME = \"mcp\";\n\nexport const VERCEL_CONFIG: unknown = {\n  version: 3,\n  routes: [\n    {\n      src: \"/assets/(.*)\",\n      headers: { \"Access-Control-Allow-Origin\": \"*\" },\n      continue: true,\n    },\n    { handle: \"filesystem\" },\n    { src: \"/(.*)\", dest: `/${VERCEL_FUNCTION_NAME}` },\n  ],\n};\n\nexport const VERCEL_VC_CONFIG: unknown = {\n  runtime: \"nodejs22.x\",\n  handler: \"index.js\",\n  launcherType: \"Nodejs\",\n  shouldAddHelpers: true,\n};\n\n// Emit a Build Output API tree under `.vercel/output/`. Bundling the server\n// with esbuild produces a self-contained function bundle, so we don't ship\n// `node_modules` and don't touch tracked paths like `api/` or `public/`.\n//\n// Entry is `dist/__entry.js` — the wrapper that primes the Vite manifest via\n// `__setBuildManifest` before importing user code. Bundling `dist/server.js`\n// directly would skip that priming and 500 on view resource reads when the\n// function falls back to `readFileSync('dist/assets/.vite/manifest.json')`\n// (Vercel functions don't ship `dist/`).\nexport async function emitVercelBuildOutput(root: string): Promise<void> {\n  const outputDir = path.join(root, \".vercel\", \"output\");\n  const funcDir = path.join(\n    outputDir,\n    \"functions\",\n    `${VERCEL_FUNCTION_NAME}.func`,\n  );\n  const staticAssetsDir = path.join(outputDir, \"static\", \"assets\");\n\n  rmSync(outputDir, { recursive: true, force: true });\n  mkdirSync(funcDir, { recursive: true });\n\n  const { build } = await import(\"esbuild\");\n  await build({\n    entryPoints: [path.join(root, \"dist\", \"__entry.js\")],\n    bundle: true,\n    platform: \"node\",\n    target: \"node22\",\n    format: \"esm\",\n    outfile: path.join(funcDir, \"index.js\"),\n    // Lets esbuild DCE dev-only branches that pull in vite/devtools.\n    define: { \"process.env.NODE_ENV\": '\"production\"' },\n    // Dev-only deps reachable from re-exports; safe to leave unresolved since\n    // the code paths that touch them are eliminated by the NODE_ENV define.\n    external: [\"vite\", \"@skybridge/devtools\"],\n    banner: {\n      // ESM bundles miss CJS interop globals that some deps reach for.\n      js: \"import{createRequire}from'node:module';const require=createRequire(import.meta.url);\",\n    },\n  });\n\n  writeFileSync(\n    path.join(funcDir, \".vc-config.json\"),\n    `${JSON.stringify(VERCEL_VC_CONFIG, null, 2)}\\n`,\n  );\n  writeFileSync(\n    path.join(funcDir, \"package.json\"),\n    `${JSON.stringify({ type: \"module\" }, null, 2)}\\n`,\n  );\n\n  const assetsSrc = path.join(root, \"dist\", \"assets\");\n  if (existsSync(assetsSrc)) {\n    cpSync(assetsSrc, staticAssetsDir, { recursive: true });\n  } else {\n    mkdirSync(staticAssetsDir, { recursive: true });\n  }\n\n  writeFileSync(\n    path.join(outputDir, \"config.json\"),\n    `${JSON.stringify(VERCEL_CONFIG, null, 2)}\\n`,\n  );\n}\n"]}