skybridge 0.0.0-dev.af7f8df → 0.0.0-dev.b0530f1
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 +68 -314
- 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 +10 -0
- package/dist/src/server/server.d.ts +33 -16
- package/dist/src/server/server.js +45 -34
- 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 +56 -23
- 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.d.ts +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 +1 -0
- package/dist/src/web/data-llm.js +4 -3
- package/dist/src/web/data-llm.js.map +1 -1
- package/dist/src/web/data-llm.test.js.map +1 -1
- package/dist/src/web/generate-helpers.d.ts +9 -7
- package/dist/src/web/generate-helpers.js +4 -2
- package/dist/src/web/generate-helpers.js.map +1 -1
- package/dist/src/web/generate-helpers.test-d.js +29 -2
- package/dist/src/web/generate-helpers.test-d.js.map +1 -1
- package/dist/src/web/generate-helpers.test.js +1 -1
- package/dist/src/web/generate-helpers.test.js.map +1 -1
- 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 -2
- package/dist/src/web/hooks/index.js +1 -1
- package/dist/src/web/hooks/index.js.map +1 -1
- package/dist/src/web/hooks/use-call-tool.d.ts +1 -1
- package/dist/src/web/hooks/use-call-tool.js.map +1 -1
- package/dist/src/web/hooks/use-call-tool.test-d.js +1 -1
- package/dist/src/web/hooks/use-call-tool.test-d.js.map +1 -1
- package/dist/src/web/hooks/use-call-tool.test.js +9 -15
- 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 +3 -25
- 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 +4 -3
- package/dist/src/web/index.js +4 -3
- package/dist/src/web/index.js.map +1 -1
- package/dist/src/web/plugin/plugin.js +10 -4
- package/dist/src/web/plugin/plugin.js.map +1 -1
- package/dist/src/web/proxy.js +1 -1
- package/dist/src/web/proxy.js.map +1 -1
- package/dist/src/web/types.d.ts +6 -6
- package/package.json +11 -5
package/README.md
CHANGED
|
@@ -1,371 +1,125 @@
|
|
|
1
1
|
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
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:
|
|
3
|
+
<img alt="Skybridge" src="docs/static/img/github-banner.png" width="100%">
|
|
16
4
|
|
|
17
|
-
|
|
18
|
-
- `skybridge/web`: A react library with hooks and components to build widgets on the underlying _OpenAI iFrame skybridge_ runtime.
|
|
5
|
+
<br />
|
|
19
6
|
|
|
20
|
-
|
|
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
|
|
7
|
+
# Skybridge
|
|
25
8
|
|
|
26
|
-
|
|
27
|
-
pnpm add skybridge
|
|
28
|
-
```
|
|
9
|
+
**Build ChatGPT Apps. The Modern TypeScript Way.**
|
|
29
10
|
|
|
30
|
-
|
|
11
|
+
The fullstack TypeScript framework for ChatGPT Apps.<br />
|
|
12
|
+
**Type-safe. React-powered. Zero config.**
|
|
31
13
|
|
|
32
|
-
|
|
14
|
+
<br />
|
|
33
15
|
|
|
34
|
-
|
|
16
|
+
[](https://www.npmjs.com/package/skybridge)
|
|
17
|
+
[](https://www.npmjs.com/package/skybridge)
|
|
18
|
+
[](https://github.com/alpic-ai/skybridge/blob/main/LICENSE)
|
|
35
19
|
|
|
36
|
-
|
|
20
|
+
<br />
|
|
37
21
|
|
|
38
|
-
|
|
22
|
+
[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)
|
|
39
23
|
|
|
40
|
-
|
|
24
|
+
</div>
|
|
41
25
|
|
|
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
|
-
```
|
|
26
|
+
<br />
|
|
51
27
|
|
|
52
|
-
|
|
28
|
+
## ✨ Why Skybridge?
|
|
53
29
|
|
|
54
|
-
|
|
55
|
-
import { McpServer } from "skybridge/server";
|
|
30
|
+
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.
|
|
56
31
|
|
|
57
|
-
|
|
32
|
+
**Skybridge fixes that.**
|
|
58
33
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
```
|
|
34
|
+
| | |
|
|
35
|
+
|:--|:--|
|
|
36
|
+
| 👨💻 **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. |
|
|
37
|
+
| 🔄 **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. |
|
|
64
38
|
|
|
65
|
-
|
|
39
|
+
<br />
|
|
66
40
|
|
|
67
|
-
|
|
68
|
-
import { mountWidget } from "skybridge/web";
|
|
41
|
+
## 🚀 Get Started
|
|
69
42
|
|
|
70
|
-
|
|
71
|
-
// Your React component code goes here...
|
|
72
|
-
};
|
|
43
|
+
**Create a new ChatGPT app:**
|
|
73
44
|
|
|
74
|
-
|
|
45
|
+
```bash
|
|
46
|
+
gh repo create my-app --template alpic-ai/apps-sdk-template --clone
|
|
47
|
+
cd my-app && pnpm install
|
|
75
48
|
```
|
|
76
49
|
|
|
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.
|
|
50
|
+
**Or add to an existing project:**
|
|
86
51
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
import { skybridge } from "skybridge/web";
|
|
94
|
-
|
|
95
|
-
export default defineConfig({
|
|
96
|
-
plugins: [skybridge()],
|
|
97
|
-
});
|
|
52
|
+
```bash
|
|
53
|
+
npm i skybridge
|
|
54
|
+
yarn add skybridge
|
|
55
|
+
pnpm add skybridge
|
|
56
|
+
bun add skybridge
|
|
57
|
+
deno add skybridge
|
|
98
58
|
```
|
|
99
59
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
Skybridge provides fully typed hooks that give you autocomplete for tool names and type inference for inputs/outputs - similar to tRPC. This is opt-in and requires exporting your server type.
|
|
60
|
+
<div align="center">
|
|
103
61
|
|
|
104
|
-
|
|
62
|
+
**👉 [Read the Docs](https://skybridge.tech) 👈**
|
|
105
63
|
|
|
106
|
-
>
|
|
64
|
+
</div>
|
|
107
65
|
|
|
108
|
-
|
|
66
|
+
<br />
|
|
109
67
|
|
|
110
|
-
|
|
68
|
+
## 📦 The Stack
|
|
111
69
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
import { z } from "zod";
|
|
115
|
-
|
|
116
|
-
const server = new McpServer({ name: "my-app", version: "1.0" }, {})
|
|
117
|
-
.widget("search-voyage", {}, {
|
|
118
|
-
inputSchema: { destination: z.string() },
|
|
119
|
-
}, async ({ destination }) => {
|
|
120
|
-
return { content: [{ type: "text", text: `Found trips to ${destination}` }] };
|
|
121
|
-
})
|
|
122
|
-
.registerTool("calculate-price", {
|
|
123
|
-
inputSchema: { tripId: z.string() },
|
|
124
|
-
}, async ({ tripId }) => {
|
|
125
|
-
return { content: [{ type: "text", text: `Price for ${tripId}` }] };
|
|
126
|
-
});
|
|
127
|
-
|
|
128
|
-
export type AppType = typeof server; // ✅ Type inference works correctly
|
|
129
|
-
```
|
|
70
|
+
- **`skybridge/server`** — Drop-in MCP SDK replacement with widget registration and type inference.
|
|
71
|
+
- **`skybridge/web`** — React hooks and components for ChatGPT's runtime.
|
|
130
72
|
|
|
131
|
-
|
|
73
|
+
### Server
|
|
132
74
|
|
|
133
75
|
```ts
|
|
134
76
|
import { McpServer } from "skybridge/server";
|
|
135
|
-
import { z } from "zod";
|
|
136
77
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
server.widget("search-voyage", {}, {
|
|
78
|
+
server.registerWidget("flights", {}, {
|
|
140
79
|
inputSchema: { destination: z.string() },
|
|
141
80
|
}, async ({ destination }) => {
|
|
142
|
-
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
server.registerTool("calculate-price", {
|
|
146
|
-
inputSchema: { tripId: z.string() },
|
|
147
|
-
}, async ({ tripId }) => {
|
|
148
|
-
return { content: [{ type: "text", text: `Price for ${tripId}` }] };
|
|
81
|
+
const flights = await searchFlights(destination);
|
|
82
|
+
return { structuredContent: { flights } };
|
|
149
83
|
});
|
|
150
|
-
|
|
151
|
-
export type AppType = typeof server; // ❌ Type inference fails - tool registry is empty
|
|
152
|
-
```
|
|
153
|
-
|
|
154
|
-
_Server setup (server/src/index.ts)_
|
|
155
|
-
|
|
156
|
-
```ts
|
|
157
|
-
import { McpServer } from "skybridge/server";
|
|
158
|
-
import { z } from "zod";
|
|
159
|
-
|
|
160
|
-
const server = new McpServer({ name: "my-app", version: "1.0" }, {})
|
|
161
|
-
.widget("search-voyage", {}, {
|
|
162
|
-
description: "Search for trips",
|
|
163
|
-
inputSchema: {
|
|
164
|
-
destination: z.string(),
|
|
165
|
-
departureDate: z.string().optional(),
|
|
166
|
-
},
|
|
167
|
-
outputSchema: {
|
|
168
|
-
results: z.array(z.object({ id: z.string(), name: z.string() })),
|
|
169
|
-
totalCount: z.number(),
|
|
170
|
-
},
|
|
171
|
-
}, async ({ destination }) => {
|
|
172
|
-
// Your tool logic here...
|
|
173
|
-
return { content: [{ type: "text", text: `Found trips to ${destination}` }] };
|
|
174
|
-
})
|
|
175
|
-
.widget("get-details", {}, {
|
|
176
|
-
inputSchema: { tripId: z.string() },
|
|
177
|
-
}, async ({ tripId }) => {
|
|
178
|
-
return { content: [{ type: "text", text: `Details for ${tripId}` }] };
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
// Export the server type for the client
|
|
182
|
-
export type AppType = typeof server;
|
|
183
84
|
```
|
|
184
85
|
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
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:
|
|
188
|
-
|
|
189
|
-
```ts
|
|
190
|
-
import type { AppType } from "../server"; // type-only import
|
|
191
|
-
import { generateHelpers } from "skybridge/web";
|
|
192
|
-
|
|
193
|
-
export const { useCallTool, useToolInfo } = generateHelpers<AppType>();
|
|
194
|
-
```
|
|
195
|
-
|
|
196
|
-
_Usage in widgets (web/src/widgets/search.tsx)_
|
|
86
|
+
### Widget
|
|
197
87
|
|
|
198
88
|
```tsx
|
|
199
|
-
import { useCallTool, useToolInfo } from "../skybridge"; // import typed hooks
|
|
200
|
-
|
|
201
|
-
export function SearchWidget() {
|
|
202
|
-
const { callTool, data, isPending } = useCallTool("search-voyage");
|
|
203
|
-
// ^ autocomplete for tool names
|
|
204
|
-
const toolInfo = useToolInfo<"search-voyage">();
|
|
205
|
-
// ^ autocomplete for widget names
|
|
206
|
-
|
|
207
|
-
const handleSearch = () => {
|
|
208
|
-
callTool({ destination: "Spain" });
|
|
209
|
-
// ^ autocomplete for input fields
|
|
210
|
-
};
|
|
211
|
-
|
|
212
|
-
return (
|
|
213
|
-
<div>
|
|
214
|
-
<button onClick={handleSearch} disabled={isPending}>
|
|
215
|
-
Search
|
|
216
|
-
</button>
|
|
217
|
-
{toolInfo.isSuccess && (
|
|
218
|
-
<div>Found {toolInfo.output.structuredContent.totalCount} results</div>
|
|
219
|
-
// ^ typed output
|
|
220
|
-
)}
|
|
221
|
-
</div>
|
|
222
|
-
);
|
|
223
|
-
}
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
**Hooks**
|
|
227
|
-
|
|
228
|
-
The `skybridge/web` package comes with a set of hooks to help you build your widgets :
|
|
229
|
-
|
|
230
|
-
- `useOpenAiGlobal`: A generic hook to get any global data from the OpenAI iFrame skybridge runtime (in `window.openai`).
|
|
231
|
-
- `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.
|
|
232
|
-
- `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.
|
|
233
|
-
- `useToolInfo`: A hook to get the tool input, output, and response metadata with type inference. Provides a discriminated union based on status (pending/success).
|
|
234
|
-
- `useCallTool`: A @tanstack/react-query inspired hook to send make additional tool calls inside a widget.
|
|
235
|
-
- `generateHelpers`: A factory that creates typed versions of `useCallTool` and `useToolInfo` with full type inference from your server type.
|
|
236
|
-
|
|
237
|
-
_useOpenAiGlobal_
|
|
238
|
-
|
|
239
|
-
```ts
|
|
240
|
-
import { useOpenAiGlobal } from "skybridge/web";
|
|
241
|
-
|
|
242
|
-
const theme = useOpenAiGlobal("theme");
|
|
243
|
-
```
|
|
244
|
-
|
|
245
|
-
_useToolOutput_
|
|
246
|
-
|
|
247
|
-
```ts
|
|
248
|
-
import { useToolOutput } from "skybridge/web";
|
|
249
|
-
|
|
250
|
-
const toolOutput = useToolOutput();
|
|
251
|
-
```
|
|
252
|
-
|
|
253
|
-
_useToolResponseMetadata_
|
|
254
|
-
|
|
255
|
-
```ts
|
|
256
|
-
import { useToolResponseMetadata } from "skybridge/web";
|
|
257
|
-
|
|
258
|
-
const toolResponseMetadata = useToolResponseMetadata();
|
|
259
|
-
```
|
|
260
|
-
|
|
261
|
-
_useToolInfo_
|
|
262
|
-
|
|
263
|
-
```ts
|
|
264
89
|
import { useToolInfo } from "skybridge/web";
|
|
265
90
|
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
output: { results: string[] };
|
|
269
|
-
responseMetadata: { id: number };
|
|
270
|
-
}>();
|
|
271
|
-
|
|
272
|
-
// toolInfo.input is typed based on the input type
|
|
273
|
-
// toolInfo.output.structuredContent is typed based on the output type (undefined when pending)
|
|
274
|
-
// toolInfo.status narrows correctly: "pending" | "success"
|
|
91
|
+
function FlightsWidget() {
|
|
92
|
+
const { output } = useToolInfo();
|
|
275
93
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
if (toolInfo.isSuccess) {
|
|
282
|
-
// toolInfo.output.structuredContent is typed here
|
|
283
|
-
console.log(toolInfo.output.structuredContent.results);
|
|
94
|
+
return output.structuredContent.flights.map(f =>
|
|
95
|
+
<FlightCard key={f.id} flight={f} />
|
|
96
|
+
);
|
|
284
97
|
}
|
|
285
98
|
```
|
|
286
99
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
```tsx
|
|
290
|
-
import { useToolInfo } from "../skybridge"; // import typed hooks
|
|
291
|
-
|
|
292
|
-
export function SearchWidget() {
|
|
293
|
-
const toolInfo = useToolInfo<"search-voyage">();
|
|
294
|
-
// ^ autocomplete for widget names
|
|
295
|
-
// toolInfo.input is typed as { destination: string; departureDate?: string; ... }
|
|
296
|
-
// toolInfo.output.structuredContent is typed as { results: Array<...>; totalCount: number; }
|
|
297
|
-
|
|
298
|
-
if (toolInfo.isSuccess) {
|
|
299
|
-
return <div>Found {toolInfo.output.structuredContent.totalCount} results</div>;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
return <div>Searching for {toolInfo.input.destination}...</div>;
|
|
303
|
-
}
|
|
304
|
-
```
|
|
100
|
+
<br />
|
|
305
101
|
|
|
306
|
-
|
|
102
|
+
## 🎯 Features at a Glance
|
|
307
103
|
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
return (
|
|
315
|
-
<div>
|
|
316
|
-
<button
|
|
317
|
-
disabled={isPending}
|
|
318
|
-
onClick={() => {
|
|
319
|
-
callTool({ input: "test input" }, {
|
|
320
|
-
onSuccess: (data) => {
|
|
321
|
-
alert("Tool returned: " + data);
|
|
322
|
-
},
|
|
323
|
-
});
|
|
324
|
-
>
|
|
325
|
-
Call Tool inside a widget
|
|
326
|
-
</button>
|
|
327
|
-
</div>
|
|
328
|
-
);
|
|
329
|
-
};
|
|
330
|
-
```
|
|
104
|
+
- **Live Reload** — Vite HMR. See changes instantly without reinstalling.
|
|
105
|
+
- **Typed Hooks** — Full autocomplete for tools, inputs, outputs.
|
|
106
|
+
- **Widget → Tool Calls** — Trigger server actions from UI.
|
|
107
|
+
- **Dual Surface Sync** — Keep model aware of what users see with `data-llm`.
|
|
108
|
+
- **React Query-style API** — `isPending`, `isError`, callbacks.
|
|
109
|
+
- **MCP Compatible** — Extends the official SDK. Works with any MCP client.
|
|
331
110
|
|
|
332
|
-
|
|
111
|
+
<br />
|
|
333
112
|
|
|
334
|
-
|
|
335
|
-
import { useCallTool } from "skybridge/web";
|
|
336
|
-
|
|
337
|
-
export const TestTool: React.FunctionComponent = () => {
|
|
338
|
-
const { callToolAsync, isPending } = useCallTool("myToolName");
|
|
339
|
-
|
|
340
|
-
return (
|
|
341
|
-
<div>
|
|
342
|
-
<button
|
|
343
|
-
disabled={isPending}
|
|
344
|
-
onClick={async () => {
|
|
345
|
-
const data = await callToolAsync({ input: "test input" });
|
|
346
|
-
alert("Tool returned: " + data);
|
|
347
|
-
}}
|
|
348
|
-
>
|
|
349
|
-
Call Tool inside a widget
|
|
350
|
-
</button>
|
|
351
|
-
</div>
|
|
352
|
-
);
|
|
353
|
-
};
|
|
354
|
-
```
|
|
113
|
+
<div align="center">
|
|
355
114
|
|
|
356
|
-
|
|
115
|
+
[](https://github.com/alpic-ai/skybridge/discussions)
|
|
116
|
+
[](https://github.com/alpic-ai/skybridge/issues)
|
|
117
|
+
[](https://discord.com/invite/gNAazGueab)
|
|
357
118
|
|
|
358
|
-
|
|
119
|
+
See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions
|
|
359
120
|
|
|
360
|
-
|
|
361
|
-
2. Create a new vite project in a folder named `web` and install the `skybridge` package
|
|
362
|
-
3. Replace the `vite.config.ts` file with the following:
|
|
121
|
+
<br />
|
|
363
122
|
|
|
364
|
-
|
|
365
|
-
import { defineConfig } from "vite";
|
|
366
|
-
import { skybridge } from "skybridge/web";
|
|
123
|
+
**[MIT License](LICENSE)** · Made with ❤️ by **[Alpic](https://alpic.ai)**
|
|
367
124
|
|
|
368
|
-
|
|
369
|
-
plugins: [skybridge()],
|
|
370
|
-
});
|
|
371
|
-
```
|
|
125
|
+
</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, McpServerTypes } 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"}
|
|
@@ -51,4 +51,14 @@ export type ToolInput<ServerType, ToolName extends ToolNames<ServerType>> = Extr
|
|
|
51
51
|
* ```
|
|
52
52
|
*/
|
|
53
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"];
|
|
54
64
|
export {};
|
|
@@ -1,16 +1,22 @@
|
|
|
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
14
|
} ? SC : never;
|
|
15
|
+
type ExtractMeta<T> = Extract<T, {
|
|
16
|
+
_meta: unknown;
|
|
17
|
+
}> extends {
|
|
18
|
+
_meta: infer M;
|
|
19
|
+
} ? M : unknown;
|
|
14
20
|
/**
|
|
15
21
|
* Type-level marker interface for cross-package type inference.
|
|
16
22
|
* This enables TypeScript to infer tool types across package boundaries
|
|
@@ -20,29 +26,40 @@ type ExtractStructuredContent<T> = T extends {
|
|
|
20
26
|
*
|
|
21
27
|
* Inspired by tRPC's _def pattern and Hono's type markers.
|
|
22
28
|
*/
|
|
23
|
-
export interface McpServerTypes<TTools extends Record<string, ToolDef
|
|
29
|
+
export interface McpServerTypes<TTools extends Record<string, ToolDef>> {
|
|
24
30
|
readonly tools: TTools;
|
|
25
31
|
}
|
|
26
|
-
type
|
|
27
|
-
[K in
|
|
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>;
|
|
28
42
|
}>;
|
|
29
|
-
type ToolConfig<TInput extends
|
|
43
|
+
type ToolConfig<TInput extends ZodRawShapeCompat | AnySchema> = {
|
|
30
44
|
title?: string;
|
|
31
45
|
description?: string;
|
|
32
46
|
inputSchema?: TInput;
|
|
33
|
-
outputSchema?:
|
|
47
|
+
outputSchema?: ZodRawShapeCompat | AnySchema;
|
|
34
48
|
annotations?: ToolAnnotations;
|
|
35
49
|
_meta?: Record<string, unknown>;
|
|
36
50
|
};
|
|
37
|
-
type ToolHandler<TInput extends
|
|
38
|
-
export declare class McpServer<TTools extends Record<string, ToolDef> =
|
|
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 {
|
|
39
53
|
readonly $types: McpServerTypes<TTools>;
|
|
40
|
-
|
|
54
|
+
registerWidget<TName extends string, TInput extends ZodRawShapeCompat, TReturn extends CallToolResult>(name: TName, resourceConfig: McpServerOriginalResourceConfig, toolConfig: McpServerOriginalToolConfig & {
|
|
41
55
|
inputSchema?: TInput;
|
|
42
|
-
outputSchema?:
|
|
43
|
-
}, toolCallback: ToolHandler<TInput, TReturn>): AddTool<TTools, TName, TInput, ExtractStructuredContent<TReturn>>;
|
|
44
|
-
registerTool<TName extends string, InputArgs extends
|
|
45
|
-
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;
|
|
60
|
+
private registerWidgetResource;
|
|
46
61
|
private lookupDistFile;
|
|
62
|
+
private lookupDistFileWithIndexFallback;
|
|
63
|
+
private readManifest;
|
|
47
64
|
}
|
|
48
65
|
export {};
|