skybridge 0.0.0-dev.8d4ea94 → 0.0.0-dev.8df527f

package/README.md

@@ -1,69 +1,3 @@
-<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
-
-```bash
-pnpm add skybridge
-```
-
-## Packages
-
-### skybridge/server
-
-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.
-
-### 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()],
-});
-```
-
-**Hooks**
-
-The `skybridge/web` package comes with a set of hooks to help you build your widgets.
-
-```ts
-import { useToolOutput } from "skybridge/web";
-
-// Initial data returned by the tool invocation on structuredOutput
-const toolOutput = useToolOutput();
-```
-
-## 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 node project named `web` and install the `skybridge` package
+Skybridge is a framework for building ChatGPT apps

package/dist/src/server/templates/development.hbs

@@ -0,0 +1,11 @@
+<script type="module">
+  import { injectIntoGlobalHook } from "{{serverUrl}}/@react-refresh";
+  injectIntoGlobalHook(window); window.$RefreshReg$ = () => {};
+  window.$RefreshSig$ = () => (type) => type;
+  window.__vite_plugin_react_preamble_installed__ = true;
+</script>
+<script type="module" src="{{serverUrl}}/@vite/client"></script>
+<div id="root"></div>
+<script type="module">
+  import('{{serverUrl}}/src/widgets/{{widgetName}}.tsx');
+</script>

package/dist/src/server/templates/production.hbs

@@ -0,0 +1,5 @@
+<div id="root"></div>
+<script type="module">
+  import('{{serverUrl}}/assets/{{widgetName}}.js');
+</script>
+<link rel="stylesheet" crossorigin href="{{serverUrl}}/assets/style.css" />

package/dist/src/web/index.d.ts

@@ -2,3 +2,4 @@ export { useOpenAiGlobal } from "./use-openai-global.js";
 export { useToolOutput } from "./use-tool-output.js";
 export * from "./types.js";
 export { mountWidget } from "./mount-widget.js";
+export { skybridge } from "./plugin.js";

package/dist/src/web/index.js

@@ -2,4 +2,5 @@ export { useOpenAiGlobal } from "./use-openai-global.js";
 export { useToolOutput } from "./use-tool-output.js";
 export * from "./types.js";
 export { mountWidget } from "./mount-widget.js";
+export { skybridge } from "./plugin.js";
 //# sourceMappingURL=index.js.map

package/dist/src/web/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/web/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/src/web/plugin.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "vite";
+export declare function skybridge(): Plugin;

package/dist/src/web/plugin.js

@@ -0,0 +1,30 @@
+export function skybridge() {
+    return {
+        name: "skybridge",
+        async config(config) {
+            // Dynamic imports to ensure Node modules are only loaded in Node.js context
+            const { globSync } = await import("node:fs");
+            const { resolve } = await import("node:path");
+            const projectRoot = config.root || process.cwd();
+            const widgetsPattern = resolve(projectRoot, "src/widgets/*.{js,ts,jsx,tsx,html}");
+            const input = Object.fromEntries(globSync(widgetsPattern).map((file) => [
+                file.match(/^src\/widgets\/(.+)\.tsx$/)?.[1] ?? file.slice(10, -3),
+                resolve(projectRoot, file),
+            ]));
+            return {
+                build: {
+                    minify: true,
+                    cssCodeSplit: false,
+                    rollupOptions: {
+                        input,
+                        output: {
+                            entryFileNames: "[name].js",
+                            assetFileNames: "[name][extname]",
+                        },
+                    },
+                },
+            };
+        },
+    };
+}
+//# sourceMappingURL=plugin.js.map

package/dist/src/web/plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.js","sourceRoot":"","sources":["../../../src/web/plugin.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,SAAS;IACvB,OAAO;QACL,IAAI,EAAE,WAAW;QAEjB,KAAK,CAAC,MAAM,CAAC,MAAM;YACjB,4EAA4E;YAC5E,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,MAAM,CAAC,SAAS,CAAC,CAAC;YAC7C,MAAM,EAAE,OAAO,EAAE,GAAG,MAAM,MAAM,CAAC,WAAW,CAAC,CAAC;YAE9C,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,IAAI,OAAO,CAAC,GAAG,EAAE,CAAC;YACjD,MAAM,cAAc,GAAG,OAAO,CAC5B,WAAW,EACX,oCAAoC,CACrC,CAAC;YACF,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC9B,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;gBACrC,IAAI,CAAC,KAAK,CAAC,2BAA2B,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;gBAClE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC;aAC3B,CAAC,CACH,CAAC;YAEF,OAAO;gBACL,KAAK,EAAE;oBACL,MAAM,EAAE,IAAI;oBACZ,YAAY,EAAE,KAAK;oBACnB,aAAa,EAAE;wBACb,KAAK;wBACL,MAAM,EAAE;4BACN,cAAc,EAAE,WAAW;4BAC3B,cAAc,EAAE,iBAAiB;yBAClC;qBACF;iBACF;aACF,CAAC;QACJ,CAAC;KACF,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "skybridge",
-  "version": "0.0.0-dev.8d4ea94",
+  "version": "0.0.0-dev.8df527f",
   "description": "Skybridge is a framework for building ChatGPT apps",
   "type": "module",
   "files": [
@@ -17,7 +17,8 @@
     }
   },
   "scripts": {
-    "build": "tsc",
+    "build": "tsc && pnpm run build:templates",
+    "build:templates": "cp -r src/server/templates dist/src/server/",
     "test": "vitest run --silent"
   },
   "keywords": [
@@ -44,10 +45,10 @@
     "@total-typescript/tsconfig": "^1.0.4",
     "@types/cors": "^2.8.19",
     "@types/express": "^5.0.3",
+    "@types/jsdom": "^21.1.6",
     "@types/node": "^22.15.30",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@types/jsdom": "^21.1.6",
     "@vitest/ui": "^2.1.8",
     "jsdom": "^25.0.1",
     "typescript": "^5.9.3",