skybridge 0.0.0-dev.d9ee984 → 0.0.0-dev.e31f406

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (69) hide show
  1. package/README.md +196 -1
  2. package/dist/{server → src/server}/index.d.ts +0 -1
  3. package/dist/{server → src/server}/index.js +0 -1
  4. package/dist/src/server/index.js.map +1 -0
  5. package/dist/src/server/server.js +45 -0
  6. package/dist/src/server/server.js.map +1 -0
  7. package/dist/src/server/templateHelper.d.ts +14 -0
  8. package/dist/src/server/templateHelper.js +37 -0
  9. package/dist/src/server/templateHelper.js.map +1 -0
  10. package/dist/src/server/templates/development.hbs +11 -0
  11. package/dist/src/server/templates/production.hbs +5 -0
  12. package/dist/{server → src/server}/widgetsDevServer.d.ts +5 -2
  13. package/dist/{server → src/server}/widgetsDevServer.js +5 -2
  14. package/dist/src/server/widgetsDevServer.js.map +1 -0
  15. package/dist/src/test/setup.d.ts +1 -0
  16. package/dist/src/test/setup.js +9 -0
  17. package/dist/src/test/setup.js.map +1 -0
  18. package/dist/src/test/utils.d.ts +28 -0
  19. package/dist/src/test/utils.js +43 -0
  20. package/dist/src/test/utils.js.map +1 -0
  21. package/dist/src/test/widget.test.d.ts +1 -0
  22. package/dist/src/test/widget.test.js +69 -0
  23. package/dist/src/test/widget.test.js.map +1 -0
  24. package/dist/{web → src/web}/index.d.ts +3 -0
  25. package/dist/src/web/index.js +8 -0
  26. package/dist/src/web/index.js.map +1 -0
  27. package/dist/src/web/mount-widget.js +14 -0
  28. package/dist/src/web/mount-widget.js.map +1 -0
  29. package/dist/src/web/plugin.d.ts +2 -0
  30. package/dist/src/web/plugin.js +30 -0
  31. package/dist/src/web/plugin.js.map +1 -0
  32. package/dist/{web → src/web}/types.d.ts +9 -1
  33. package/dist/src/web/types.js.map +1 -0
  34. package/dist/src/web/use-call-tool.d.ts +54 -0
  35. package/dist/src/web/use-call-tool.js +44 -0
  36. package/dist/src/web/use-call-tool.js.map +1 -0
  37. package/dist/src/web/use-call-tool.test.d.ts +1 -0
  38. package/dist/src/web/use-call-tool.test.js +66 -0
  39. package/dist/src/web/use-call-tool.test.js.map +1 -0
  40. package/dist/src/web/use-openai-global.js.map +1 -0
  41. package/dist/src/web/use-tool-output.js.map +1 -0
  42. package/dist/src/web/use-tool-response-metadata.d.ts +3 -0
  43. package/dist/src/web/use-tool-response-metadata.js +5 -0
  44. package/dist/src/web/use-tool-response-metadata.js.map +1 -0
  45. package/dist/vitest.config.d.ts +2 -0
  46. package/dist/vitest.config.js +9 -0
  47. package/dist/vitest.config.js.map +1 -0
  48. package/package.json +24 -12
  49. package/dist/server/index.js.map +0 -1
  50. package/dist/server/middleware.d.ts +0 -3
  51. package/dist/server/middleware.js +0 -47
  52. package/dist/server/middleware.js.map +0 -1
  53. package/dist/server/server.js +0 -70
  54. package/dist/server/server.js.map +0 -1
  55. package/dist/server/widgetsDevServer.js.map +0 -1
  56. package/dist/web/index.js +0 -5
  57. package/dist/web/index.js.map +0 -1
  58. package/dist/web/mount-widget.js +0 -10
  59. package/dist/web/mount-widget.js.map +0 -1
  60. package/dist/web/types.js.map +0 -1
  61. package/dist/web/use-openai-global.js.map +0 -1
  62. package/dist/web/use-tool-output.js.map +0 -1
  63. /package/dist/{server → src/server}/server.d.ts +0 -0
  64. /package/dist/{web → src/web}/mount-widget.d.ts +0 -0
  65. /package/dist/{web → src/web}/types.js +0 -0
  66. /package/dist/{web → src/web}/use-openai-global.d.ts +0 -0
  67. /package/dist/{web → src/web}/use-openai-global.js +0 -0
  68. /package/dist/{web → src/web}/use-tool-output.d.ts +0 -0
  69. /package/dist/{web → src/web}/use-tool-output.js +0 -0
package/README.md CHANGED
@@ -1,3 +1,198 @@
1
+ <div align="center">
2
+
1
3
  # Skybridge
2
4
 
3
- Skybridge is a framework for building ChatGPT apps
5
+ **Skybridge is the TypeScript framework for building ChatGPT apps**
6
+
7
+ [![By Alpic](https://img.shields.io/badge/Made%20by%20Alpic-f6ffed?logo=alpic)](https://alpic.ai)
8
+
9
+ ![NPM Downloads](https://img.shields.io/npm/dm/skybridge?color=e90060)
10
+ ![NPM Version](https://img.shields.io/npm/v/skybridge?color=e90060)
11
+ ![GitHub License](https://img.shields.io/github/license/alpic-ai/skybridge?color=e90060)
12
+
13
+ </div>
14
+
15
+ Skybridge comes with 2 packages:
16
+
17
+ - `skybridge/server`: A drop-in replacement of the `@modelcontextprotocol/sdk` official `McpServer` class with extra features for widget development.
18
+ - `skybridge/web`: A react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
19
+
20
+ ## Quick start
21
+
22
+ 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.
23
+
24
+ ## Installation
25
+
26
+ ```bash
27
+ pnpm add skybridge
28
+ ```
29
+
30
+ ## Concepts
31
+
32
+ ### Widgets
33
+
34
+ > 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.
35
+
36
+ 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.
37
+
38
+ 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:
39
+
40
+ _Project structure_
41
+
42
+ ```
43
+ server/
44
+ └── src/
45
+ └── index.ts // Register the widget with McpServer.widget()
46
+ web/
47
+ └── src/
48
+ └── widgets/
49
+ └── pokemon.tsx // Use the same widget name as the file name
50
+ ```
51
+
52
+ _server/src/index.ts_
53
+
54
+ ```ts
55
+ import { McpServer } from "skybridge/server";
56
+
57
+ const server = new McpServer();
58
+
59
+ server.widget(
60
+ "pokemon"
61
+ // Remaining arguments...
62
+ );
63
+ ```
64
+
65
+ _web/src/widgets/pokemon.tsx_
66
+
67
+ ```ts
68
+ import { mountWidget } from "skybridge/web";
69
+
70
+ const Pokemon: React.FunctionComponent = () => {
71
+ // Your React component code goes here...
72
+ };
73
+
74
+ mountWidget(<Pokemon />);
75
+ ```
76
+
77
+ ## Packages
78
+
79
+ ### skybridge/server
80
+
81
+ 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.
82
+
83
+ ### skybridge/web
84
+
85
+ The `skybridge/web` package is a react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
86
+
87
+ **Vite plugin**
88
+
89
+ The `skybridge/web` package comes with a Vite plugin that allows you to build your widgets as regular Vite apps.
90
+
91
+ ```ts
92
+ import { defineConfig } from "vite";
93
+ import { skybridge } from "skybridge/web";
94
+
95
+ export default defineConfig({
96
+ plugins: [skybridge()],
97
+ });
98
+ ```
99
+
100
+ **Hooks**
101
+
102
+ The `skybridge/web` package comes with a set of hooks to help you build your widgets :
103
+
104
+ - `useOpenAiGlobal`: A generic hook to get any global data from the OpenAI iFrame skybridge runtime (in `window.openai`).
105
+ - `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.
106
+ - `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.
107
+ - `useCallTool`: A @tanstack/react-query inspired hook to send make additional tool calls inside a widget.
108
+
109
+ _useOpenAiGlobal_
110
+
111
+ ```ts
112
+ import { useOpenAiGlobal } from "skybridge/web";
113
+
114
+ const theme = useOpenAiGlobal("theme");
115
+ ```
116
+
117
+ _useToolOutput_
118
+
119
+ ```ts
120
+ import { useToolOutput } from "skybridge/web";
121
+
122
+ const toolOutput = useToolOutput();
123
+ ```
124
+
125
+ _useToolResponseMetadata_
126
+
127
+ ```ts
128
+ import { useToolResponseMetadata } from "skybridge/web";
129
+
130
+ const toolResponseMetadata = useToolResponseMetadata();
131
+ ```
132
+
133
+ _useCallTool_ in synchronous mode
134
+
135
+ ```ts
136
+ import { useCallTool } from "skybridge/web";
137
+
138
+ export const TestTool: React.FunctionComponent = () => {
139
+ const { callTool, isPending } = useCallTool("myToolName");
140
+
141
+ return (
142
+ <div>
143
+ <button
144
+ disabled={isPending}
145
+ onClick={() => {
146
+ callTool({ input: "test input" }, {
147
+ onSuccess: (data) => {
148
+ alert("Tool returned: " + data);
149
+ },
150
+ });
151
+ >
152
+ Call Tool inside a widget
153
+ </button>
154
+ </div>
155
+ );
156
+ };
157
+ ```
158
+
159
+ _useCallTool_ in asynchronous mode
160
+
161
+ ```ts
162
+ import { useCallTool } from "skybridge/web";
163
+
164
+ export const TestTool: React.FunctionComponent = () => {
165
+ const { callToolAsync, isPending } = useCallTool("myToolName");
166
+
167
+ return (
168
+ <div>
169
+ <button
170
+ disabled={isPending}
171
+ onClick={async () => {
172
+ const data = await callToolAsync({ input: "test input" });
173
+ alert("Tool returned: " + data);
174
+ }}
175
+ >
176
+ Call Tool inside a widget
177
+ </button>
178
+ </div>
179
+ );
180
+ };
181
+ ```
182
+
183
+ ## Migrate your existing MCP server to a ChatGPT app
184
+
185
+ If you're already using the `@modelcontextprotocol/sdk` to build a MCP server, you can migrate to a ChatGPT app by following these steps:
186
+
187
+ 1. Replace your `McpServer` import from `@modelcontextprotocol/sdk` with the same import from `skybridge/server`
188
+ 2. Create a new vite project in a folder named `web` and install the `skybridge` package
189
+ 3. Replace the `vite.config.ts` file with the following:
190
+
191
+ ```ts
192
+ import { defineConfig } from "vite";
193
+ import { skybridge } from "skybridge/web";
194
+
195
+ export default defineConfig({
196
+ plugins: [skybridge()],
197
+ });
198
+ ```
@@ -1,3 +1,2 @@
1
1
  export { McpServer } from "./server.js";
2
2
  export { widgetsDevServer } from "./widgetsDevServer.js";
3
- export { mcp } from "./middleware.js";
@@ -1,4 +1,3 @@
1
1
  export { McpServer } from "./server.js";
2
2
  export { widgetsDevServer } from "./widgetsDevServer.js";
3
- export { mcp } from "./middleware.js";
4
3
  //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
@@ -0,0 +1,45 @@
1
+ import { McpServer as McpServerBase, } from "@modelcontextprotocol/sdk/server/mcp.js";
2
+ import { templateHelper } from "./templateHelper.js";
3
+ export class McpServer extends McpServerBase {
4
+ widget(name, resourceConfig, toolConfig, toolCallback) {
5
+ const uri = `ui://widgets/${name}.html`;
6
+ const resourceMetadata = { ...(resourceConfig._meta ?? {}) };
7
+ if (toolConfig.description !== undefined) {
8
+ resourceMetadata["openai/widgetDescription"] = toolConfig.description;
9
+ }
10
+ this.resource(name, uri, {
11
+ ...resourceConfig,
12
+ _meta: resourceMetadata,
13
+ }, async (_uri, extra) => {
14
+ const serverUrl = process.env.NODE_ENV === "production"
15
+ ? `https://${extra?.requestInfo?.headers?.["x-forwarded-host"] ??
16
+ extra?.requestInfo?.headers?.host}`
17
+ : `http://localhost:3000`;
18
+ const templateData = {
19
+ serverUrl,
20
+ widgetName: name,
21
+ };
22
+ const html = process.env.NODE_ENV === "production"
23
+ ? templateHelper.renderProduction(templateData)
24
+ : templateHelper.renderDevelopment(templateData);
25
+ return {
26
+ contents: [
27
+ {
28
+ uri,
29
+ mimeType: "text/html+skybridge",
30
+ text: html,
31
+ },
32
+ ],
33
+ };
34
+ });
35
+ const toolMeta = {
36
+ ...toolConfig._meta,
37
+ "openai/outputTemplate": uri,
38
+ };
39
+ this.registerTool(name, {
40
+ ...toolConfig,
41
+ _meta: toolMeta,
42
+ }, toolCallback);
43
+ }
44
+ }
45
+ //# sourceMappingURL=server.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"server.js","sourceRoot":"","sources":["../../../src/server/server.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,aAAa,GAE3B,MAAM,yCAAyC,CAAC;AAGjD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA4BrD,MAAM,OAAO,SAAU,SAAQ,aAAa;IAC1C,MAAM,CACJ,IAAY,EACZ,cAA+C,EAC/C,UAGC,EACD,YAAqC;QAErC,MAAM,GAAG,GAAG,gBAAgB,IAAI,OAAO,CAAC;QACxC,MAAM,gBAAgB,GAAiB,EAAE,GAAG,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;QAC3E,IAAI,UAAU,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;YACzC,gBAAgB,CAAC,0BAA0B,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC;QACxE,CAAC;QAED,IAAI,CAAC,QAAQ,CACX,IAAI,EACJ,GAAG,EACH;YACE,GAAG,cAAc;YACjB,KAAK,EAAE,gBAAgB;SACxB,EACD,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACpB,MAAM,SAAS,GACb,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;gBACnC,CAAC,CAAC,WACE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,kBAAkB,CAAC;oBACjD,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAC/B,EAAE;gBACJ,CAAC,CAAC,uBAAuB,CAAC;YAE9B,MAAM,YAAY,GAAG;gBACnB,SAAS;gBACT,UAAU,EAAE,IAAI;aACjB,CAAC;YAEF,MAAM,IAAI,GACR,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;gBACnC,CAAC,CAAC,cAAc,CAAC,gBAAgB,CAAC,YAAY,CAAC;gBAC/C,CAAC,CAAC,cAAc,CAAC,iBAAiB,CAAC,YAAY,CAAC,CAAC;YAErD,OAAO;gBACL,QAAQ,EAAE;oBACR;wBACE,GAAG;wBACH,QAAQ,EAAE,qBAAqB;wBAC/B,IAAI,EAAE,IAAI;qBACX;iBACF;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QAEF,MAAM,QAAQ,GAAa;YACzB,GAAG,UAAU,CAAC,KAAK;YACnB,uBAAuB,EAAE,GAAG;SAC7B,CAAC;QAEF,IAAI,CAAC,YAAY,CACf,IAAI,EACJ;YACE,GAAG,UAAU;YACb,KAAK,EAAE,QAAQ;SAChB,EACD,YAAY,CACb,CAAC;IACJ,CAAC;CACF"}
@@ -0,0 +1,14 @@
1
+ type TemplateData = {
2
+ serverUrl: string;
3
+ widgetName: string;
4
+ };
5
+ declare class TemplateHelper {
6
+ private templateCache;
7
+ private loadTemplate;
8
+ renderProduction(data: TemplateData): string;
9
+ renderDevelopment(data: TemplateData): string;
10
+ renderViteClient(data: TemplateData): string;
11
+ injectViteClient(html: string, data: TemplateData): string;
12
+ }
13
+ export declare const templateHelper: TemplateHelper;
14
+ export {};
@@ -0,0 +1,37 @@
1
+ import Handlebars from "handlebars";
2
+ import { readFileSync } from "node:fs";
3
+ import { join, dirname } from "node:path";
4
+ import { fileURLToPath } from "node:url";
5
+ const __filename = fileURLToPath(import.meta.url);
6
+ const __dirname = dirname(__filename);
7
+ class TemplateHelper {
8
+ templateCache = new Map();
9
+ loadTemplate(templateName) {
10
+ if (this.templateCache.has(templateName)) {
11
+ return this.templateCache.get(templateName);
12
+ }
13
+ const templatePath = join(__dirname, "templates", `${templateName}.hbs`);
14
+ const templateSource = readFileSync(templatePath, "utf-8");
15
+ const template = Handlebars.compile(templateSource);
16
+ this.templateCache.set(templateName, template);
17
+ return template;
18
+ }
19
+ renderProduction(data) {
20
+ const template = this.loadTemplate("production");
21
+ return template(data);
22
+ }
23
+ renderDevelopment(data) {
24
+ const template = this.loadTemplate("development");
25
+ return template(data);
26
+ }
27
+ renderViteClient(data) {
28
+ const template = this.loadTemplate("vite-client");
29
+ return template(data);
30
+ }
31
+ injectViteClient(html, data) {
32
+ const viteClientScript = this.renderViteClient(data);
33
+ return viteClientScript + html;
34
+ }
35
+ }
36
+ export const templateHelper = new TemplateHelper();
37
+ //# sourceMappingURL=templateHelper.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"templateHelper.js","sourceRoot":"","sources":["../../../src/server/templateHelper.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,UAAU,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClD,MAAM,SAAS,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAOtC,MAAM,cAAc;IACV,aAAa,GAAG,IAAI,GAAG,EAAsC,CAAC;IAE9D,YAAY,CAAC,YAAoB;QACvC,IAAI,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC;YACzC,OAAO,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAE,CAAC;QAC/C,CAAC;QAED,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,EAAE,WAAW,EAAE,GAAG,YAAY,MAAM,CAAC,CAAC;QACzE,MAAM,cAAc,GAAG,YAAY,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;QAC3D,MAAM,QAAQ,GAAG,UAAU,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;QAEpD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QAC/C,OAAO,QAAQ,CAAC;IAClB,CAAC;IAED,gBAAgB,CAAC,IAAkB;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACjD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,iBAAiB,CAAC,IAAkB;QAClC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QAClD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,gBAAgB,CAAC,IAAkB;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC;QAClD,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxB,CAAC;IAED,gBAAgB,CAAC,IAAY,EAAE,IAAkB;QAC/C,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;QACrD,OAAO,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;CACF;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,cAAc,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ <script type="module">
2
+ import { injectIntoGlobalHook } from "{{serverUrl}}/@react-refresh";
3
+ injectIntoGlobalHook(window); window.$RefreshReg$ = () => {};
4
+ window.$RefreshSig$ = () => (type) => type;
5
+ window.__vite_plugin_react_preamble_installed__ = true;
6
+ </script>
7
+ <script type="module" src="{{serverUrl}}/@vite/client"></script>
8
+ <div id="root"></div>
9
+ <script type="module">
10
+ import('{{serverUrl}}/src/widgets/{{widgetName}}.tsx');
11
+ </script>
@@ -0,0 +1,5 @@
1
+ <div id="root"></div>
2
+ <script type="module">
3
+ import('{{serverUrl}}/assets/{{widgetName}}.js');
4
+ </script>
5
+ <link rel="stylesheet" crossorigin href="{{serverUrl}}/assets/style.css" />
@@ -1,9 +1,12 @@
1
1
  import { type RequestHandler } from "express";
2
2
  /**
3
- * Install Vite dev server when env is not production
3
+ * Install Vite dev server
4
4
  * This router MUST be installed at the application root, like so:
5
5
  *
6
6
  * const app = express();
7
- * app.use(await widgetsRouter());
7
+ *
8
+ * if (env.NODE_ENV !== "production") {
9
+ * app.use(await widgetsRouter());
10
+ * }
8
11
  */
9
12
  export declare const widgetsDevServer: () => Promise<RequestHandler>;
@@ -2,11 +2,14 @@ import express, {} from "express";
2
2
  import cors from "cors";
3
3
  import path from "node:path";
4
4
  /**
5
- * Install Vite dev server when env is not production
5
+ * Install Vite dev server
6
6
  * This router MUST be installed at the application root, like so:
7
7
  *
8
8
  * const app = express();
9
- * app.use(await widgetsRouter());
9
+ *
10
+ * if (env.NODE_ENV !== "production") {
11
+ * app.use(await widgetsRouter());
12
+ * }
10
13
  */
11
14
  export const widgetsDevServer = async () => {
12
15
  const router = express.Router();
@@ -0,0 +1 @@
1
+ {"version":3,"file":"widgetsDevServer.js","sourceRoot":"","sources":["../../../src/server/widgetsDevServer.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,EAAE,EAAuB,MAAM,SAAS,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,IAA6B,EAAE;IAClE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAEhC,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,GAChE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC;IACvB,MAAM,aAAa,GAAG,sBAAsB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,MAAM,kBAAkB,CAC3C,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,EACzC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EACvC,UAAU,CACX,CAAC;IAEF,+DAA+D;IAC/D,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,MAAM,IAAI,EAAE,CAAC;IAEpE,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC;QAC9B,GAAG,SAAS;QACZ,UAAU,EAAE,KAAK,EAAE,kFAAkF;QACrG,OAAO,EAAE,QAAQ;QACjB,MAAM,EAAE;YACN,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;SACrB;QACD,IAAI,EAAE,UAAU;QAChB,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC;SACvC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IACnB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAElC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,9 @@
1
+ import { vi } from "vitest";
2
+ // Mock console methods to avoid noise in tests
3
+ global.console = {
4
+ ...console,
5
+ error: vi.fn(),
6
+ warn: vi.fn(),
7
+ log: vi.fn(),
8
+ };
9
+ //# sourceMappingURL=setup.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"setup.js","sourceRoot":"","sources":["../../../src/test/setup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE5B,+CAA+C;AAC/C,MAAM,CAAC,OAAO,GAAG;IACf,GAAG,OAAO;IACV,KAAK,EAAE,EAAE,CAAC,EAAE,EAAE;IACd,IAAI,EAAE,EAAE,CAAC,EAAE,EAAE;IACb,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;CACb,CAAC"}
@@ -0,0 +1,28 @@
1
+ import { type MockInstance } from "vitest";
2
+ import { McpServer } from "../server/server.js";
3
+ /**
4
+ * Creates a real McpServer instance for testing
5
+ */
6
+ export declare function createMockMcpServer(): {
7
+ server: McpServer;
8
+ mockResource: MockInstance<McpServer["resource"]>;
9
+ mockRegisterTool: MockInstance<McpServer["registerTool"]>;
10
+ };
11
+ /**
12
+ * Mock extra parameter for resource callback
13
+ */
14
+ export declare function createMockExtra(host: string): {
15
+ requestInfo: {
16
+ headers: {
17
+ host: string;
18
+ };
19
+ };
20
+ };
21
+ /**
22
+ * Sets up environment variables for testing
23
+ */
24
+ export declare function setTestEnv(env: Record<string, string>): void;
25
+ /**
26
+ * Resets environment variables
27
+ */
28
+ export declare function resetTestEnv(): void;
@@ -0,0 +1,43 @@
1
+ import { vi } from "vitest";
2
+ import { McpServer, McpServer as McpServerBase } from "../server/server.js";
3
+ /**
4
+ * Creates a real McpServer instance for testing
5
+ */
6
+ export function createMockMcpServer() {
7
+ // Create a real McpServer instance
8
+ const server = new McpServer({
9
+ name: "alpic-openai-app",
10
+ version: "0.0.1",
11
+ }, { capabilities: {} });
12
+ // Mock the underlying methods to track calls
13
+ const mockResource = vi.spyOn(server, "resource");
14
+ const mockRegisterTool = vi.spyOn(server, "registerTool");
15
+ return {
16
+ server,
17
+ mockResource,
18
+ mockRegisterTool,
19
+ };
20
+ }
21
+ /**
22
+ * Mock extra parameter for resource callback
23
+ */
24
+ export function createMockExtra(host) {
25
+ return {
26
+ requestInfo: {
27
+ headers: { host },
28
+ },
29
+ };
30
+ }
31
+ /**
32
+ * Sets up environment variables for testing
33
+ */
34
+ export function setTestEnv(env) {
35
+ Object.assign(process.env, env);
36
+ }
37
+ /**
38
+ * Resets environment variables
39
+ */
40
+ export function resetTestEnv() {
41
+ delete process.env.NODE_ENV;
42
+ }
43
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/test/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAqB,MAAM,QAAQ,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,SAAS,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE5E;;GAEG;AACH,MAAM,UAAU,mBAAmB;IAKjC,mCAAmC;IACnC,MAAM,MAAM,GAAG,IAAI,SAAS,CAC1B;QACE,IAAI,EAAE,kBAAkB;QACxB,OAAO,EAAE,OAAO;KACjB,EACD,EAAE,YAAY,EAAE,EAAE,EAAE,CACrB,CAAC;IAEF,6CAA6C;IAC7C,MAAM,YAAY,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IAClD,MAAM,gBAAgB,GAAG,EAAE,CAAC,KAAK,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAE1D,OAAO;QACL,MAAM;QACN,YAAY;QACZ,gBAAgB;KACjB,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,IAAY;IAC1C,OAAO;QACL,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE;SAClB;KACF,CAAC;AACJ,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,GAA2B;IACpD,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;AAClC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,YAAY;IAC1B,OAAO,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;AAC9B,CAAC"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,69 @@
1
+ import { describe, it, expect, vi, beforeEach, afterEach, } from "vitest";
2
+ import { McpServer } from "../server/server.js";
3
+ import { createMockMcpServer, createMockExtra, setTestEnv, resetTestEnv, } from "./utils.js";
4
+ describe("McpServer.widget", () => {
5
+ let server;
6
+ let mockResource;
7
+ let mockRegisterTool;
8
+ beforeEach(() => {
9
+ ({ server, mockResource, mockRegisterTool } = createMockMcpServer());
10
+ });
11
+ afterEach(() => {
12
+ vi.clearAllMocks();
13
+ resetTestEnv();
14
+ });
15
+ it("should generate correct HTML for development mode", async () => {
16
+ setTestEnv({ NODE_ENV: "development" });
17
+ const mockToolCallback = vi.fn();
18
+ const mockResourceConfig = { description: "Test widget" };
19
+ const mockToolConfig = { description: "Test tool" };
20
+ server.widget("my-widget", mockResourceConfig, mockToolConfig, mockToolCallback);
21
+ // Get the resource callback function
22
+ const resourceCallback = mockResource.mock.calls[0]?.[3];
23
+ expect(resourceCallback).toBeDefined();
24
+ const serverUrl = "http://localhost:3000";
25
+ const mockExtra = createMockExtra("__not_used__");
26
+ const result = await resourceCallback(new URL("ui://widgets/my-widget.html"), mockExtra);
27
+ expect(result).toEqual({
28
+ contents: [
29
+ {
30
+ uri: "ui://widgets/my-widget.html",
31
+ mimeType: "text/html+skybridge",
32
+ text: expect.stringContaining('<div id="root"></div>'),
33
+ },
34
+ ],
35
+ });
36
+ // Check development-specific content
37
+ expect(result.contents[0]?.text).toContain(serverUrl + "/@react-refresh");
38
+ expect(result.contents[0]?.text).toContain(serverUrl + "/@vite/client");
39
+ expect(result.contents[0]?.text).toContain(serverUrl + "/src/widgets/my-widget.tsx");
40
+ });
41
+ it("should generate correct HTML for production mode", async () => {
42
+ setTestEnv({ NODE_ENV: "production" });
43
+ const mockToolCallback = vi.fn();
44
+ const mockResourceConfig = { description: "Test widget" };
45
+ const mockToolConfig = { description: "Test tool" };
46
+ server.widget("my-widget", mockResourceConfig, mockToolConfig, mockToolCallback);
47
+ // Get the resource callback function
48
+ const resourceCallback = mockResource.mock.calls[0]?.[3];
49
+ expect(resourceCallback).toBeDefined();
50
+ const serverUrl = "https://myapp.com";
51
+ const mockExtra = createMockExtra(serverUrl);
52
+ const result = await resourceCallback(new URL("ui://widgets/my-widget.html"), mockExtra);
53
+ expect(result).toEqual({
54
+ contents: [
55
+ {
56
+ uri: "ui://widgets/my-widget.html",
57
+ mimeType: "text/html+skybridge",
58
+ text: expect.stringContaining('<div id="root"></div>'),
59
+ },
60
+ ],
61
+ });
62
+ // Check production-specific content
63
+ expect(result.contents[0]?.text).not.toContain(serverUrl + "@react-refresh");
64
+ expect(result.contents[0]?.text).not.toContain(serverUrl + "@vite/client");
65
+ expect(result.contents[0]?.text).toContain(serverUrl + "/assets/my-widget.js");
66
+ expect(result.contents[0]?.text).toContain(serverUrl + "/assets/style.css");
67
+ });
68
+ });
69
+ //# sourceMappingURL=widget.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"widget.test.js","sourceRoot":"","sources":["../../../src/test/widget.test.ts"],"names":[],"mappings":"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"}
@@ -1,4 +1,7 @@
1
1
  export { useOpenAiGlobal } from "./use-openai-global.js";
2
2
  export { useToolOutput } from "./use-tool-output.js";
3
+ export { useToolResponseMetadata } from "./use-tool-response-metadata.js";
4
+ export { useCallTool } from "./use-call-tool.js";
3
5
  export * from "./types.js";
4
6
  export { mountWidget } from "./mount-widget.js";
7
+ export { skybridge } from "./plugin.js";
@@ -0,0 +1,8 @@
1
+ export { useOpenAiGlobal } from "./use-openai-global.js";
2
+ export { useToolOutput } from "./use-tool-output.js";
3
+ export { useToolResponseMetadata } from "./use-tool-response-metadata.js";
4
+ export { useCallTool } from "./use-call-tool.js";
5
+ export * from "./types.js";
6
+ export { mountWidget } from "./mount-widget.js";
7
+ export { skybridge } from "./plugin.js";
8
+ //# sourceMappingURL=index.js.map
@@ -0,0 +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,OAAO,EAAE,uBAAuB,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,cAAc,YAAY,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
@@ -0,0 +1,14 @@
1
+ import { createElement, StrictMode } from "react";
2
+ import { createRoot } from "react-dom/client";
3
+ let rootInstance = null;
4
+ export const mountWidget = (component) => {
5
+ const rootElement = document.getElementById("root");
6
+ if (!rootElement) {
7
+ throw new Error("Root element not found");
8
+ }
9
+ if (!rootInstance) {
10
+ rootInstance = createRoot(rootElement);
11
+ }
12
+ rootInstance.render(createElement(StrictMode, null, component));
13
+ };
14
+ //# sourceMappingURL=mount-widget.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"mount-widget.js","sourceRoot":"","sources":["../../../src/web/mount-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,UAAU,EAAa,MAAM,kBAAkB,CAAC;AAEzD,IAAI,YAAY,GAAgB,IAAI,CAAC;AAErC,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAA0B,EAAE,EAAE;IACxD,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpD,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC5C,CAAC;IAED,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,YAAY,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACzC,CAAC;IAED,YAAY,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AAClE,CAAC,CAAC"}
@@ -0,0 +1,2 @@
1
+ import type { Plugin } from "vite";
2
+ export declare function skybridge(): Plugin;
@@ -0,0 +1,30 @@
1
+ export function skybridge() {
2
+ return {
3
+ name: "skybridge",
4
+ async config(config) {
5
+ // Dynamic imports to ensure Node modules are only loaded in Node.js context
6
+ const { globSync } = await import("node:fs");
7
+ const { resolve } = await import("node:path");
8
+ const projectRoot = config.root || process.cwd();
9
+ const widgetsPattern = resolve(projectRoot, "src/widgets/*.{js,ts,jsx,tsx,html}");
10
+ const input = Object.fromEntries(globSync(widgetsPattern).map((file) => [
11
+ file.match(/src\/widgets\/(.+)\.tsx$/)?.[1],
12
+ file,
13
+ ]));
14
+ return {
15
+ build: {
16
+ minify: true,
17
+ cssCodeSplit: false,
18
+ rollupOptions: {
19
+ input,
20
+ output: {
21
+ entryFileNames: "[name].js",
22
+ assetFileNames: "[name][extname]",
23
+ },
24
+ },
25
+ },
26
+ };
27
+ },
28
+ };
29
+ }
30
+ //# sourceMappingURL=plugin.js.map
@@ -0,0 +1 @@
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"}
@@ -38,12 +38,20 @@ export type OpenAiGlobals<ToolInput extends UnknownObject = UnknownObject, ToolO
38
38
  toolResponseMetadata: ToolResponseMetadata | null;
39
39
  widgetState: WidgetState | null;
40
40
  };
41
+ export type CallToolArgs = Record<string, unknown> | null;
41
42
  export type CallToolResponse = {
43
+ content: {
44
+ type: "text";
45
+ text: string;
46
+ }[];
47
+ structuredContent: Record<string, unknown>;
48
+ isError: boolean;
42
49
  result: string;
50
+ meta: Record<string, unknown>;
43
51
  };
44
52
  type API<WidgetState extends UnknownObject> = {
45
53
  /** Calls a tool on your MCP. Returns the full response. */
46
- callTool: (name: string, args: Record<string, unknown>) => Promise<CallToolResponse>;
54
+ callTool: <ToolArgs extends CallToolArgs = null, ToolResponse extends CallToolResponse = CallToolResponse>(name: string, args: ToolArgs) => Promise<ToolResponse>;
47
55
  /** Triggers a followup turn in the ChatGPT conversation */
48
56
  sendFollowUpMessage: (args: {
49
57
  prompt: string;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/web/types.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,wBAAwB,GAAG,sBAAsB,CAAC;AAC/D,MAAM,OAAO,iBAAkB,SAAQ,WAErC;IACkB,IAAI,GAAG,wBAAwB,CAAC;CACnD;AA2ED,sDAAsD;AACtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AAC3D,MAAM,OAAO,eAAgB,SAAQ,WAEnC;IACkB,IAAI,GAAG,sBAAsB,CAAC;CACjD"}
@@ -0,0 +1,54 @@
1
+ import type { CallToolArgs, CallToolResponse } from "./types.js";
2
+ export declare const useCallTool: <ToolArgs extends CallToolArgs = null, ToolResponse extends CallToolResponse = CallToolResponse>(name: string) => {
3
+ callTool: (toolArgs: ToolArgs, sideEffects?: {
4
+ onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
5
+ onError?: (error: unknown, toolArgs: ToolArgs) => void;
6
+ }) => void;
7
+ callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
8
+ status: "idle";
9
+ isIdle: true;
10
+ isPending: false;
11
+ isSuccess: false;
12
+ isError: false;
13
+ data: undefined;
14
+ error: undefined;
15
+ } | {
16
+ callTool: (toolArgs: ToolArgs, sideEffects?: {
17
+ onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
18
+ onError?: (error: unknown, toolArgs: ToolArgs) => void;
19
+ }) => void;
20
+ callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
21
+ status: "pending";
22
+ isIdle: false;
23
+ isPending: true;
24
+ isSuccess: false;
25
+ isError: false;
26
+ data: undefined;
27
+ error: undefined;
28
+ } | {
29
+ callTool: (toolArgs: ToolArgs, sideEffects?: {
30
+ onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
31
+ onError?: (error: unknown, toolArgs: ToolArgs) => void;
32
+ }) => void;
33
+ callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
34
+ status: "error";
35
+ isIdle: false;
36
+ isPending: false;
37
+ isSuccess: false;
38
+ isError: true;
39
+ data: undefined;
40
+ error: unknown;
41
+ } | {
42
+ callTool: (toolArgs: ToolArgs, sideEffects?: {
43
+ onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
44
+ onError?: (error: unknown, toolArgs: ToolArgs) => void;
45
+ }) => void;
46
+ callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
47
+ status: "success";
48
+ isIdle: false;
49
+ isPending: false;
50
+ isSuccess: true;
51
+ isError: false;
52
+ data: ToolResponse;
53
+ error: undefined;
54
+ };
@@ -0,0 +1,44 @@
1
+ import { useState } from "react";
2
+ export const useCallTool = (name) => {
3
+ const [{ status, data, error }, setCallToolState] = useState({ status: "idle", data: undefined, error: undefined });
4
+ const callToolAsync = async (toolArgs) => {
5
+ setCallToolState({ status: "pending", data: undefined, error: undefined });
6
+ try {
7
+ const data = await window.openai.callTool(name, toolArgs);
8
+ setCallToolState({ status: "success", data, error: undefined });
9
+ return data;
10
+ }
11
+ catch (error) {
12
+ setCallToolState({ status: "error", data: undefined, error });
13
+ throw error;
14
+ }
15
+ };
16
+ const callTool = (toolArgs, sideEffects) => {
17
+ callToolAsync(toolArgs)
18
+ .then((data) => {
19
+ if (sideEffects?.onSuccess) {
20
+ sideEffects.onSuccess(data, toolArgs);
21
+ }
22
+ })
23
+ .catch((error) => {
24
+ if (sideEffects?.onError) {
25
+ sideEffects.onError(error, toolArgs);
26
+ }
27
+ });
28
+ };
29
+ const callToolState = {
30
+ status,
31
+ data,
32
+ error,
33
+ isIdle: status === "idle",
34
+ isPending: status === "pending",
35
+ isSuccess: status === "success",
36
+ isError: status === "error",
37
+ };
38
+ return {
39
+ ...callToolState,
40
+ callTool,
41
+ callToolAsync,
42
+ };
43
+ };
44
+ //# sourceMappingURL=use-call-tool.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-call-tool.js","sourceRoot":"","sources":["../../../src/web/use-call-tool.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AA4BjC,MAAM,CAAC,MAAM,WAAW,GAAG,CAIzB,IAAY,EACZ,EAAE;IACF,MAAM,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAK1D,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAEzD,MAAM,aAAa,GAAG,KAAK,EAAE,QAAkB,EAAE,EAAE;QACjD,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC3E,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,CACvC,IAAI,EACJ,QAAQ,CACT,CAAC;YACF,gBAAgB,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;YAEhE,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,gBAAgB,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9D,MAAM,KAAK,CAAC;QACd,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,CACf,QAAkB,EAClB,WAGC,EACD,EAAE;QACF,aAAa,CAAC,QAAQ,CAAC;aACpB,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE;YACb,IAAI,WAAW,EAAE,SAAS,EAAE,CAAC;gBAC3B,WAAW,CAAC,SAAS,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;YACxC,CAAC;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACf,IAAI,WAAW,EAAE,OAAO,EAAE,CAAC;gBACzB,WAAW,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;YACvC,CAAC;QACH,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG;QACpB,MAAM;QACN,IAAI;QACJ,KAAK;QACL,MAAM,EAAE,MAAM,KAAK,MAAM;QACzB,SAAS,EAAE,MAAM,KAAK,SAAS;QAC/B,SAAS,EAAE,MAAM,KAAK,SAAS;QAC/B,OAAO,EAAE,MAAM,KAAK,OAAO;KACG,CAAC;IAEjC,OAAO;QACL,GAAG,aAAa;QAChB,QAAQ;QACR,aAAa;KACd,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,66 @@
1
+ import { useCallTool } from "./use-call-tool.js";
2
+ import { describe, it, expect, vi, beforeEach, afterEach, } from "vitest";
3
+ import { renderHook, act, waitFor } from "@testing-library/react";
4
+ describe("useCallTool - onSuccess callback", () => {
5
+ let OpenaiMock;
6
+ beforeEach(() => {
7
+ OpenaiMock = {
8
+ callTool: vi.fn(),
9
+ };
10
+ vi.stubGlobal("openai", OpenaiMock);
11
+ });
12
+ afterEach(() => {
13
+ vi.unstubAllGlobals();
14
+ vi.resetAllMocks();
15
+ });
16
+ const toolName = "test-tool";
17
+ const args = { input: "test input" };
18
+ const data = {
19
+ content: [{ type: "text", text: "test result" }],
20
+ structuredContent: { result: "test" },
21
+ isError: false,
22
+ result: "test result",
23
+ meta: {},
24
+ };
25
+ const error = new Error("test error");
26
+ it("should call window.openai.callTool with correct arguments", async () => {
27
+ const { result } = renderHook(() => useCallTool(toolName));
28
+ act(() => {
29
+ result.current.callTool(args);
30
+ });
31
+ expect(OpenaiMock.callTool).toHaveBeenCalledWith(toolName, args);
32
+ });
33
+ it("should call onSuccess callback with correct data and toolArgs on successful execution", async () => {
34
+ const onSuccess = vi.fn();
35
+ const onError = vi.fn();
36
+ OpenaiMock.callTool.mockResolvedValueOnce(data);
37
+ const { result } = renderHook(() => useCallTool(toolName));
38
+ act(() => {
39
+ result.current.callTool(args, {
40
+ onSuccess,
41
+ onError,
42
+ });
43
+ });
44
+ await waitFor(() => {
45
+ expect(onSuccess).toHaveBeenCalledWith(data, args);
46
+ expect(onError).not.toHaveBeenCalled();
47
+ });
48
+ });
49
+ it("should call onError callback with error and toolArgs on failed execution", async () => {
50
+ const onSuccess = vi.fn();
51
+ const onError = vi.fn();
52
+ OpenaiMock.callTool.mockRejectedValueOnce(error);
53
+ const { result } = renderHook(() => useCallTool(toolName));
54
+ act(() => {
55
+ result.current.callTool(args, {
56
+ onSuccess,
57
+ onError,
58
+ });
59
+ });
60
+ await waitFor(() => {
61
+ expect(onSuccess).not.toHaveBeenCalled();
62
+ expect(onError).toHaveBeenCalledWith(error, args);
63
+ });
64
+ });
65
+ });
66
+ //# sourceMappingURL=use-call-tool.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-call-tool.test.js","sourceRoot":"","sources":["../../../src/web/use-call-tool.test.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-openai-global.js","sourceRoot":"","sources":["../../../src/web/use-openai-global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAEzF,MAAM,UAAU,eAAe,CAAgC,GAAM;IACnE,OAAO,oBAAoB,CACzB,CAAC,QAAQ,EAAE,EAAE;QACX,MAAM,eAAe,GAAG,CAAC,KAAsB,EAAE,EAAE;YACjD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACxC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YACvD,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,eAAe,EAAE;YAC/D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EACD,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAC3B,CAAC;AACJ,CAAC"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-tool-output.js","sourceRoot":"","sources":["../../../src/web/use-tool-output.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,UAAU,aAAa;IAC3B,OAAO,eAAe,CAAC,YAAY,CAAC,CAAC;AACvC,CAAC"}
@@ -0,0 +1,3 @@
1
+ export declare function useToolResponseMetadata(): {
2
+ [x: string]: unknown;
3
+ } | null | undefined;
@@ -0,0 +1,5 @@
1
+ import { useOpenAiGlobal } from "./use-openai-global.js";
2
+ export function useToolResponseMetadata() {
3
+ return useOpenAiGlobal("toolResponseMetadata");
4
+ }
5
+ //# sourceMappingURL=use-tool-response-metadata.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-tool-response-metadata.js","sourceRoot":"","sources":["../../../src/web/use-tool-response-metadata.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,UAAU,uBAAuB;IACrC,OAAO,eAAe,CAAC,sBAAsB,CAAC,CAAC;AACjD,CAAC"}
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vite").UserConfig;
2
+ export default _default;
@@ -0,0 +1,9 @@
1
+ import { defineConfig } from "vitest/config";
2
+ export default defineConfig({
3
+ test: {
4
+ environment: "jsdom",
5
+ globals: true,
6
+ setupFiles: ["./src/test/setup.ts"],
7
+ },
8
+ });
9
+ //# sourceMappingURL=vitest.config.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"vitest.config.js","sourceRoot":"","sources":["../vitest.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAe,YAAY,CAAC;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,OAAO;QACpB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,CAAC,qBAAqB,CAAC;KACpC;CACF,CAAC,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "skybridge",
3
- "version": "0.0.0-dev.d9ee984",
3
+ "version": "0.0.0-dev.e31f406",
4
4
  "description": "Skybridge is a framework for building ChatGPT apps",
5
5
  "type": "module",
6
6
  "files": [
@@ -8,16 +8,21 @@
8
8
  ],
9
9
  "exports": {
10
10
  "./server": {
11
- "types": "./dist/server/index.d.ts",
12
- "default": "./dist/server/index.js"
11
+ "types": "./dist/src/server/index.d.ts",
12
+ "default": "./dist/src/server/index.js"
13
13
  },
14
14
  "./web": {
15
- "types": "./dist/web/index.d.ts",
16
- "default": "./dist/web/index.js"
15
+ "types": "./dist/src/web/index.d.ts",
16
+ "default": "./dist/src/web/index.js"
17
17
  }
18
18
  },
19
19
  "scripts": {
20
- "build": "tsc"
20
+ "build": "tsc && pnpm run build:templates",
21
+ "build:templates": "cp -r src/server/templates dist/src/server/",
22
+ "test": "vitest run --silent",
23
+ "docs:dev": "pnpm --filter @skybridge/docs start",
24
+ "docs:build": "pnpm --filter @skybridge/docs build",
25
+ "docs:serve": "pnpm --filter @skybridge/docs serve"
21
26
  },
22
27
  "keywords": [
23
28
  "chatgpt",
@@ -28,24 +33,31 @@
28
33
  "author": "Frédéric Barthelet",
29
34
  "license": "ISC",
30
35
  "peerDependencies": {
31
- "react": ">=19.0.0",
32
- "react-dom": ">=19.0.0"
36
+ "react": ">=18.0.0",
37
+ "react-dom": ">=18.0.0"
33
38
  },
34
39
  "dependencies": {
35
40
  "@modelcontextprotocol/sdk": "^1.20.0",
36
- "zod": "^3.25.51",
37
41
  "cors": "^2.8.5",
38
42
  "express": "^5.1.0",
39
- "vite": "^7.1.9"
43
+ "handlebars": "^4.7.8",
44
+ "vite": "^7.1.11",
45
+ "zod": "^3.25.51"
40
46
  },
41
47
  "devDependencies": {
48
+ "@testing-library/dom": "^10.4.1",
49
+ "@testing-library/react": "^16.3.0",
42
50
  "@total-typescript/tsconfig": "^1.0.4",
43
51
  "@types/cors": "^2.8.19",
44
52
  "@types/express": "^5.0.3",
53
+ "@types/jsdom": "^21.1.6",
45
54
  "@types/node": "^22.15.30",
46
- "@types/react-dom": "^19.2.2",
47
55
  "@types/react": "^19.2.2",
48
- "typescript": "^5.9.3"
56
+ "@types/react-dom": "^19.2.2",
57
+ "@vitest/ui": "^2.1.8",
58
+ "jsdom": "^25.0.1",
59
+ "typescript": "^5.9.3",
60
+ "vitest": "^2.1.8"
49
61
  },
50
62
  "packageManager": "pnpm@10.17.1"
51
63
  }
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC"}
@@ -1,3 +0,0 @@
1
- import { type Request, type Response, type NextFunction } from "express";
2
- import type { McpServer } from "./server.js";
3
- export declare const mcp: (server: McpServer) => (req: Request, res: Response, next: NextFunction) => Promise<void>;
@@ -1,47 +0,0 @@
1
- import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
2
- import {} from "express";
3
- export const mcp = (server) => async (req, res, next) => {
4
- // Only handle requests to the /mcp path
5
- if (req.path !== "/mcp") {
6
- return next();
7
- }
8
- if (req.method === "POST") {
9
- try {
10
- const transport = new StreamableHTTPServerTransport({
11
- sessionIdGenerator: undefined,
12
- });
13
- res.on("close", () => {
14
- transport.close();
15
- });
16
- await server.connect(transport);
17
- await transport.handleRequest(req, res, req.body);
18
- }
19
- catch (error) {
20
- console.error("Error handling MCP request:", error);
21
- if (!res.headersSent) {
22
- res.status(500).json({
23
- jsonrpc: "2.0",
24
- error: {
25
- code: -32603,
26
- message: "Internal server error",
27
- },
28
- id: null,
29
- });
30
- }
31
- }
32
- }
33
- else if (req.method === "GET" || req.method === "DELETE") {
34
- res.writeHead(405).end(JSON.stringify({
35
- jsonrpc: "2.0",
36
- error: {
37
- code: -32000,
38
- message: "Method not allowed.",
39
- },
40
- id: null,
41
- }));
42
- }
43
- else {
44
- next();
45
- }
46
- };
47
- //# sourceMappingURL=middleware.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"middleware.js","sourceRoot":"","sources":["../../src/server/middleware.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,oDAAoD,CAAC;AACnG,OAAO,EAAkD,MAAM,SAAS,CAAC;AAIzE,MAAM,CAAC,MAAM,GAAG,GAAG,CAAC,MAAiB,EAAE,EAAE,CAAC,KAAK,EAAE,GAAY,EAAE,GAAa,EAAE,IAAkB,EAAE,EAAE;IAClG,wCAAwC;IACxC,IAAI,GAAG,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QACxB,OAAO,IAAI,EAAE,CAAC;IAChB,CAAC;IAED,IAAI,GAAG,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;QAC1B,IAAI,CAAC;YACH,MAAM,SAAS,GAAG,IAAI,6BAA6B,CAAC;gBAClD,kBAAkB,EAAE,SAAS;aAC9B,CAAC,CAAC;YAEH,GAAG,CAAC,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;gBACnB,SAAS,CAAC,KAAK,EAAE,CAAC;YACpB,CAAC,CAAC,CAAC;YAEH,MAAM,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;YAEhC,MAAM,SAAS,CAAC,aAAa,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;QACpD,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;YACpD,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC;gBACrB,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC;oBACnB,OAAO,EAAE,KAAK;oBACd,KAAK,EAAE;wBACL,IAAI,EAAE,CAAC,KAAK;wBACZ,OAAO,EAAE,uBAAuB;qBACjC;oBACD,EAAE,EAAE,IAAI;iBACT,CAAC,CAAC;YACL,CAAC;QACH,CAAC;IACH,CAAC;SAAM,IAAI,GAAG,CAAC,MAAM,KAAK,KAAK,IAAI,GAAG,CAAC,MAAM,KAAK,QAAQ,EAAE,CAAC;QAC3D,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,CACpB,IAAI,CAAC,SAAS,CAAC;YACb,OAAO,EAAE,KAAK;YACd,KAAK,EAAE;gBACL,IAAI,EAAE,CAAC,KAAK;gBACZ,OAAO,EAAE,qBAAqB;aAC/B;YACD,EAAE,EAAE,IAAI;SACT,CAAC,CACH,CAAC;IACJ,CAAC;SAAM,CAAC;QACN,IAAI,EAAE,CAAC;IACT,CAAC;AACH,CAAC,CAAC"}
@@ -1,70 +0,0 @@
1
- import { McpServer as McpServerBase } from "@modelcontextprotocol/sdk/server/mcp.js";
2
- export class McpServer extends McpServerBase {
3
- widget(name, resourceConfig, toolConfig, toolCallback) {
4
- const uri = `ui://widgets/${name}.html`;
5
- const resourceMetadata = { ...(resourceConfig._meta ?? {}) };
6
- if (toolConfig.description !== undefined) {
7
- resourceMetadata["openai/widgetDescription"] = toolConfig.description;
8
- }
9
- this.resource(name, uri, {
10
- ...resourceConfig,
11
- _meta: resourceMetadata,
12
- }, async (_uri, extra) => {
13
- const serverUrl = process.env.NODE_ENV === "production"
14
- ? `https://${extra?.requestInfo?.headers?.host}`
15
- : `http://localhost:3000`;
16
- const injectViteClient = (html) => `
17
- <script type="module">import { injectIntoGlobalHook } from "${serverUrl}/@react-refresh";
18
- injectIntoGlobalHook(window);
19
- window.$RefreshReg$ = () => {};
20
- window.$RefreshSig$ = () => (type) => type;
21
- window.__vite_plugin_react_preamble_installed__ = true;
22
- </script>
23
-
24
- <script type="module" src="${serverUrl}/@vite/client"></script>
25
- ` + html;
26
- const buildHtml = () => {
27
- if (process.env.NODE_ENV === "production") {
28
- try {
29
- return `
30
- <div id="root"></div>
31
- <script type="module">
32
- import('${serverUrl}/assets/${name}.js');
33
- </script>
34
- <link rel="stylesheet" crossorigin href="${serverUrl}/assets/style.css">
35
- `;
36
- }
37
- catch (error) {
38
- console.error("Failed to load production assets:", error);
39
- return "";
40
- }
41
- }
42
- return `
43
- <div id="root"></div>
44
- <script type="module">
45
- import('${serverUrl}/src/widgets/${name}.tsx');
46
- </script>
47
- `;
48
- };
49
- const html = buildHtml();
50
- return {
51
- contents: [
52
- {
53
- uri,
54
- mimeType: "text/html+skybridge",
55
- text: process.env.NODE_ENV === "production" ? html : injectViteClient(html),
56
- },
57
- ],
58
- };
59
- });
60
- const toolMeta = {
61
- ...toolConfig._meta,
62
- "openai/outputTemplate": uri,
63
- };
64
- this.registerTool(name, {
65
- ...toolConfig,
66
- _meta: toolMeta,
67
- }, toolCallback);
68
- }
69
- }
70
- //# sourceMappingURL=server.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"server.js","sourceRoot":"","sources":["../../src/server/server.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,aAAa,EAAqB,MAAM,yCAAyC,CAAC;AAwBxG,MAAM,OAAO,SAAU,SAAQ,aAAa;IAC1C,MAAM,CACJ,IAAY,EACZ,cAA+C,EAC/C,UAGC,EACD,YAAqC;QAErC,MAAM,GAAG,GAAG,gBAAgB,IAAI,OAAO,CAAC;QACxC,MAAM,gBAAgB,GAAiB,EAAE,GAAG,CAAC,cAAc,CAAC,KAAK,IAAI,EAAE,CAAC,EAAE,CAAC;QAC3E,IAAI,UAAU,CAAC,WAAW,KAAK,SAAS,EAAE,CAAC;YACzC,gBAAgB,CAAC,0BAA0B,CAAC,GAAG,UAAU,CAAC,WAAW,CAAC;QACxE,CAAC;QAED,IAAI,CAAC,QAAQ,CACX,IAAI,EACJ,GAAG,EACH;YACE,GAAG,cAAc;YACjB,KAAK,EAAE,gBAAgB;SACxB,EACD,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACpB,MAAM,SAAS,GACb,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY;gBACnC,CAAC,CAAC,WAAW,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE;gBAChD,CAAC,CAAC,uBAAuB,CAAC;YAE9B,MAAM,gBAAgB,GAAG,CAAC,IAAY,EAAE,EAAE,CACxC;0EACgE,SAAS;;;;;;;yCAO1C,SAAS;SACzC,GAAG,IAAI,CAAC;YAET,MAAM,SAAS,GAAG,GAAG,EAAE;gBACrB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;oBAC1C,IAAI,CAAC;wBACH,OAAO;;;4BAGO,SAAS,WAAW,IAAI;;2DAEO,SAAS;eACrD,CAAC;oBACJ,CAAC;oBAAC,OAAO,KAAK,EAAE,CAAC;wBACf,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,KAAK,CAAC,CAAC;wBAC1D,OAAO,EAAE,CAAC;oBACZ,CAAC;gBACH,CAAC;gBAED,OAAO;;;wBAGO,SAAS,gBAAgB,IAAI;;WAE1C,CAAC;YACJ,CAAC,CAAC;YAEF,MAAM,IAAI,GAAG,SAAS,EAAE,CAAC;YAEzB,OAAO;gBACL,QAAQ,EAAE;oBACR;wBACE,GAAG;wBACH,QAAQ,EAAE,qBAAqB;wBAC/B,IAAI,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC;qBAC5E;iBACF;aACF,CAAC;QACJ,CAAC,CACF,CAAC;QAEF,MAAM,QAAQ,GAAa;YACzB,GAAG,UAAU,CAAC,KAAK;YACnB,uBAAuB,EAAE,GAAG;SAC7B,CAAC;QAEF,IAAI,CAAC,YAAY,CACf,IAAI,EACJ;YACE,GAAG,UAAU;YACb,KAAK,EAAE,QAAQ;SAChB,EACD,YAAY,CACb,CAAC;IACJ,CAAC;CACF"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"widgetsDevServer.js","sourceRoot":"","sources":["../../src/server/widgetsDevServer.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,EAAE,EAAuB,MAAM,SAAS,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,IAA6B,EAAE;IAClE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAEhC,MAAM,EAAE,YAAY,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,GAChE,MAAM,MAAM,CAAC,MAAM,CAAC,CAAC;IACvB,MAAM,aAAa,GAAG,sBAAsB,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;IAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;IAEnD,MAAM,YAAY,GAAG,MAAM,kBAAkB,CAC3C,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,aAAa,EAAE,EACzC,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,gBAAgB,CAAC,EACvC,UAAU,CACX,CAAC;IAEF,+DAA+D;IAC/D,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,GAAG,YAAY,EAAE,MAAM,IAAI,EAAE,CAAC;IAEpE,MAAM,IAAI,GAAG,MAAM,YAAY,CAAC;QAC9B,GAAG,SAAS;QACZ,UAAU,EAAE,KAAK,EAAE,kFAAkF;QACrG,OAAO,EAAE,QAAQ;QACjB,MAAM,EAAE;YACN,YAAY,EAAE,IAAI;YAClB,cAAc,EAAE,IAAI;SACrB;QACD,IAAI,EAAE,UAAU;QAChB,YAAY,EAAE;YACZ,OAAO,EAAE,CAAC,OAAO,EAAE,kBAAkB,CAAC;SACvC;KACF,CAAC,CAAC;IAEH,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IACnB,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;IAElC,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
package/dist/web/index.js DELETED
@@ -1,5 +0,0 @@
1
- export { useOpenAiGlobal } from "./use-openai-global.js";
2
- export { useToolOutput } from "./use-tool-output.js";
3
- export * from "./types.js";
4
- export { mountWidget } from "./mount-widget.js";
5
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
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"}
@@ -1,10 +0,0 @@
1
- import { createElement, StrictMode } from "react";
2
- import { createRoot } from "react-dom/client";
3
- export const mountWidget = (component) => {
4
- const root = document.getElementById("root");
5
- if (!root) {
6
- throw new Error("Root element not found");
7
- }
8
- createRoot(root).render(createElement(StrictMode, null, component));
9
- };
10
- //# sourceMappingURL=mount-widget.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"mount-widget.js","sourceRoot":"","sources":["../../src/web/mount-widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,SAA0B,EAAE,EAAE;IACxD,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC7C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,IAAI,KAAK,CAAC,wBAAwB,CAAC,CAAC;IAC5C,CAAC;IACD,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;AACtE,CAAC,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/web/types.ts"],"names":[],"mappings":"AAYA,MAAM,CAAC,MAAM,wBAAwB,GAAG,sBAAsB,CAAC;AAC/D,MAAM,OAAO,iBAAkB,SAAQ,WAErC;IACkB,IAAI,GAAG,wBAAwB,CAAC;CACnD;AA+DD,sDAAsD;AACtD,MAAM,CAAC,MAAM,sBAAsB,GAAG,oBAAoB,CAAC;AAC3D,MAAM,OAAO,eAAgB,SAAQ,WAEnC;IACkB,IAAI,GAAG,sBAAsB,CAAC;CACjD"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-openai-global.js","sourceRoot":"","sources":["../../src/web/use-openai-global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAEzF,MAAM,UAAU,eAAe,CAAgC,GAAM;IACnE,OAAO,oBAAoB,CACzB,CAAC,QAAQ,EAAE,EAAE;QACX,MAAM,eAAe,GAAG,CAAC,KAAsB,EAAE,EAAE;YACjD,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;YACxC,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;gBACxB,OAAO;YACT,CAAC;YAED,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;YACvD,QAAQ,EAAE,CAAC;QACb,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,eAAe,EAAE;YAC/D,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,eAAe,CAAC,CAAC;QACtE,CAAC,CAAC;IACJ,CAAC,EACD,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAC3B,CAAC;AACJ,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"use-tool-output.js","sourceRoot":"","sources":["../../src/web/use-tool-output.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAEzD,MAAM,UAAU,aAAa;IAC3B,OAAO,eAAe,CAAC,YAAY,CAAC,CAAC;AACvC,CAAC"}
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes