skybridge 0.0.0-dev.c63f165 → 0.0.0-dev.d798b8b
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.
- package/README.md +124 -1
- package/dist/src/server/index.d.ts +0 -1
- package/dist/src/server/index.js +0 -1
- package/dist/src/server/index.js.map +1 -1
- package/dist/src/server/server.js +1 -3
- package/dist/src/server/server.js.map +1 -1
- package/dist/src/server/templates/development.hbs +7 -0
- package/dist/src/server/widgetsDevServer.d.ts +5 -2
- package/dist/src/server/widgetsDevServer.js +5 -2
- package/dist/src/server/widgetsDevServer.js.map +1 -1
- package/dist/src/test/widget.test.js +1 -4
- package/dist/src/test/widget.test.js.map +1 -1
- package/dist/src/web/index.d.ts +3 -0
- package/dist/src/web/index.js +3 -0
- package/dist/src/web/index.js.map +1 -1
- package/dist/src/web/mount-widget.js +7 -3
- package/dist/src/web/mount-widget.js.map +1 -1
- package/dist/src/web/plugin.d.ts +2 -0
- package/dist/src/web/plugin.js +30 -0
- package/dist/src/web/plugin.js.map +1 -0
- package/dist/src/web/types.d.ts +9 -1
- package/dist/src/web/types.js.map +1 -1
- package/dist/src/web/use-call-tool.d.ts +54 -0
- package/dist/src/web/use-call-tool.js +67 -0
- package/dist/src/web/use-call-tool.js.map +1 -0
- package/dist/src/web/use-call-tool.test.d.ts +1 -0
- package/dist/src/web/use-call-tool.test.js +66 -0
- package/dist/src/web/use-call-tool.test.js.map +1 -0
- package/dist/src/web/use-tool-response-metadata.d.ts +3 -0
- package/dist/src/web/use-tool-response-metadata.js +5 -0
- package/dist/src/web/use-tool-response-metadata.js.map +1 -0
- package/package.json +6 -6
- package/dist/src/server/middleware.d.ts +0 -3
- package/dist/src/server/middleware.js +0 -47
- package/dist/src/server/middleware.js.map +0 -1
- package/dist/src/server/templates/vite-client.hbs +0 -7
package/README.md
CHANGED
|
@@ -1,3 +1,126 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
|
|
1
3
|
# Skybridge
|
|
2
4
|
|
|
3
|
-
Skybridge is
|
|
5
|
+
**Skybridge is the TypeScript framework for building ChatGPT apps**
|
|
6
|
+
|
|
7
|
+
[](https://alpic.ai)
|
|
8
|
+
|
|
9
|
+

|
|
10
|
+

|
|
11
|
+

|
|
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
|
+
```ts
|
|
105
|
+
import { useToolOutput } from "skybridge/web";
|
|
106
|
+
|
|
107
|
+
// Initial data returned by the tool invocation on structuredOutput
|
|
108
|
+
const toolOutput = useToolOutput();
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Migrate your existing MCP server to a ChatGPT app
|
|
112
|
+
|
|
113
|
+
If you're already using the `@modelcontextprotocol/sdk` to build a MCP server, you can migrate to a ChatGPT app by following these steps:
|
|
114
|
+
|
|
115
|
+
1. Replace your `McpServer` import from `@modelcontextprotocol/sdk` with the same import from `skybridge/server`
|
|
116
|
+
2. Create a new vite project in a folder named `web` and install the `skybridge` package
|
|
117
|
+
3. Replace the `vite.config.ts` file with the following:
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
import { defineConfig } from "vite";
|
|
121
|
+
import { skybridge } from "skybridge/web";
|
|
122
|
+
|
|
123
|
+
export default defineConfig({
|
|
124
|
+
plugins: [skybridge()],
|
|
125
|
+
});
|
|
126
|
+
```
|
package/dist/src/server/index.js
CHANGED
|
@@ -1 +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
|
|
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"}
|
|
@@ -1 +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,
|
|
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"}
|
|
@@ -1,3 +1,10 @@
|
|
|
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>
|
|
1
8
|
<div id="root"></div>
|
|
2
9
|
<script type="module">
|
|
3
10
|
import('{{serverUrl}}/src/widgets/{{widgetName}}.tsx');
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { type RequestHandler } from "express";
|
|
2
2
|
/**
|
|
3
|
-
* Install Vite dev server
|
|
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
|
-
*
|
|
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
|
|
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
|
-
*
|
|
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();
|
|
@@ -1 +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
|
|
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"}
|
|
@@ -6,10 +6,7 @@ describe("McpServer.widget", () => {
|
|
|
6
6
|
let mockResource;
|
|
7
7
|
let mockRegisterTool;
|
|
8
8
|
beforeEach(() => {
|
|
9
|
-
|
|
10
|
-
server = mock.server;
|
|
11
|
-
mockResource = mock.mockResource;
|
|
12
|
-
mockRegisterTool = mock.mockRegisterTool;
|
|
9
|
+
({ server, mockResource, mockRegisterTool } = createMockMcpServer());
|
|
13
10
|
});
|
|
14
11
|
afterEach(() => {
|
|
15
12
|
vi.clearAllMocks();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"widget.test.js","sourceRoot":"","sources":["../../../src/test/widget.test.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,EAAE,EACF,MAAM,EACN,EAAE,EACF,UAAU,EACV,SAAS,GAEV,MAAM,QAAQ,CAAC;AAChB,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,UAAU,EACV,YAAY,GACb,MAAM,YAAY,CAAC;AAEpB,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,IAAI,MAAiB,CAAC;IACtB,IAAI,YAAiD,CAAC;IACtD,IAAI,gBAAyD,CAAC;IAE9D,UAAU,CAAC,GAAG,EAAE;QACd,
|
|
1
|
+
{"version":3,"file":"widget.test.js","sourceRoot":"","sources":["../../../src/test/widget.test.ts"],"names":[],"mappings":"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"}
|
package/dist/src/web/index.d.ts
CHANGED
|
@@ -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";
|
package/dist/src/web/index.js
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
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";
|
|
5
8
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +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"}
|
|
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"}
|
|
@@ -1,10 +1,14 @@
|
|
|
1
1
|
import { createElement, StrictMode } from "react";
|
|
2
2
|
import { createRoot } from "react-dom/client";
|
|
3
|
+
let rootInstance = null;
|
|
3
4
|
export const mountWidget = (component) => {
|
|
4
|
-
const
|
|
5
|
-
if (!
|
|
5
|
+
const rootElement = document.getElementById("root");
|
|
6
|
+
if (!rootElement) {
|
|
6
7
|
throw new Error("Root element not found");
|
|
7
8
|
}
|
|
8
|
-
|
|
9
|
+
if (!rootInstance) {
|
|
10
|
+
rootInstance = createRoot(rootElement);
|
|
11
|
+
}
|
|
12
|
+
rootInstance.render(createElement(StrictMode, null, component));
|
|
9
13
|
};
|
|
10
14
|
//# sourceMappingURL=mount-widget.js.map
|
|
@@ -1 +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,
|
|
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,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"}
|
package/dist/src/web/types.d.ts
CHANGED
|
@@ -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:
|
|
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;
|
|
@@ -1 +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;
|
|
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
|
+
data: undefined;
|
|
10
|
+
error: undefined;
|
|
11
|
+
isIdle: true;
|
|
12
|
+
isPending: false;
|
|
13
|
+
isSuccess: false;
|
|
14
|
+
isError: false;
|
|
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
|
+
data: undefined;
|
|
23
|
+
error: undefined;
|
|
24
|
+
isIdle: false;
|
|
25
|
+
isPending: true;
|
|
26
|
+
isSuccess: false;
|
|
27
|
+
isError: false;
|
|
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
|
+
data: undefined;
|
|
36
|
+
error: unknown;
|
|
37
|
+
isIdle: false;
|
|
38
|
+
isPending: false;
|
|
39
|
+
isSuccess: false;
|
|
40
|
+
isError: true;
|
|
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
|
+
data: ToolResponse;
|
|
49
|
+
error: undefined;
|
|
50
|
+
isIdle: false;
|
|
51
|
+
isPending: false;
|
|
52
|
+
isSuccess: true;
|
|
53
|
+
isError: false;
|
|
54
|
+
};
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { useState } from "react";
|
|
2
|
+
export const useCallTool = (name) => {
|
|
3
|
+
const [callToolState, setCallToolState] = useState({
|
|
4
|
+
status: "idle",
|
|
5
|
+
data: undefined,
|
|
6
|
+
error: undefined,
|
|
7
|
+
isIdle: true,
|
|
8
|
+
isPending: false,
|
|
9
|
+
isSuccess: false,
|
|
10
|
+
isError: false,
|
|
11
|
+
});
|
|
12
|
+
const callToolAsync = async (toolArgs) => {
|
|
13
|
+
setCallToolState({
|
|
14
|
+
status: "pending",
|
|
15
|
+
data: undefined,
|
|
16
|
+
error: undefined,
|
|
17
|
+
isIdle: false,
|
|
18
|
+
isPending: true,
|
|
19
|
+
isSuccess: false,
|
|
20
|
+
isError: false,
|
|
21
|
+
});
|
|
22
|
+
try {
|
|
23
|
+
const data = await window.openai.callTool(name, toolArgs);
|
|
24
|
+
setCallToolState({
|
|
25
|
+
status: "success",
|
|
26
|
+
data,
|
|
27
|
+
error: undefined,
|
|
28
|
+
isIdle: false,
|
|
29
|
+
isPending: false,
|
|
30
|
+
isSuccess: true,
|
|
31
|
+
isError: false,
|
|
32
|
+
});
|
|
33
|
+
return data;
|
|
34
|
+
}
|
|
35
|
+
catch (error) {
|
|
36
|
+
setCallToolState({
|
|
37
|
+
status: "error",
|
|
38
|
+
data: undefined,
|
|
39
|
+
error,
|
|
40
|
+
isIdle: false,
|
|
41
|
+
isPending: false,
|
|
42
|
+
isSuccess: false,
|
|
43
|
+
isError: true,
|
|
44
|
+
});
|
|
45
|
+
throw error;
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
const callTool = (toolArgs, sideEffects) => {
|
|
49
|
+
callToolAsync(toolArgs)
|
|
50
|
+
.then((data) => {
|
|
51
|
+
if (sideEffects?.onSuccess) {
|
|
52
|
+
sideEffects.onSuccess(data, toolArgs);
|
|
53
|
+
}
|
|
54
|
+
})
|
|
55
|
+
.catch((error) => {
|
|
56
|
+
if (sideEffects?.onError) {
|
|
57
|
+
sideEffects.onError(error, toolArgs);
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
};
|
|
61
|
+
return {
|
|
62
|
+
...callToolState,
|
|
63
|
+
callTool,
|
|
64
|
+
callToolAsync,
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
//# 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;AA+CjC,MAAM,CAAC,MAAM,WAAW,GAAG,CAIzB,IAAY,EACZ,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAEhD;QACA,MAAM,EAAE,MAAM;QACd,IAAI,EAAE,SAAS;QACf,KAAK,EAAE,SAAS;QAChB,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,KAAK;QAChB,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,KAAK;KACf,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,KAAK,EAAE,QAAkB,EAAE,EAAE;QACjD,gBAAgB,CAAC;YACf,MAAM,EAAE,SAAS;YACjB,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,SAAS;YAChB,MAAM,EAAE,KAAK;YACb,SAAS,EAAE,IAAI;YACf,SAAS,EAAE,KAAK;YAChB,OAAO,EAAE,KAAK;SACf,CAAC,CAAC;QACH,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,MAAM,CAAC,QAAQ,CACvC,IAAI,EACJ,QAAQ,CACT,CAAC;YACF,gBAAgB,CAAC;gBACf,MAAM,EAAE,SAAS;gBACjB,IAAI;gBACJ,KAAK,EAAE,SAAS;gBAChB,MAAM,EAAE,KAAK;gBACb,SAAS,EAAE,KAAK;gBAChB,SAAS,EAAE,IAAI;gBACf,OAAO,EAAE,KAAK;aACf,CAAC,CAAC;YAEH,OAAO,IAAI,CAAC;QACd,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,gBAAgB,CAAC;gBACf,MAAM,EAAE,OAAO;gBACf,IAAI,EAAE,SAAS;gBACf,KAAK;gBACL,MAAM,EAAE,KAAK;gBACb,SAAS,EAAE,KAAK;gBAChB,SAAS,EAAE,KAAK;gBAChB,OAAO,EAAE,IAAI;aACd,CAAC,CAAC;YACH,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,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-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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "skybridge",
|
|
3
|
-
"version": "0.0.0-dev.
|
|
3
|
+
"version": "0.0.0-dev.d798b8b",
|
|
4
4
|
"description": "Skybridge is a framework for building ChatGPT apps",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -17,11 +17,9 @@
|
|
|
17
17
|
}
|
|
18
18
|
},
|
|
19
19
|
"scripts": {
|
|
20
|
-
"build": "
|
|
20
|
+
"build": "tsc && pnpm run build:templates",
|
|
21
21
|
"build:templates": "cp -r src/server/templates dist/src/server/",
|
|
22
|
-
"test": "vitest"
|
|
23
|
-
"test:ui": "vitest --ui",
|
|
24
|
-
"test:run": "vitest run"
|
|
22
|
+
"test": "vitest run --silent"
|
|
25
23
|
},
|
|
26
24
|
"keywords": [
|
|
27
25
|
"chatgpt",
|
|
@@ -44,13 +42,15 @@
|
|
|
44
42
|
"zod": "^3.25.51"
|
|
45
43
|
},
|
|
46
44
|
"devDependencies": {
|
|
45
|
+
"@testing-library/dom": "^10.4.1",
|
|
46
|
+
"@testing-library/react": "^16.3.0",
|
|
47
47
|
"@total-typescript/tsconfig": "^1.0.4",
|
|
48
48
|
"@types/cors": "^2.8.19",
|
|
49
49
|
"@types/express": "^5.0.3",
|
|
50
|
+
"@types/jsdom": "^21.1.6",
|
|
50
51
|
"@types/node": "^22.15.30",
|
|
51
52
|
"@types/react": "^19.2.2",
|
|
52
53
|
"@types/react-dom": "^19.2.2",
|
|
53
|
-
"@types/jsdom": "^21.1.6",
|
|
54
54
|
"@vitest/ui": "^2.1.8",
|
|
55
55
|
"jsdom": "^25.0.1",
|
|
56
56
|
"typescript": "^5.9.3",
|
|
@@ -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,7 +0,0 @@
|
|
|
1
|
-
<script type="module">import { injectIntoGlobalHook } from "{{serverUrl}}/@react-refresh";
|
|
2
|
-
injectIntoGlobalHook(window); window.$RefreshReg$ = () => {};
|
|
3
|
-
window.$RefreshSig$ = () => (type) => type;
|
|
4
|
-
window.__vite_plugin_react_preamble_installed__ = true;
|
|
5
|
-
</script>
|
|
6
|
-
|
|
7
|
-
<script type="module" src="{{serverUrl}}/@vite/client"></script>
|