skybridge 0.0.0-dev.b3151dc → 0.0.0-dev.c3e09ae

package/README.md

@@ -1,25 +1,90 @@
+<div align="center">
+
 # Skybridge
 
-Skybridge is a framework for building ChatGPT apps. It provides 2 packages:
+**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
 ```
 
-## skybridge/server
+## 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
 
 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
+### 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
+**Vite plugin**
 
 The `skybridge/web` package comes with a Vite plugin that allows you to build your widgets as regular Vite apps.
 
@@ -32,9 +97,30 @@ export default defineConfig({
 });
 ```
 
+**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
+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()],
+});
+```

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/get-asset-url.d.ts

@@ -0,0 +1 @@
+export declare const getAssetUrl: (path: string) => string;

package/dist/src/web/get-asset-url.js

@@ -0,0 +1,2 @@
+export const getAssetUrl = (path) => new URL(path, import.meta.url).href;
+//# sourceMappingURL=get-asset-url.js.map

package/dist/src/web/get-asset-url.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-asset-url.js","sourceRoot":"","sources":["../../../src/web/get-asset-url.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,IAAY,EAAU,EAAE,CAClD,IAAI,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC"}

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

@@ -2,3 +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";
+export { getAssetUrl } from "./get-asset-url.js";

package/dist/src/web/index.js

@@ -2,4 +2,6 @@ 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";
+export { getAssetUrl } from "./get-asset-url.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;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,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,
+            ]));
+            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;YAEF,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,CAC9B,QAAQ,CAAC,cAAc,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC;gBACrC,IAAI,CAAC,KAAK,CAAC,0BAA0B,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC3C,IAAI;aACL,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.b3151dc",
+  "version": "0.0.0-dev.c3e09ae",
   "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",