skybridge 0.0.0-dev.d798b8b → 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.
package/README.md
CHANGED
|
@@ -99,15 +99,87 @@ export default defineConfig({
|
|
|
99
99
|
|
|
100
100
|
**Hooks**
|
|
101
101
|
|
|
102
|
-
The `skybridge/web` package comes with a set of hooks to help you build your widgets
|
|
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_
|
|
103
118
|
|
|
104
119
|
```ts
|
|
105
120
|
import { useToolOutput } from "skybridge/web";
|
|
106
121
|
|
|
107
|
-
// Initial data returned by the tool invocation on structuredOutput
|
|
108
122
|
const toolOutput = useToolOutput();
|
|
109
123
|
```
|
|
110
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
|
+
|
|
111
183
|
## Migrate your existing MCP server to a ChatGPT app
|
|
112
184
|
|
|
113
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:
|
|
@@ -6,12 +6,12 @@ export declare const useCallTool: <ToolArgs extends CallToolArgs = null, ToolRes
|
|
|
6
6
|
}) => void;
|
|
7
7
|
callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
|
|
8
8
|
status: "idle";
|
|
9
|
-
data: undefined;
|
|
10
|
-
error: undefined;
|
|
11
9
|
isIdle: true;
|
|
12
10
|
isPending: false;
|
|
13
11
|
isSuccess: false;
|
|
14
12
|
isError: false;
|
|
13
|
+
data: undefined;
|
|
14
|
+
error: undefined;
|
|
15
15
|
} | {
|
|
16
16
|
callTool: (toolArgs: ToolArgs, sideEffects?: {
|
|
17
17
|
onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
|
|
@@ -19,12 +19,12 @@ export declare const useCallTool: <ToolArgs extends CallToolArgs = null, ToolRes
|
|
|
19
19
|
}) => void;
|
|
20
20
|
callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
|
|
21
21
|
status: "pending";
|
|
22
|
-
data: undefined;
|
|
23
|
-
error: undefined;
|
|
24
22
|
isIdle: false;
|
|
25
23
|
isPending: true;
|
|
26
24
|
isSuccess: false;
|
|
27
25
|
isError: false;
|
|
26
|
+
data: undefined;
|
|
27
|
+
error: undefined;
|
|
28
28
|
} | {
|
|
29
29
|
callTool: (toolArgs: ToolArgs, sideEffects?: {
|
|
30
30
|
onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
|
|
@@ -32,12 +32,12 @@ export declare const useCallTool: <ToolArgs extends CallToolArgs = null, ToolRes
|
|
|
32
32
|
}) => void;
|
|
33
33
|
callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
|
|
34
34
|
status: "error";
|
|
35
|
-
data: undefined;
|
|
36
|
-
error: unknown;
|
|
37
35
|
isIdle: false;
|
|
38
36
|
isPending: false;
|
|
39
37
|
isSuccess: false;
|
|
40
38
|
isError: true;
|
|
39
|
+
data: undefined;
|
|
40
|
+
error: unknown;
|
|
41
41
|
} | {
|
|
42
42
|
callTool: (toolArgs: ToolArgs, sideEffects?: {
|
|
43
43
|
onSuccess?: (data: ToolResponse, toolArgs: ToolArgs) => void;
|
|
@@ -45,10 +45,10 @@ export declare const useCallTool: <ToolArgs extends CallToolArgs = null, ToolRes
|
|
|
45
45
|
}) => void;
|
|
46
46
|
callToolAsync: (toolArgs: ToolArgs) => Promise<ToolResponse>;
|
|
47
47
|
status: "success";
|
|
48
|
-
data: ToolResponse;
|
|
49
|
-
error: undefined;
|
|
50
48
|
isIdle: false;
|
|
51
49
|
isPending: false;
|
|
52
50
|
isSuccess: true;
|
|
53
51
|
isError: false;
|
|
52
|
+
data: ToolResponse;
|
|
53
|
+
error: undefined;
|
|
54
54
|
};
|
|
@@ -1,47 +1,15 @@
|
|
|
1
1
|
import { useState } from "react";
|
|
2
2
|
export const useCallTool = (name) => {
|
|
3
|
-
const [
|
|
4
|
-
status: "idle",
|
|
5
|
-
data: undefined,
|
|
6
|
-
error: undefined,
|
|
7
|
-
isIdle: true,
|
|
8
|
-
isPending: false,
|
|
9
|
-
isSuccess: false,
|
|
10
|
-
isError: false,
|
|
11
|
-
});
|
|
3
|
+
const [{ status, data, error }, setCallToolState] = useState({ status: "idle", data: undefined, error: undefined });
|
|
12
4
|
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
|
-
});
|
|
5
|
+
setCallToolState({ status: "pending", data: undefined, error: undefined });
|
|
22
6
|
try {
|
|
23
7
|
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
|
-
});
|
|
8
|
+
setCallToolState({ status: "success", data, error: undefined });
|
|
33
9
|
return data;
|
|
34
10
|
}
|
|
35
11
|
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
|
-
});
|
|
12
|
+
setCallToolState({ status: "error", data: undefined, error });
|
|
45
13
|
throw error;
|
|
46
14
|
}
|
|
47
15
|
};
|
|
@@ -58,6 +26,15 @@ export const useCallTool = (name) => {
|
|
|
58
26
|
}
|
|
59
27
|
});
|
|
60
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
|
+
};
|
|
61
38
|
return {
|
|
62
39
|
...callToolState,
|
|
63
40
|
callTool,
|
|
@@ -1 +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;
|
|
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"}
|
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.e31f406",
|
|
4
4
|
"description": "Skybridge is a framework for building ChatGPT apps",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"files": [
|
|
@@ -19,7 +19,10 @@
|
|
|
19
19
|
"scripts": {
|
|
20
20
|
"build": "tsc && pnpm run build:templates",
|
|
21
21
|
"build:templates": "cp -r src/server/templates dist/src/server/",
|
|
22
|
-
"test": "vitest run --silent"
|
|
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"
|
|
23
26
|
},
|
|
24
27
|
"keywords": [
|
|
25
28
|
"chatgpt",
|