skybridge 0.0.0-dev.e4c9359 → 0.0.0-dev.e62daf3
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/LICENSE +21 -674
- package/README.md +70 -270
- package/dist/src/server/devtoolsStaticServer.d.ts +15 -0
- package/dist/src/server/devtoolsStaticServer.js +38 -0
- package/dist/src/server/devtoolsStaticServer.js.map +1 -0
- package/dist/src/server/index.d.ts +3 -2
- package/dist/src/server/index.js +1 -0
- package/dist/src/server/index.js.map +1 -1
- package/dist/src/server/inferUtilityTypes.d.ts +22 -6
- package/dist/src/server/server.d.ts +45 -16
- package/dist/src/server/server.js +15 -6
- package/dist/src/server/server.js.map +1 -1
- package/dist/src/server/templateHelper.js +5 -4
- package/dist/src/server/templateHelper.js.map +1 -1
- package/dist/src/server/templates/development.hbs +2 -2
- package/dist/src/server/widgetsDevServer.js +3 -3
- package/dist/src/server/widgetsDevServer.js.map +1 -1
- package/dist/src/test/utils.d.ts +44 -9
- package/dist/src/test/utils.js +66 -8
- package/dist/src/test/utils.js.map +1 -1
- package/dist/src/test/widget.test.js +43 -21
- package/dist/src/test/widget.test.js.map +1 -1
- package/dist/src/web/create-store.d.ts +3 -0
- package/dist/src/web/create-store.js +25 -0
- package/dist/src/web/create-store.js.map +1 -0
- package/dist/src/web/create-store.test.js +70 -0
- package/dist/src/web/create-store.test.js.map +1 -0
- package/dist/src/web/data-llm.d.ts +14 -0
- package/dist/src/web/data-llm.js +68 -0
- package/dist/src/web/data-llm.js.map +1 -0
- package/dist/src/web/data-llm.test.js +76 -0
- package/dist/src/web/data-llm.test.js.map +1 -0
- package/dist/src/web/{typed-hooks.d.ts → generate-helpers.d.ts} +23 -20
- package/dist/src/web/{typed-hooks.js → generate-helpers.js} +14 -10
- package/dist/src/web/generate-helpers.js.map +1 -0
- package/dist/src/web/generate-helpers.test-d.d.ts +1 -0
- package/dist/src/web/generate-helpers.test-d.js +180 -0
- package/dist/src/web/generate-helpers.test-d.js.map +1 -0
- package/dist/src/web/generate-helpers.test.d.ts +1 -0
- package/dist/src/web/{typed-hooks.test.js → generate-helpers.test.js} +5 -5
- package/dist/src/web/generate-helpers.test.js.map +1 -0
- package/dist/src/web/helpers/state.d.ts +7 -0
- package/dist/src/web/helpers/state.js +40 -0
- package/dist/src/web/helpers/state.js.map +1 -0
- package/dist/src/web/helpers/state.test.d.ts +1 -0
- package/dist/src/web/helpers/state.test.js +53 -0
- package/dist/src/web/helpers/state.test.js.map +1 -0
- package/dist/src/web/hooks/index.d.ts +2 -4
- package/dist/src/web/hooks/index.js +2 -4
- package/dist/src/web/hooks/index.js.map +1 -1
- package/dist/src/web/hooks/use-call-tool.d.ts +21 -20
- package/dist/src/web/hooks/use-call-tool.js +7 -15
- package/dist/src/web/hooks/use-call-tool.js.map +1 -1
- package/dist/src/web/hooks/use-call-tool.test-d.d.ts +1 -0
- package/dist/src/web/hooks/use-call-tool.test-d.js +104 -0
- package/dist/src/web/hooks/use-call-tool.test-d.js.map +1 -0
- package/dist/src/web/hooks/use-call-tool.test.js +14 -12
- package/dist/src/web/hooks/use-call-tool.test.js.map +1 -1
- package/dist/src/web/hooks/use-display-mode.js.map +1 -1
- package/dist/src/web/hooks/use-display-mode.test.js +2 -2
- package/dist/src/web/hooks/use-display-mode.test.js.map +1 -1
- package/dist/src/web/hooks/use-files.test.js +1 -1
- package/dist/src/web/hooks/use-files.test.js.map +1 -1
- package/dist/src/web/hooks/use-locale.js.map +1 -1
- package/dist/src/web/hooks/use-locale.test.js +2 -2
- package/dist/src/web/hooks/use-locale.test.js.map +1 -1
- package/dist/src/web/hooks/use-open-external.test.js +2 -2
- package/dist/src/web/hooks/use-open-external.test.js.map +1 -1
- package/dist/src/web/hooks/use-openai-global.d.ts +2 -2
- package/dist/src/web/hooks/use-openai-global.js +7 -5
- package/dist/src/web/hooks/use-openai-global.js.map +1 -1
- package/dist/src/web/hooks/use-request-modal.test.js +2 -2
- package/dist/src/web/hooks/use-request-modal.test.js.map +1 -1
- package/dist/src/web/hooks/use-theme.js.map +1 -1
- package/dist/src/web/hooks/use-theme.test.js +2 -2
- package/dist/src/web/hooks/use-theme.test.js.map +1 -1
- package/dist/src/web/hooks/use-tool-info.d.ts +1 -1
- package/dist/src/web/hooks/use-tool-info.js +4 -6
- package/dist/src/web/hooks/use-tool-info.js.map +1 -1
- package/dist/src/web/hooks/use-tool-info.test-d.js +0 -1
- package/dist/src/web/hooks/use-tool-info.test-d.js.map +1 -1
- package/dist/src/web/hooks/use-tool-info.test.js +2 -2
- package/dist/src/web/hooks/use-tool-info.test.js.map +1 -1
- package/dist/src/web/hooks/use-user-agent.js.map +1 -1
- package/dist/src/web/hooks/use-user-agent.test.js +2 -2
- package/dist/src/web/hooks/use-user-agent.test.js.map +1 -1
- package/dist/src/web/hooks/use-widget-state.js +9 -7
- package/dist/src/web/hooks/use-widget-state.js.map +1 -1
- package/dist/src/web/hooks/use-widget-state.test.js +2 -2
- package/dist/src/web/hooks/use-widget-state.test.js.map +1 -1
- package/dist/src/web/index.d.ts +6 -4
- package/dist/src/web/index.js +6 -4
- package/dist/src/web/index.js.map +1 -1
- package/dist/src/web/plugin/data-llm.test.d.ts +1 -0
- package/dist/src/web/plugin/data-llm.test.js +81 -0
- package/dist/src/web/plugin/data-llm.test.js.map +1 -0
- package/dist/src/web/plugin/plugin.js +39 -0
- package/dist/src/web/plugin/plugin.js.map +1 -0
- package/dist/src/web/plugin/transform-data-llm.d.ts +12 -0
- package/dist/src/web/plugin/transform-data-llm.js +93 -0
- package/dist/src/web/plugin/transform-data-llm.js.map +1 -0
- package/dist/src/web/plugin/transform-data-llm.test.d.ts +1 -0
- package/dist/src/web/plugin/transform-data-llm.test.js +81 -0
- package/dist/src/web/plugin/transform-data-llm.test.js.map +1 -0
- package/dist/src/web/proxy.js +1 -1
- package/dist/src/web/proxy.js.map +1 -1
- package/dist/src/web/types.d.ts +14 -4
- package/dist/src/web/types.js +1 -0
- package/dist/src/web/types.js.map +1 -1
- package/package.json +14 -6
- package/dist/src/web/hooks/use-tool-output.d.ts +0 -4
- package/dist/src/web/hooks/use-tool-output.js +0 -9
- package/dist/src/web/hooks/use-tool-output.js.map +0 -1
- package/dist/src/web/hooks/use-tool-response-metadata.d.ts +0 -4
- package/dist/src/web/hooks/use-tool-response-metadata.js +0 -8
- package/dist/src/web/hooks/use-tool-response-metadata.js.map +0 -1
- package/dist/src/web/plugin.js +0 -28
- package/dist/src/web/plugin.js.map +0 -1
- package/dist/src/web/typed-hooks.js.map +0 -1
- package/dist/src/web/typed-hooks.test-d.js +0 -90
- package/dist/src/web/typed-hooks.test-d.js.map +0 -1
- package/dist/src/web/typed-hooks.test.js.map +0 -1
- /package/dist/src/web/{typed-hooks.test-d.d.ts → create-store.test.d.ts} +0 -0
- /package/dist/src/web/{typed-hooks.test.d.ts → data-llm.test.d.ts} +0 -0
- /package/dist/src/web/{plugin.d.ts → plugin/plugin.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -1,323 +1,123 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
**Skybridge is the TypeScript framework for building ChatGPT apps**
|
|
6
|
-
|
|
7
|
-
[](https://alpic.ai)
|
|
3
|
+
<img alt="Skybridge" src="docs/static/img/logo.png" width="220">
|
|
8
4
|
|
|
9
|
-
|
|
10
|
-

|
|
11
|
-

|
|
5
|
+
# Skybridge
|
|
12
6
|
|
|
13
|
-
|
|
7
|
+
**Build ChatGPT Apps. The Modern TypeScript Way.**
|
|
14
8
|
|
|
15
|
-
|
|
9
|
+
The fullstack TypeScript framework for ChatGPT Apps.<br />
|
|
10
|
+
**Type-safe. React-powered. Zero config.**
|
|
16
11
|
|
|
17
|
-
|
|
18
|
-
- `skybridge/web`: A react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
|
|
12
|
+
<br />
|
|
19
13
|
|
|
20
|
-
|
|
14
|
+
[](https://www.npmjs.com/package/skybridge)
|
|
15
|
+
[](https://www.npmjs.com/package/skybridge)
|
|
16
|
+
[](https://github.com/alpic-ai/skybridge/blob/main/LICENSE)
|
|
21
17
|
|
|
22
|
-
|
|
18
|
+
<br />
|
|
23
19
|
|
|
24
|
-
|
|
20
|
+
[Documentation](https://skybridge.tech) · [Quick Start](https://github.com/new?template_name=apps-sdk-template&template_owner=alpic-ai) · [Examples](https://github.com/alpic-ai/apps-sdk-template)
|
|
25
21
|
|
|
26
|
-
|
|
27
|
-
pnpm add skybridge
|
|
28
|
-
```
|
|
22
|
+
</div>
|
|
29
23
|
|
|
30
|
-
|
|
24
|
+
<br />
|
|
31
25
|
|
|
32
|
-
|
|
26
|
+
## ✨ Why Skybridge?
|
|
33
27
|
|
|
34
|
-
|
|
28
|
+
ChatGPT Apps let you embed **rich, interactive UIs** directly in conversations. But the raw SDK is low-level—no hooks, no type safety, no dev tools, and no HMR.
|
|
35
29
|
|
|
36
|
-
|
|
30
|
+
**Skybridge fixes that.**
|
|
37
31
|
|
|
38
|
-
|
|
32
|
+
| | |
|
|
33
|
+
|:--|:--|
|
|
34
|
+
| 👨💻 **Full Dev Environment** — HMR, debug traces, and local devtools. No more refresh loops. | ✅ **End-to-End Type Safety** — tRPC-style inference from server to widget. Autocomplete everywhere. |
|
|
35
|
+
| 🔄 **Widget-to-Model Sync** — Keep the model aware of UI state with `data-llm`. Dual surfaces, one source of truth. | ⚒️ **React Query-style Hooks** — `isPending`, `isError`, callbacks. State management you already know. |
|
|
39
36
|
|
|
40
|
-
|
|
37
|
+
<br />
|
|
41
38
|
|
|
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
|
-
```
|
|
39
|
+
## 🚀 Get Started
|
|
51
40
|
|
|
52
|
-
|
|
41
|
+
**Create a new ChatGPT app:**
|
|
53
42
|
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
const server = new McpServer();
|
|
58
|
-
|
|
59
|
-
server.widget(
|
|
60
|
-
"pokemon"
|
|
61
|
-
// Remaining arguments...
|
|
62
|
-
);
|
|
43
|
+
```bash
|
|
44
|
+
gh repo create my-app --template alpic-ai/apps-sdk-template --clone
|
|
45
|
+
cd my-app && pnpm install
|
|
63
46
|
```
|
|
64
47
|
|
|
65
|
-
|
|
48
|
+
**Or add to an existing project:**
|
|
66
49
|
|
|
67
|
-
```
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
mountWidget(<Pokemon />);
|
|
50
|
+
```bash
|
|
51
|
+
npm i skybridge
|
|
52
|
+
yarn add skybridge
|
|
53
|
+
pnpm add skybridge
|
|
54
|
+
bun add skybridge
|
|
55
|
+
deno add skybridge
|
|
75
56
|
```
|
|
76
57
|
|
|
77
|
-
|
|
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.
|
|
58
|
+
<div align="center">
|
|
90
59
|
|
|
91
|
-
|
|
92
|
-
import { defineConfig } from "vite";
|
|
93
|
-
import { skybridge } from "skybridge/web";
|
|
60
|
+
**👉 [Read the Docs](https://skybridge.tech) 👈**
|
|
94
61
|
|
|
95
|
-
|
|
96
|
-
plugins: [skybridge()],
|
|
97
|
-
});
|
|
98
|
-
```
|
|
62
|
+
</div>
|
|
99
63
|
|
|
100
|
-
|
|
64
|
+
<br />
|
|
101
65
|
|
|
102
|
-
|
|
66
|
+
## 📦 The Stack
|
|
103
67
|
|
|
104
|
-
|
|
68
|
+
- **`skybridge/server`** — Drop-in MCP SDK replacement with widget registration and type inference.
|
|
69
|
+
- **`skybridge/web`** — React hooks and components for ChatGPT's runtime.
|
|
105
70
|
|
|
106
|
-
|
|
71
|
+
### Server
|
|
107
72
|
|
|
108
73
|
```ts
|
|
109
74
|
import { McpServer } from "skybridge/server";
|
|
110
|
-
import { z } from "zod";
|
|
111
|
-
|
|
112
|
-
const server = new McpServer({ name: "my-app", version: "1.0" }, {})
|
|
113
|
-
.widget("search-voyage", {}, {
|
|
114
|
-
description: "Search for trips",
|
|
115
|
-
inputSchema: {
|
|
116
|
-
destination: z.string(),
|
|
117
|
-
departureDate: z.string().optional(),
|
|
118
|
-
},
|
|
119
|
-
outputSchema: {
|
|
120
|
-
results: z.array(z.object({ id: z.string(), name: z.string() })),
|
|
121
|
-
totalCount: z.number(),
|
|
122
|
-
},
|
|
123
|
-
}, async ({ destination }) => {
|
|
124
|
-
// Your tool logic here...
|
|
125
|
-
return { content: [{ type: "text", text: `Found trips to ${destination}` }] };
|
|
126
|
-
})
|
|
127
|
-
.widget("get-details", {}, {
|
|
128
|
-
inputSchema: { tripId: z.string() },
|
|
129
|
-
}, async ({ tripId }) => {
|
|
130
|
-
return { content: [{ type: "text", text: `Details for ${tripId}` }] };
|
|
131
|
-
});
|
|
132
|
-
|
|
133
|
-
// Export the server type for the client
|
|
134
|
-
export type AppType = typeof server;
|
|
135
|
-
```
|
|
136
|
-
|
|
137
|
-
_One-time setup (web/src/skybridge.ts)_
|
|
138
|
-
|
|
139
|
-
Create typed hooks once and export them for use across your app. This file acts as a bridge between your server types and your widgets:
|
|
140
|
-
|
|
141
|
-
```ts
|
|
142
|
-
import type { AppType } from "../server"; // type-only import
|
|
143
|
-
import { createTypedHooks } from "skybridge/web";
|
|
144
75
|
|
|
145
|
-
|
|
76
|
+
server.registerWidget("flights", {}, {
|
|
77
|
+
inputSchema: { destination: z.string() },
|
|
78
|
+
}, async ({ destination }) => {
|
|
79
|
+
const flights = await searchFlights(destination);
|
|
80
|
+
return { structuredContent: { flights } };
|
|
81
|
+
});
|
|
146
82
|
```
|
|
147
83
|
|
|
148
|
-
|
|
84
|
+
### Widget
|
|
149
85
|
|
|
150
86
|
```tsx
|
|
151
|
-
import { useCallTool, useToolInfo } from "../skybridge"; // import typed hooks
|
|
152
|
-
|
|
153
|
-
export function SearchWidget() {
|
|
154
|
-
const { callTool, data, isPending } = useCallTool("search-voyage");
|
|
155
|
-
// ^ autocomplete for tool names
|
|
156
|
-
const toolInfo = useToolInfo<"search-voyage">();
|
|
157
|
-
// ^ autocomplete for widget names
|
|
158
|
-
|
|
159
|
-
const handleSearch = () => {
|
|
160
|
-
callTool({ destination: "Spain" });
|
|
161
|
-
// ^ autocomplete for input fields
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
return (
|
|
165
|
-
<div>
|
|
166
|
-
<button onClick={handleSearch} disabled={isPending}>
|
|
167
|
-
Search
|
|
168
|
-
</button>
|
|
169
|
-
{toolInfo.isSuccess && (
|
|
170
|
-
<div>Found {toolInfo.output.totalCount} results</div>
|
|
171
|
-
// ^ typed output
|
|
172
|
-
)}
|
|
173
|
-
</div>
|
|
174
|
-
);
|
|
175
|
-
}
|
|
176
|
-
```
|
|
177
|
-
|
|
178
|
-
**Hooks**
|
|
179
|
-
|
|
180
|
-
The `skybridge/web` package comes with a set of hooks to help you build your widgets :
|
|
181
|
-
|
|
182
|
-
- `useOpenAiGlobal`: A generic hook to get any global data from the OpenAI iFrame skybridge runtime (in `window.openai`).
|
|
183
|
-
- `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.
|
|
184
|
-
- `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.
|
|
185
|
-
- `useToolInfo`: A hook to get the tool input, output, and response metadata with type inference. Provides a discriminated union based on status (pending/success).
|
|
186
|
-
- `useCallTool`: A @tanstack/react-query inspired hook to send make additional tool calls inside a widget.
|
|
187
|
-
- `createTypedHooks`: A factory that creates typed versions of `useCallTool` and `useToolInfo` with full type inference from your server type.
|
|
188
|
-
|
|
189
|
-
_useOpenAiGlobal_
|
|
190
|
-
|
|
191
|
-
```ts
|
|
192
|
-
import { useOpenAiGlobal } from "skybridge/web";
|
|
193
|
-
|
|
194
|
-
const theme = useOpenAiGlobal("theme");
|
|
195
|
-
```
|
|
196
|
-
|
|
197
|
-
_useToolOutput_
|
|
198
|
-
|
|
199
|
-
```ts
|
|
200
|
-
import { useToolOutput } from "skybridge/web";
|
|
201
|
-
|
|
202
|
-
const toolOutput = useToolOutput();
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
_useToolResponseMetadata_
|
|
206
|
-
|
|
207
|
-
```ts
|
|
208
|
-
import { useToolResponseMetadata } from "skybridge/web";
|
|
209
|
-
|
|
210
|
-
const toolResponseMetadata = useToolResponseMetadata();
|
|
211
|
-
```
|
|
212
|
-
|
|
213
|
-
_useToolInfo_
|
|
214
|
-
|
|
215
|
-
```ts
|
|
216
87
|
import { useToolInfo } from "skybridge/web";
|
|
217
88
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
output: { results: string[] };
|
|
221
|
-
responseMetadata: { id: number };
|
|
222
|
-
}>();
|
|
223
|
-
|
|
224
|
-
// toolInfo.input is typed based on the input type
|
|
225
|
-
// toolInfo.output is typed based on the output type (undefined when pending)
|
|
226
|
-
// toolInfo.status narrows correctly: "pending" | "success"
|
|
89
|
+
function FlightsWidget() {
|
|
90
|
+
const { output } = useToolInfo();
|
|
227
91
|
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
if (toolInfo.isSuccess) {
|
|
234
|
-
// toolInfo.output is typed here
|
|
235
|
-
console.log(toolInfo.output.results);
|
|
92
|
+
return output.structuredContent.flights.map(f =>
|
|
93
|
+
<FlightCard key={f.id} flight={f} />
|
|
94
|
+
);
|
|
236
95
|
}
|
|
237
96
|
```
|
|
238
97
|
|
|
239
|
-
|
|
98
|
+
<br />
|
|
240
99
|
|
|
241
|
-
|
|
242
|
-
import { useToolInfo } from "../skybridge"; // import typed hooks
|
|
100
|
+
## 🎯 Features at a Glance
|
|
243
101
|
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
102
|
+
- **Live Reload** — Vite HMR. See changes instantly without reinstalling.
|
|
103
|
+
- **Typed Hooks** — Full autocomplete for tools, inputs, outputs.
|
|
104
|
+
- **Widget → Tool Calls** — Trigger server actions from UI.
|
|
105
|
+
- **Dual Surface Sync** — Keep model aware of what users see with `data-llm`.
|
|
106
|
+
- **React Query-style API** — `isPending`, `isError`, callbacks.
|
|
107
|
+
- **MCP Compatible** — Extends the official SDK. Works with any MCP client.
|
|
249
108
|
|
|
250
|
-
|
|
251
|
-
return <div>Found {toolInfo.output.totalCount} results</div>;
|
|
252
|
-
}
|
|
109
|
+
<br />
|
|
253
110
|
|
|
254
|
-
|
|
255
|
-
}
|
|
256
|
-
```
|
|
257
|
-
|
|
258
|
-
_useCallTool_ in synchronous mode
|
|
259
|
-
|
|
260
|
-
```ts
|
|
261
|
-
import { useCallTool } from "skybridge/web";
|
|
262
|
-
|
|
263
|
-
export const TestTool: React.FunctionComponent = () => {
|
|
264
|
-
const { callTool, isPending } = useCallTool("myToolName");
|
|
265
|
-
|
|
266
|
-
return (
|
|
267
|
-
<div>
|
|
268
|
-
<button
|
|
269
|
-
disabled={isPending}
|
|
270
|
-
onClick={() => {
|
|
271
|
-
callTool({ input: "test input" }, {
|
|
272
|
-
onSuccess: (data) => {
|
|
273
|
-
alert("Tool returned: " + data);
|
|
274
|
-
},
|
|
275
|
-
});
|
|
276
|
-
>
|
|
277
|
-
Call Tool inside a widget
|
|
278
|
-
</button>
|
|
279
|
-
</div>
|
|
280
|
-
);
|
|
281
|
-
};
|
|
282
|
-
```
|
|
283
|
-
|
|
284
|
-
_useCallTool_ in asynchronous mode
|
|
285
|
-
|
|
286
|
-
```ts
|
|
287
|
-
import { useCallTool } from "skybridge/web";
|
|
288
|
-
|
|
289
|
-
export const TestTool: React.FunctionComponent = () => {
|
|
290
|
-
const { callToolAsync, isPending } = useCallTool("myToolName");
|
|
291
|
-
|
|
292
|
-
return (
|
|
293
|
-
<div>
|
|
294
|
-
<button
|
|
295
|
-
disabled={isPending}
|
|
296
|
-
onClick={async () => {
|
|
297
|
-
const data = await callToolAsync({ input: "test input" });
|
|
298
|
-
alert("Tool returned: " + data);
|
|
299
|
-
}}
|
|
300
|
-
>
|
|
301
|
-
Call Tool inside a widget
|
|
302
|
-
</button>
|
|
303
|
-
</div>
|
|
304
|
-
);
|
|
305
|
-
};
|
|
306
|
-
```
|
|
111
|
+
<div align="center">
|
|
307
112
|
|
|
308
|
-
|
|
113
|
+
[](https://github.com/alpic-ai/skybridge/discussions)
|
|
114
|
+
[](https://github.com/alpic-ai/skybridge/issues)
|
|
115
|
+
[](https://discord.com/invite/gNAazGueab)
|
|
309
116
|
|
|
310
|
-
|
|
117
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions
|
|
311
118
|
|
|
312
|
-
|
|
313
|
-
2. Create a new vite project in a folder named `web` and install the `skybridge` package
|
|
314
|
-
3. Replace the `vite.config.ts` file with the following:
|
|
119
|
+
<br />
|
|
315
120
|
|
|
316
|
-
|
|
317
|
-
import { defineConfig } from "vite";
|
|
318
|
-
import { skybridge } from "skybridge/web";
|
|
121
|
+
**[MIT License](LICENSE)** · Made with ❤️ by **[Alpic](https://alpic.ai)**
|
|
319
122
|
|
|
320
|
-
|
|
321
|
-
plugins: [skybridge()],
|
|
322
|
-
});
|
|
323
|
-
```
|
|
123
|
+
</div>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type RequestHandler } from "express";
|
|
2
|
+
/**
|
|
3
|
+
* Serve the built devtools React app
|
|
4
|
+
* This router serves static files from the devtools's dist directory.
|
|
5
|
+
* It should be installed at the application root, like so:
|
|
6
|
+
*
|
|
7
|
+
* const app = express();
|
|
8
|
+
*
|
|
9
|
+
* if (env.NODE_ENV !== "production") {
|
|
10
|
+
* app.use(await devtoolsStaticServer(server));
|
|
11
|
+
* app.use(await widgetsDevServer());
|
|
12
|
+
* ^^^^^^^^ Make sure to install the devtoolsStaticServer before the widgetsDevServer
|
|
13
|
+
* }
|
|
14
|
+
*/
|
|
15
|
+
export declare const devtoolsStaticServer: () => Promise<RequestHandler>;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { readFileSync } from "node:fs";
|
|
2
|
+
import path from "node:path";
|
|
3
|
+
import { fileURLToPath } from "node:url";
|
|
4
|
+
import cors from "cors";
|
|
5
|
+
import express, {} from "express";
|
|
6
|
+
/**
|
|
7
|
+
* Serve the built devtools React app
|
|
8
|
+
* This router serves static files from the devtools's dist directory.
|
|
9
|
+
* It should be installed at the application root, like so:
|
|
10
|
+
*
|
|
11
|
+
* const app = express();
|
|
12
|
+
*
|
|
13
|
+
* if (env.NODE_ENV !== "production") {
|
|
14
|
+
* app.use(await devtoolsStaticServer(server));
|
|
15
|
+
* app.use(await widgetsDevServer());
|
|
16
|
+
* ^^^^^^^^ Make sure to install the devtoolsStaticServer before the widgetsDevServer
|
|
17
|
+
* }
|
|
18
|
+
*/
|
|
19
|
+
export const devtoolsStaticServer = async () => {
|
|
20
|
+
const router = express.Router();
|
|
21
|
+
const currentDir = path.dirname(fileURLToPath(import.meta.url));
|
|
22
|
+
const devtoolsPath = path.join(currentDir, "..", "devtools");
|
|
23
|
+
router.use(cors());
|
|
24
|
+
router.use(express.static(devtoolsPath));
|
|
25
|
+
router.get("/", (_req, res, next) => {
|
|
26
|
+
const indexHtmlPath = path.join(devtoolsPath, "index.html");
|
|
27
|
+
try {
|
|
28
|
+
const indexHtml = readFileSync(indexHtmlPath, "utf-8");
|
|
29
|
+
res.setHeader("Content-Type", "text/html");
|
|
30
|
+
res.send(indexHtml);
|
|
31
|
+
}
|
|
32
|
+
catch (error) {
|
|
33
|
+
next(error);
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
return router;
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=devtoolsStaticServer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"devtoolsStaticServer.js","sourceRoot":"","sources":["../../../src/server/devtoolsStaticServer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,IAAI,MAAM,WAAW,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,OAAO,EAAE,EAAuB,MAAM,SAAS,CAAC;AAEvD;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,IAA6B,EAAE;IACtE,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;IAChC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;IAChE,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,UAAU,CAAC,CAAC;IAE7D,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC;IAEnB,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAEzC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,EAAE;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC;YACH,MAAM,SAAS,GAAG,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAC;YACvD,GAAG,CAAC,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAC;YAC3C,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,KAAK,CAAC,CAAC;QACd,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
+
export { devtoolsStaticServer } from "./devtoolsStaticServer.js";
|
|
2
|
+
export type { AnyToolRegistry, InferTools, ToolInput, ToolNames, ToolOutput, ToolResponseMetadata, } from "./inferUtilityTypes.js";
|
|
3
|
+
export type { McpServerTypes, ToolDef } from "./server.js";
|
|
1
4
|
export { McpServer } from "./server.js";
|
|
2
5
|
export { widgetsDevServer } from "./widgetsDevServer.js";
|
|
3
|
-
export type { ToolDef } from "./server.js";
|
|
4
|
-
export type { InferTools, AnyToolRegistry, ToolNames, ToolInput, ToolOutput, } from "./inferUtilityTypes.js";
|
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,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAUjE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { McpServerTypes, ToolDef } from "./server.js";
|
|
2
2
|
/**
|
|
3
3
|
* Any tool registry shape (includes both widgets and regular tools).
|
|
4
4
|
* Used as a constraint for type parameters that accept tool registries.
|
|
@@ -8,14 +8,20 @@ export type AnyToolRegistry = Record<string, ToolDef>;
|
|
|
8
8
|
* Extract the tool registry type from an McpServer instance.
|
|
9
9
|
* This includes both widgets (registered via widget()) and regular tools (registered via registerTool()).
|
|
10
10
|
*
|
|
11
|
+
* Uses the `$types` property pattern for cross-package type inference.
|
|
12
|
+
* This works across package boundaries because TypeScript uses structural typing
|
|
13
|
+
* on the shape of `$types`, rather than nominal typing on the McpServer class itself.
|
|
14
|
+
*
|
|
11
15
|
* @example
|
|
12
16
|
* ```ts
|
|
13
17
|
* type MyTools = InferTools<MyServer>;
|
|
14
18
|
* // { "search": ToolDef<...>, "calculate": ToolDef<...> }
|
|
15
19
|
* ```
|
|
16
20
|
*/
|
|
17
|
-
export type InferTools<
|
|
18
|
-
|
|
21
|
+
export type InferTools<ServerType> = ServerType extends {
|
|
22
|
+
$types: McpServerTypes<infer W>;
|
|
23
|
+
} ? W : never;
|
|
24
|
+
type ExtractTool<ServerType, K extends ToolNames<ServerType>> = InferTools<ServerType>[K];
|
|
19
25
|
/**
|
|
20
26
|
* Get a union of all tool names from an McpServer instance.
|
|
21
27
|
* This includes both widgets and regular tools.
|
|
@@ -26,7 +32,7 @@ type ExtractTool<T, K extends ToolNames<T>> = InferTools<T>[K];
|
|
|
26
32
|
* // "search" | "calculate" | "details"
|
|
27
33
|
* ```
|
|
28
34
|
*/
|
|
29
|
-
export type ToolNames<
|
|
35
|
+
export type ToolNames<ServerType> = keyof InferTools<ServerType> & string;
|
|
30
36
|
/**
|
|
31
37
|
* Get the input type for a specific tool (widget or regular tool).
|
|
32
38
|
*
|
|
@@ -35,7 +41,7 @@ export type ToolNames<T> = keyof InferTools<T> & string;
|
|
|
35
41
|
* type SearchInput = ToolInput<MyServer, "search">;
|
|
36
42
|
* ```
|
|
37
43
|
*/
|
|
38
|
-
export type ToolInput<
|
|
44
|
+
export type ToolInput<ServerType, ToolName extends ToolNames<ServerType>> = ExtractTool<ServerType, ToolName>["input"];
|
|
39
45
|
/**
|
|
40
46
|
* Get the output type for a specific tool (widget or regular tool).
|
|
41
47
|
*
|
|
@@ -44,5 +50,15 @@ export type ToolInput<T, K extends ToolNames<T>> = ExtractTool<T, K>["input"];
|
|
|
44
50
|
* type SearchOutput = ToolOutput<MyServer, "search">;
|
|
45
51
|
* ```
|
|
46
52
|
*/
|
|
47
|
-
export type ToolOutput<
|
|
53
|
+
export type ToolOutput<ServerType, ToolName extends ToolNames<ServerType>> = ExtractTool<ServerType, ToolName>["output"];
|
|
54
|
+
/**
|
|
55
|
+
* Get the responseMetadata type for a specific tool (widget or regular tool).
|
|
56
|
+
* This is inferred from the `_meta` property of the tool callback's return value.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* ```ts
|
|
60
|
+
* type SearchMeta = ToolResponseMetadata<MyServer, "search">;
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
export type ToolResponseMetadata<ServerType, ToolName extends ToolNames<ServerType>> = ExtractTool<ServerType, ToolName>["responseMetadata"];
|
|
48
64
|
export {};
|
|
@@ -1,35 +1,64 @@
|
|
|
1
1
|
import { McpServer as McpServerBase, type RegisteredTool } from "@modelcontextprotocol/sdk/server/mcp.js";
|
|
2
|
-
import type {
|
|
2
|
+
import type { AnySchema, SchemaOutput, ZodRawShapeCompat } from "@modelcontextprotocol/sdk/server/zod-compat.js";
|
|
3
3
|
import type { RequestHandlerExtra } from "@modelcontextprotocol/sdk/shared/protocol.js";
|
|
4
|
-
import type {
|
|
5
|
-
export type ToolDef<TInput = unknown, TOutput = unknown> = {
|
|
4
|
+
import type { CallToolResult, Resource, ServerNotification, ServerRequest, ToolAnnotations } from "@modelcontextprotocol/sdk/types.js";
|
|
5
|
+
export type ToolDef<TInput = unknown, TOutput = unknown, TResponseMetadata = unknown> = {
|
|
6
6
|
input: TInput;
|
|
7
7
|
output: TOutput;
|
|
8
|
+
responseMetadata: TResponseMetadata;
|
|
8
9
|
};
|
|
9
10
|
type McpServerOriginalResourceConfig = Omit<Resource, "uri" | "name" | "mimeType">;
|
|
10
|
-
type McpServerOriginalToolConfig = Omit<Parameters<McpServerBase
|
|
11
|
+
type McpServerOriginalToolConfig = Omit<Parameters<typeof McpServerBase.prototype.registerTool<ZodRawShapeCompat, ZodRawShapeCompat>>[1], "inputSchema" | "outputSchema">;
|
|
11
12
|
type ExtractStructuredContent<T> = T extends {
|
|
12
13
|
structuredContent: infer SC;
|
|
13
|
-
} ? SC :
|
|
14
|
-
type
|
|
15
|
-
|
|
14
|
+
} ? SC : never;
|
|
15
|
+
type ExtractMeta<T> = Extract<T, {
|
|
16
|
+
_meta: unknown;
|
|
17
|
+
}> extends {
|
|
18
|
+
_meta: infer M;
|
|
19
|
+
} ? M : unknown;
|
|
20
|
+
/**
|
|
21
|
+
* Type-level marker interface for cross-package type inference.
|
|
22
|
+
* This enables TypeScript to infer tool types across package boundaries
|
|
23
|
+
* using structural typing on the $types property, rather than relying on
|
|
24
|
+
* class generic inference which fails when McpServer comes from different
|
|
25
|
+
* package installations.
|
|
26
|
+
*
|
|
27
|
+
* Inspired by tRPC's _def pattern and Hono's type markers.
|
|
28
|
+
*/
|
|
29
|
+
export interface McpServerTypes<TTools extends Record<string, ToolDef>> {
|
|
30
|
+
readonly tools: TTools;
|
|
31
|
+
}
|
|
32
|
+
type Simplify<T> = {
|
|
33
|
+
[K in keyof T]: T[K];
|
|
34
|
+
};
|
|
35
|
+
type ShapeOutput<Shape extends ZodRawShapeCompat> = Simplify<{
|
|
36
|
+
[K in keyof Shape as undefined extends SchemaOutput<Shape[K]> ? never : K]: SchemaOutput<Shape[K]>;
|
|
37
|
+
} & {
|
|
38
|
+
[K in keyof Shape as undefined extends SchemaOutput<Shape[K]> ? K : never]?: SchemaOutput<Shape[K]>;
|
|
39
|
+
}>;
|
|
40
|
+
type AddTool<TTools, TName extends string, TInput extends ZodRawShapeCompat, TOutput, TResponseMetadata = unknown> = McpServer<TTools & {
|
|
41
|
+
[K in TName]: ToolDef<ShapeOutput<TInput>, TOutput, TResponseMetadata>;
|
|
16
42
|
}>;
|
|
17
|
-
type ToolConfig<TInput extends
|
|
43
|
+
type ToolConfig<TInput extends ZodRawShapeCompat | AnySchema> = {
|
|
18
44
|
title?: string;
|
|
19
45
|
description?: string;
|
|
20
46
|
inputSchema?: TInput;
|
|
21
|
-
outputSchema?:
|
|
47
|
+
outputSchema?: ZodRawShapeCompat | AnySchema;
|
|
22
48
|
annotations?: ToolAnnotations;
|
|
23
49
|
_meta?: Record<string, unknown>;
|
|
24
50
|
};
|
|
25
|
-
type ToolHandler<TInput extends
|
|
26
|
-
export declare class McpServer<TTools extends Record<string, ToolDef> =
|
|
27
|
-
|
|
51
|
+
type ToolHandler<TInput extends ZodRawShapeCompat, TReturn extends CallToolResult = CallToolResult> = (args: ShapeOutput<TInput>, extra: RequestHandlerExtra<ServerRequest, ServerNotification>) => TReturn | Promise<TReturn>;
|
|
52
|
+
export declare class McpServer<TTools extends Record<string, ToolDef> = Record<never, ToolDef>> extends McpServerBase {
|
|
53
|
+
readonly $types: McpServerTypes<TTools>;
|
|
54
|
+
registerWidget<TName extends string, TInput extends ZodRawShapeCompat, TReturn extends CallToolResult>(name: TName, resourceConfig: McpServerOriginalResourceConfig, toolConfig: McpServerOriginalToolConfig & {
|
|
28
55
|
inputSchema?: TInput;
|
|
29
|
-
outputSchema?:
|
|
30
|
-
}, toolCallback: ToolHandler<TInput, TReturn>): AddTool<TTools, TName, TInput, ExtractStructuredContent<TReturn>>;
|
|
31
|
-
registerTool<TName extends string, InputArgs extends
|
|
32
|
-
registerTool<InputArgs extends
|
|
56
|
+
outputSchema?: ZodRawShapeCompat | AnySchema;
|
|
57
|
+
}, toolCallback: ToolHandler<TInput, TReturn>): AddTool<TTools, TName, TInput, ExtractStructuredContent<TReturn>, ExtractMeta<TReturn>>;
|
|
58
|
+
registerTool<TName extends string, InputArgs extends ZodRawShapeCompat, TReturn extends CallToolResult>(name: TName, config: ToolConfig<InputArgs>, cb: ToolHandler<InputArgs, TReturn>): AddTool<TTools, TName, InputArgs, ExtractStructuredContent<TReturn>, ExtractMeta<TReturn>>;
|
|
59
|
+
registerTool<InputArgs extends ZodRawShapeCompat>(name: string, config: ToolConfig<InputArgs>, cb: ToolHandler<InputArgs>): RegisteredTool;
|
|
33
60
|
private lookupDistFile;
|
|
61
|
+
private lookupDistFileWithIndexFallback;
|
|
62
|
+
private readManifest;
|
|
34
63
|
}
|
|
35
64
|
export {};
|