skybridge 0.0.0-dev.eac9740 → 0.0.0-dev.eaed8a9

package/README.md

@@ -1,198 +1,154 @@
-<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
-```
-
-## 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
+npx skills add alpic-ai/skybridge -s skybridge
 ```
+Once installed, ask your agent "What skills do you have?" to confirm, then try:
 
-_server/src/index.ts_
+- _Create a new MCP app_
+- _Migrate my MCP server to the Skybridge framework_
+- _Add a new view to my MCP app_ 
 
-```ts
-import { McpServer } from "skybridge/server";
+**For humans**
 
-const server = new McpServer();
-
-server.widget(
-  "pokemon"
-  // Remaining arguments...
-);
+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).
 
-_web/src/widgets/pokemon.tsx_
-
-```ts
-import { mountWidget } from "skybridge/web";
-
-const Pokemon: React.FunctionComponent = () => {
-  // Your React component code goes here...
-};
-
-mountWidget(<Pokemon />);
-```
+## Documentation
 
-## Packages
+The [Skybridge documentation](https://docs.skybridge.tech) covers the full lifecycle of building MCP Apps:
 
-### skybridge/server
+- [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.
 
-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.
+## Deploy
 
-### 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.
 
-The `skybridge/web` package is a react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
+See our [deployment guide](https://docs.skybridge.tech/quickstart/deploy) for the full production path.
 
-**Vite plugin**
+## Community & Contributing
 
-The `skybridge/web` package comes with a Vite plugin that allows you to build your widgets as regular Vite apps.
+We'd love your help improving Skybridge. Here are a few ways to get involved:
 
-```ts
-import { defineConfig } from "vite";
-import { skybridge } from "skybridge/web";
+- **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.
 
-export default defineConfig({
-  plugins: [skybridge()],
-});
-```
+Skybridge is released under the [MIT License](https://github.com/alpic-ai/skybridge/blob/main/LICENSE).
 
-**Hooks**
+### Contributors
 
-The `skybridge/web` package comes with a set of hooks to help you build your widgets :
+Built and maintained with ❤️ by [Harijoe](https://github.com/harijoe), [Fred Barthelet](https://github.com/fredericbarthelet), and the [Alpic](https://alpic.ai) team.
 
-- `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.
-- `useCallTool`: A @tanstack/react-query inspired hook to send make additional tool calls inside a widget.
+<a href="https://github.com/alpic-ai/skybridge/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=alpic-ai/skybridge" alt="Skybridge contributors">
+</a>
 
-_useOpenAiGlobal_
+## Example templates
 
-```ts
-import { useOpenAiGlobal } from "skybridge/web";
+Explore all our example templates in the [Examples](https://docs.skybridge.tech/examples) section of the documentation.
 
-const theme = useOpenAiGlobal("theme");
-```
+### Basic
 
-_useToolOutput_
+| 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) |
 
-```ts
-import { useToolOutput } from "skybridge/web";
+### Use cases
 
-const toolOutput = useToolOutput();
-```
+| 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) |
 
-_useToolResponseMetadata_
+### Auth
 
-```ts
-import { useToolResponseMetadata } from "skybridge/web";
+| 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) |
+| <img src="docs/images/showcase-authplane.png" alt="Auth Authplane" width="160" /> | Authplane | Full OAuth authentication with Authplane and personalized coffee shop search. | [View code](https://github.com/alpic-ai/skybridge/tree/main/examples/auth-authplane) |
 
-const toolResponseMetadata = useToolResponseMetadata();
-```
+### UI and component libraries
 
-_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>
-  );
-};
-```
-
-_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
-
-If you're already using the `@modelcontextprotocol/sdk` to build a MCP server, you can migrate to a ChatGPT app by following these steps:
-
-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:
-
-```ts
-import { defineConfig } from "vite";
-import { skybridge } from "skybridge/web";
-
-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,11 @@
+export declare const ENTRY_WRAPPER_CONTENT = "import { __setBuildManifest, __setSkillsManifest } from \"skybridge/server\";\nimport manifest from \"./vite-manifest.js\";\nimport skills from \"./skills.js\";\n\n__setBuildManifest(manifest);\n__setSkillsManifest(skills);\n\nconst userMod = await import(\"./server.js\");\nexport default userMod.default;\n";
+export declare function emitEntryWrapper(distDir: string): void;
+export declare function emitSkillsModule(skillsDir: string, outPath: 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, serverExternal?: string[]): Promise<void>;

package/dist/cli/build-helpers.js

@@ -0,0 +1,107 @@
+import { cpSync, existsSync, mkdirSync, readFileSync, rmSync, writeFileSync, } from "node:fs";
+import path from "node:path";
+import { discoverSkills } from "../server/skills.js";
+// Primes the manifest and skills snapshot in skybridge's module scope, then
+// dynamically imports `./server.js` so user code runs *after* the side channels
+// are 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 the primers run. Both `skills.js` and
+// the manifest are imported (not read from disk) so they ride the bundle on
+// filesystem-less targets like Cloudflare Workers.
+export const ENTRY_WRAPPER_CONTENT = `import { __setBuildManifest, __setSkillsManifest } from "skybridge/server";
+import manifest from "./vite-manifest.js";
+import skills from "./skills.js";
+
+__setBuildManifest(manifest);
+__setSkillsManifest(skills);
+
+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 emitSkillsModule(skillsDir, outPath) {
+    const skills = discoverSkills(skillsDir);
+    writeFileSync(outPath, `export default ${JSON.stringify(skills)};\n`);
+}
+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, serverExternal = []) {
+    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.
+        // `serverExternal` comes from the vite plugin, for deps esbuild can't
+        // resolve or load (e.g. optional native modules pulled in transitively).
+        external: ["vite", "@skybridge/devtools", ...serverExternal],
+        // Native addons can't be inlined into the bundle; copy them next to the
+        // function and rewrite the require path to point at the copy.
+        loader: { ".node": "file" },
+        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\";\nimport { discoverSkills } from \"../server/skills.js\";\n\n// Primes the manifest and skills snapshot in skybridge's module scope, then\n// dynamically imports `./server.js` so user code runs *after* the side channels\n// are set. The dynamic import is load-bearing: a static\n// `export { default } from ...` is hoisted with the rest of the static graph\n// and would evaluate `server.js` before the primers run. Both `skills.js` and\n// the manifest are imported (not read from disk) so they ride the bundle on\n// filesystem-less targets like Cloudflare Workers.\nexport const ENTRY_WRAPPER_CONTENT = `import { __setBuildManifest, __setSkillsManifest } from \"skybridge/server\";\nimport manifest from \"./vite-manifest.js\";\nimport skills from \"./skills.js\";\n\n__setBuildManifest(manifest);\n__setSkillsManifest(skills);\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 emitSkillsModule(skillsDir: string, outPath: string): void {\n  const skills = discoverSkills(skillsDir);\n  writeFileSync(outPath, `export default ${JSON.stringify(skills)};\\n`);\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(\n  root: string,\n  serverExternal: string[] = [],\n): 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    // `serverExternal` comes from the vite plugin, for deps esbuild can't\n    // resolve or load (e.g. optional native modules pulled in transitively).\n    external: [\"vite\", \"@skybridge/devtools\", ...serverExternal],\n    // Native addons can't be inlined into the bundle; copy them next to the\n    // function and rewrite the require path to point at the copy.\n    loader: { \".node\": \"file\" },\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"]}

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

@@ -0,0 +1,132 @@
+// @vitest-environment node
+// esbuild's invariant check on TextEncoder/Uint8Array trips jsdom's polyfill.
+import { existsSync, mkdirSync, mkdtempSync, readFileSync, writeFileSync, } from "node:fs";
+import { tmpdir } from "node:os";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { ENTRY_WRAPPER_CONTENT, emitEmptyManifestModule, emitEntryWrapper, emitManifestModule, emitSkillsModule, emitVercelBuildOutput, ensureAssetsDir, VERCEL_CONFIG, VERCEL_VC_CONFIG, } from "./build-helpers.js";
+function mkTmp(prefix = "skybridge-build-helpers-") {
+    return mkdtempSync(path.join(tmpdir(), prefix));
+}
+describe("emitEntryWrapper", () => {
+    it("writes dist/__entry.js that primes the manifest before importing user code", () => {
+        const dir = mkTmp();
+        emitEntryWrapper(dir);
+        const out = readFileSync(path.join(dir, "__entry.js"), "utf-8");
+        expect(out).toBe(ENTRY_WRAPPER_CONTENT);
+        expect(out).toContain('import { __setBuildManifest, __setSkillsManifest } from "skybridge/server"');
+        expect(out).toContain('import manifest from "./vite-manifest.js"');
+        expect(out).toContain('import skills from "./skills.js"');
+        expect(out).toContain("__setBuildManifest(manifest)");
+        expect(out).toContain("__setSkillsManifest(skills)");
+        // Dynamic import is load-bearing: `server.js` must evaluate after the
+        // setters run, so a static re-export wouldn't work.
+        expect(out).toContain('await import("./server.js")');
+        expect(out).toContain("export default userMod.default");
+    });
+});
+describe("emitSkillsModule", () => {
+    it("inlines discovered skills as an ESM default export", () => {
+        const dir = mkTmp();
+        const skillsDir = path.join(dir, "src", "skills");
+        mkdirSync(path.join(skillsDir, "refunds"), { recursive: true });
+        writeFileSync(path.join(skillsDir, "refunds", "SKILL.md"), "---\nname: refunds\ndescription: Process refunds\n---\nBody");
+        const outPath = path.join(dir, "skills.js");
+        emitSkillsModule(skillsDir, outPath);
+        const out = readFileSync(outPath, "utf-8");
+        const literal = out
+            .slice("export default ".length)
+            .trim()
+            .replace(/;$/, "");
+        const skills = JSON.parse(literal);
+        expect(skills).toHaveLength(1);
+        expect(skills[0]).toMatchObject({
+            uri: "skill://refunds/SKILL.md",
+            frontmatter: { name: "refunds", description: "Process refunds" },
+        });
+        expect(skills[0].resources).toHaveLength(1);
+        expect(skills[0].resources[0].uri).toBe("skill://refunds/SKILL.md");
+        expect(skills[0].resources[0].digest).toMatch(/^sha256:[a-f0-9]{64}$/);
+    });
+    it("emits an empty array when the skills directory is absent", () => {
+        const dir = mkTmp();
+        const outPath = path.join(dir, "skills.js");
+        emitSkillsModule(path.join(dir, "nope"), outPath);
+        expect(readFileSync(outPath, "utf-8")).toBe("export default [];\n");
+    });
+});
+describe("emitManifestModule", () => {
+    it("inlines the JSON manifest as an ESM default export", () => {
+        const dir = mkTmp();
+        const inPath = path.join(dir, "manifest.json");
+        const outPath = path.join(dir, "vite-manifest.js");
+        const manifest = { "src/views/foo.tsx": { file: "assets/foo-abc.js" } };
+        writeFileSync(inPath, JSON.stringify(manifest));
+        emitManifestModule(inPath, outPath);
+        const out = readFileSync(outPath, "utf-8");
+        expect(out.startsWith("export default ")).toBe(true);
+        const literal = out
+            .slice("export default ".length)
+            .trim()
+            .replace(/;$/, "");
+        expect(JSON.parse(literal)).toEqual(manifest);
+    });
+});
+describe("emitEmptyManifestModule", () => {
+    it("writes an empty object default export", () => {
+        const dir = mkTmp();
+        const outPath = path.join(dir, "vite-manifest.js");
+        emitEmptyManifestModule(outPath);
+        expect(readFileSync(outPath, "utf-8")).toBe("export default {};\n");
+    });
+});
+describe("ensureAssetsDir", () => {
+    it("creates the assets directory when missing", () => {
+        const dir = mkTmp();
+        const assetsDir = path.join(dir, "dist", "assets");
+        ensureAssetsDir(assetsDir);
+        expect(existsSync(assetsDir)).toBe(true);
+    });
+});
+describe("emitVercelBuildOutput", () => {
+    it("emits a Build Output API tree with bundled function and static assets", async () => {
+        const root = mkTmp();
+        mkdirSync(path.join(root, "dist", "assets"), { recursive: true });
+        writeFileSync(path.join(root, "dist", "server.js"), "export default function handler(_req, res) { res.end('ok'); }\n");
+        // Minimal `dist/__entry.js` (the real wrapper imports `skybridge/server`,
+        // which isn't resolvable in this test's tmp dir — the function-bundling
+        // contract we care about here is just "bundle whatever `__entry.js`
+        // imports into a single function file").
+        writeFileSync(path.join(root, "dist", "__entry.js"), "const userMod = await import('./server.js');\nexport default userMod.default;\n");
+        writeFileSync(path.join(root, "dist", "assets", "view-abc.js"), "/* bundled view */\n");
+        await emitVercelBuildOutput(root);
+        const outputDir = path.join(root, ".vercel", "output");
+        const funcDir = path.join(outputDir, "functions", "mcp.func");
+        expect(existsSync(path.join(funcDir, "index.js"))).toBe(true);
+        expect(JSON.parse(readFileSync(path.join(funcDir, ".vc-config.json"), "utf-8"))).toEqual(VERCEL_VC_CONFIG);
+        expect(JSON.parse(readFileSync(path.join(funcDir, "package.json"), "utf-8"))).toEqual({ type: "module" });
+        expect(JSON.parse(readFileSync(path.join(outputDir, "config.json"), "utf-8"))).toEqual(VERCEL_CONFIG);
+        expect(readFileSync(path.join(outputDir, "static", "assets", "view-abc.js"), "utf-8")).toContain("bundled view");
+    });
+    it("leaves serverExternal packages unbundled", async () => {
+        const root = mkTmp();
+        mkdirSync(path.join(root, "dist"), { recursive: true });
+        // Unresolvable from the tmp root, so esbuild fails the build unless the
+        // package is marked external (bunyan → optional `dtrace-provider`).
+        writeFileSync(path.join(root, "dist", "__entry.js"), 'import "dtrace-provider";\nexport default null;\n');
+        await expect(emitVercelBuildOutput(root)).rejects.toThrow(/Could not resolve "dtrace-provider"/);
+        await emitVercelBuildOutput(root, ["dtrace-provider"]);
+        const bundle = readFileSync(path.join(root, ".vercel", "output", "functions", "mcp.func", "index.js"), "utf-8");
+        expect(bundle).toContain('import "dtrace-provider"');
+    });
+    it("emits static assets directory when dist/assets is missing", async () => {
+        const root = mkTmp();
+        mkdirSync(path.join(root, "dist"), { recursive: true });
+        writeFileSync(path.join(root, "dist", "__entry.js"), "const userMod = await import('./server.js');\nexport default userMod.default;\n");
+        writeFileSync(path.join(root, "dist", "server.js"), "export default function handler(_req, res) { res.end('ok'); }\n");
+        await emitVercelBuildOutput(root);
+        expect(existsSync(path.join(root, ".vercel", "output", "static", "assets"))).toBe(true);
+        expect(existsSync(path.join(root, ".vercel", "output", "functions", "mcp.func", "index.js"))).toBe(true);
+    });
+});
+//# sourceMappingURL=build-helpers.test.js.map