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.
Files changed (125) hide show
  1. package/LICENSE +21 -674
  2. package/README.md +70 -270
  3. package/dist/src/server/devtoolsStaticServer.d.ts +15 -0
  4. package/dist/src/server/devtoolsStaticServer.js +38 -0
  5. package/dist/src/server/devtoolsStaticServer.js.map +1 -0
  6. package/dist/src/server/index.d.ts +3 -2
  7. package/dist/src/server/index.js +1 -0
  8. package/dist/src/server/index.js.map +1 -1
  9. package/dist/src/server/inferUtilityTypes.d.ts +22 -6
  10. package/dist/src/server/server.d.ts +45 -16
  11. package/dist/src/server/server.js +15 -6
  12. package/dist/src/server/server.js.map +1 -1
  13. package/dist/src/server/templateHelper.js +5 -4
  14. package/dist/src/server/templateHelper.js.map +1 -1
  15. package/dist/src/server/templates/development.hbs +2 -2
  16. package/dist/src/server/widgetsDevServer.js +3 -3
  17. package/dist/src/server/widgetsDevServer.js.map +1 -1
  18. package/dist/src/test/utils.d.ts +44 -9
  19. package/dist/src/test/utils.js +66 -8
  20. package/dist/src/test/utils.js.map +1 -1
  21. package/dist/src/test/widget.test.js +43 -21
  22. package/dist/src/test/widget.test.js.map +1 -1
  23. package/dist/src/web/create-store.d.ts +3 -0
  24. package/dist/src/web/create-store.js +25 -0
  25. package/dist/src/web/create-store.js.map +1 -0
  26. package/dist/src/web/create-store.test.js +70 -0
  27. package/dist/src/web/create-store.test.js.map +1 -0
  28. package/dist/src/web/data-llm.d.ts +14 -0
  29. package/dist/src/web/data-llm.js +68 -0
  30. package/dist/src/web/data-llm.js.map +1 -0
  31. package/dist/src/web/data-llm.test.js +76 -0
  32. package/dist/src/web/data-llm.test.js.map +1 -0
  33. package/dist/src/web/{typed-hooks.d.ts → generate-helpers.d.ts} +23 -20
  34. package/dist/src/web/{typed-hooks.js → generate-helpers.js} +14 -10
  35. package/dist/src/web/generate-helpers.js.map +1 -0
  36. package/dist/src/web/generate-helpers.test-d.d.ts +1 -0
  37. package/dist/src/web/generate-helpers.test-d.js +180 -0
  38. package/dist/src/web/generate-helpers.test-d.js.map +1 -0
  39. package/dist/src/web/generate-helpers.test.d.ts +1 -0
  40. package/dist/src/web/{typed-hooks.test.js → generate-helpers.test.js} +5 -5
  41. package/dist/src/web/generate-helpers.test.js.map +1 -0
  42. package/dist/src/web/helpers/state.d.ts +7 -0
  43. package/dist/src/web/helpers/state.js +40 -0
  44. package/dist/src/web/helpers/state.js.map +1 -0
  45. package/dist/src/web/helpers/state.test.d.ts +1 -0
  46. package/dist/src/web/helpers/state.test.js +53 -0
  47. package/dist/src/web/helpers/state.test.js.map +1 -0
  48. package/dist/src/web/hooks/index.d.ts +2 -4
  49. package/dist/src/web/hooks/index.js +2 -4
  50. package/dist/src/web/hooks/index.js.map +1 -1
  51. package/dist/src/web/hooks/use-call-tool.d.ts +21 -20
  52. package/dist/src/web/hooks/use-call-tool.js +7 -15
  53. package/dist/src/web/hooks/use-call-tool.js.map +1 -1
  54. package/dist/src/web/hooks/use-call-tool.test-d.d.ts +1 -0
  55. package/dist/src/web/hooks/use-call-tool.test-d.js +104 -0
  56. package/dist/src/web/hooks/use-call-tool.test-d.js.map +1 -0
  57. package/dist/src/web/hooks/use-call-tool.test.js +14 -12
  58. package/dist/src/web/hooks/use-call-tool.test.js.map +1 -1
  59. package/dist/src/web/hooks/use-display-mode.js.map +1 -1
  60. package/dist/src/web/hooks/use-display-mode.test.js +2 -2
  61. package/dist/src/web/hooks/use-display-mode.test.js.map +1 -1
  62. package/dist/src/web/hooks/use-files.test.js +1 -1
  63. package/dist/src/web/hooks/use-files.test.js.map +1 -1
  64. package/dist/src/web/hooks/use-locale.js.map +1 -1
  65. package/dist/src/web/hooks/use-locale.test.js +2 -2
  66. package/dist/src/web/hooks/use-locale.test.js.map +1 -1
  67. package/dist/src/web/hooks/use-open-external.test.js +2 -2
  68. package/dist/src/web/hooks/use-open-external.test.js.map +1 -1
  69. package/dist/src/web/hooks/use-openai-global.d.ts +2 -2
  70. package/dist/src/web/hooks/use-openai-global.js +7 -5
  71. package/dist/src/web/hooks/use-openai-global.js.map +1 -1
  72. package/dist/src/web/hooks/use-request-modal.test.js +2 -2
  73. package/dist/src/web/hooks/use-request-modal.test.js.map +1 -1
  74. package/dist/src/web/hooks/use-theme.js.map +1 -1
  75. package/dist/src/web/hooks/use-theme.test.js +2 -2
  76. package/dist/src/web/hooks/use-theme.test.js.map +1 -1
  77. package/dist/src/web/hooks/use-tool-info.d.ts +1 -1
  78. package/dist/src/web/hooks/use-tool-info.js +4 -6
  79. package/dist/src/web/hooks/use-tool-info.js.map +1 -1
  80. package/dist/src/web/hooks/use-tool-info.test-d.js +0 -1
  81. package/dist/src/web/hooks/use-tool-info.test-d.js.map +1 -1
  82. package/dist/src/web/hooks/use-tool-info.test.js +2 -2
  83. package/dist/src/web/hooks/use-tool-info.test.js.map +1 -1
  84. package/dist/src/web/hooks/use-user-agent.js.map +1 -1
  85. package/dist/src/web/hooks/use-user-agent.test.js +2 -2
  86. package/dist/src/web/hooks/use-user-agent.test.js.map +1 -1
  87. package/dist/src/web/hooks/use-widget-state.js +9 -7
  88. package/dist/src/web/hooks/use-widget-state.js.map +1 -1
  89. package/dist/src/web/hooks/use-widget-state.test.js +2 -2
  90. package/dist/src/web/hooks/use-widget-state.test.js.map +1 -1
  91. package/dist/src/web/index.d.ts +6 -4
  92. package/dist/src/web/index.js +6 -4
  93. package/dist/src/web/index.js.map +1 -1
  94. package/dist/src/web/plugin/data-llm.test.d.ts +1 -0
  95. package/dist/src/web/plugin/data-llm.test.js +81 -0
  96. package/dist/src/web/plugin/data-llm.test.js.map +1 -0
  97. package/dist/src/web/plugin/plugin.js +39 -0
  98. package/dist/src/web/plugin/plugin.js.map +1 -0
  99. package/dist/src/web/plugin/transform-data-llm.d.ts +12 -0
  100. package/dist/src/web/plugin/transform-data-llm.js +93 -0
  101. package/dist/src/web/plugin/transform-data-llm.js.map +1 -0
  102. package/dist/src/web/plugin/transform-data-llm.test.d.ts +1 -0
  103. package/dist/src/web/plugin/transform-data-llm.test.js +81 -0
  104. package/dist/src/web/plugin/transform-data-llm.test.js.map +1 -0
  105. package/dist/src/web/proxy.js +1 -1
  106. package/dist/src/web/proxy.js.map +1 -1
  107. package/dist/src/web/types.d.ts +14 -4
  108. package/dist/src/web/types.js +1 -0
  109. package/dist/src/web/types.js.map +1 -1
  110. package/package.json +14 -6
  111. package/dist/src/web/hooks/use-tool-output.d.ts +0 -4
  112. package/dist/src/web/hooks/use-tool-output.js +0 -9
  113. package/dist/src/web/hooks/use-tool-output.js.map +0 -1
  114. package/dist/src/web/hooks/use-tool-response-metadata.d.ts +0 -4
  115. package/dist/src/web/hooks/use-tool-response-metadata.js +0 -8
  116. package/dist/src/web/hooks/use-tool-response-metadata.js.map +0 -1
  117. package/dist/src/web/plugin.js +0 -28
  118. package/dist/src/web/plugin.js.map +0 -1
  119. package/dist/src/web/typed-hooks.js.map +0 -1
  120. package/dist/src/web/typed-hooks.test-d.js +0 -90
  121. package/dist/src/web/typed-hooks.test-d.js.map +0 -1
  122. package/dist/src/web/typed-hooks.test.js.map +0 -1
  123. /package/dist/src/web/{typed-hooks.test-d.d.ts → create-store.test.d.ts} +0 -0
  124. /package/dist/src/web/{typed-hooks.test.d.ts → data-llm.test.d.ts} +0 -0
  125. /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
- # Skybridge
4
-
5
- **Skybridge is the TypeScript framework for building ChatGPT apps**
6
-
7
- [![By Alpic](https://img.shields.io/badge/Made%20by%20Alpic-f6ffed?logo=alpic)](https://alpic.ai)
3
+ <img alt="Skybridge" src="docs/static/img/logo.png" width="220">
8
4
 
9
- ![NPM Downloads](https://img.shields.io/npm/dm/skybridge?color=e90060)
10
- ![NPM Version](https://img.shields.io/npm/v/skybridge?color=e90060)
11
- ![GitHub License](https://img.shields.io/github/license/alpic-ai/skybridge?color=e90060)
5
+ # Skybridge
12
6
 
13
- </div>
7
+ **Build ChatGPT Apps. The Modern TypeScript Way.**
14
8
 
15
- Skybridge comes with 2 packages:
9
+ The fullstack TypeScript framework for ChatGPT Apps.<br />
10
+ **Type-safe. React-powered. Zero config.**
16
11
 
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.
12
+ <br />
19
13
 
20
- ## Quick start
14
+ [![NPM Version](https://img.shields.io/npm/v/skybridge?color=e90060&style=for-the-badge)](https://www.npmjs.com/package/skybridge)
15
+ [![NPM Downloads](https://img.shields.io/npm/dm/skybridge?color=e90060&style=for-the-badge)](https://www.npmjs.com/package/skybridge)
16
+ [![GitHub License](https://img.shields.io/github/license/alpic-ai/skybridge?color=e90060&style=for-the-badge)](https://github.com/alpic-ai/skybridge/blob/main/LICENSE)
21
17
 
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.
18
+ <br />
23
19
 
24
- ## Installation
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
- ```bash
27
- pnpm add skybridge
28
- ```
22
+ </div>
29
23
 
30
- ## Concepts
24
+ <br />
31
25
 
32
- ### Widgets
26
+ ## ✨ Why Skybridge?
33
27
 
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.
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
- 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.
30
+ **Skybridge fixes that.**
37
31
 
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:
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
- _Project structure_
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
- _server/src/index.ts_
41
+ **Create a new ChatGPT app:**
53
42
 
54
- ```ts
55
- import { McpServer } from "skybridge/server";
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
- _web/src/widgets/pokemon.tsx_
48
+ **Or add to an existing project:**
66
49
 
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 />);
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
- ## 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.
58
+ <div align="center">
90
59
 
91
- ```ts
92
- import { defineConfig } from "vite";
93
- import { skybridge } from "skybridge/web";
60
+ **👉 [Read the Docs](https://skybridge.tech) 👈**
94
61
 
95
- export default defineConfig({
96
- plugins: [skybridge()],
97
- });
98
- ```
62
+ </div>
99
63
 
100
- **Typed Hooks**
64
+ <br />
101
65
 
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.
66
+ ## 📦 The Stack
103
67
 
104
- > **Tip:** For the best TypeScript experience, use typed hooks throughout your application. They provide autocomplete, type safety, and better IDE support.
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
- _Server setup (server/src/index.ts)_
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
- export const { useCallTool, useToolInfo } = createTypedHooks<AppType>();
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
- _Usage in widgets (web/src/widgets/search.tsx)_
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
- const toolInfo = useToolInfo<{
219
- input: { query: string };
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
- if (toolInfo.isPending) {
229
- // toolInfo.output is undefined here
230
- console.log(toolInfo.input.query);
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
- _useToolInfo_ with typed hooks (recommended)
98
+ <br />
240
99
 
241
- ```tsx
242
- import { useToolInfo } from "../skybridge"; // import typed hooks
100
+ ## 🎯 Features at a Glance
243
101
 
244
- export function SearchWidget() {
245
- const toolInfo = useToolInfo<"search-voyage">();
246
- // ^ autocomplete for widget names
247
- // toolInfo.input is typed as { destination: string; departureDate?: string; ... }
248
- // toolInfo.output is typed as { results: Array<...>; totalCount: number; } | undefined
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
- if (toolInfo.isSuccess) {
251
- return <div>Found {toolInfo.output.totalCount} results</div>;
252
- }
109
+ <br />
253
110
 
254
- return <div>Searching for {toolInfo.input.destination}...</div>;
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
- ## Migrate your existing MCP server to a ChatGPT app
113
+ [![GitHub Discussions](https://img.shields.io/badge/Discussions-Ask%20Questions-blue?style=flat-square&logo=github)](https://github.com/alpic-ai/skybridge/discussions)
114
+ [![GitHub Issues](https://img.shields.io/badge/Issues-Report%20Bugs-red?style=flat-square&logo=github)](https://github.com/alpic-ai/skybridge/issues)
115
+ [![Discord](https://img.shields.io/badge/Discord-Chat-5865F2?style=flat-square&logo=discord&logoColor=white)](https://discord.com/invite/gNAazGueab)
309
116
 
310
- If you're already using the `@modelcontextprotocol/sdk` to build a MCP server, you can migrate to a ChatGPT app by following these steps:
117
+ See [CONTRIBUTING.md](CONTRIBUTING.md) for setup instructions
311
118
 
312
- 1. Replace your `McpServer` import from `@modelcontextprotocol/sdk` with the same import from `skybridge/server`
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
- ```ts
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
- export default defineConfig({
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";
@@ -1,3 +1,4 @@
1
+ export { devtoolsStaticServer } from "./devtoolsStaticServer.js";
1
2
  export { McpServer } from "./server.js";
2
3
  export { widgetsDevServer } from "./widgetsDevServer.js";
3
4
  //# sourceMappingURL=index.js.map
@@ -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 { McpServer, ToolDef } from "./server.js";
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<T> = T extends McpServer<infer W> ? W : never;
18
- type ExtractTool<T, K extends ToolNames<T>> = InferTools<T>[K];
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<T> = keyof InferTools<T> & string;
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<T, K extends ToolNames<T>> = ExtractTool<T, K>["input"];
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<T, K extends ToolNames<T>> = ExtractTool<T, K>["output"];
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 { Resource, ToolAnnotations, CallToolResult, ServerRequest, ServerNotification } from "@modelcontextprotocol/sdk/types.js";
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 { ZodRawShape, ZodObject, infer as Infer } from "zod";
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["registerTool"]>[1], "inputSchema" | "outputSchema">;
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 AddTool<TTools, TName extends string, TInput extends ZodRawShape, TOutput> = McpServer<TTools & {
15
- [K in TName]: ToolDef<Infer<ZodObject<TInput>>, TOutput>;
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 ZodRawShape> = {
43
+ type ToolConfig<TInput extends ZodRawShapeCompat | AnySchema> = {
18
44
  title?: string;
19
45
  description?: string;
20
46
  inputSchema?: TInput;
21
- outputSchema?: ZodRawShape;
47
+ outputSchema?: ZodRawShapeCompat | AnySchema;
22
48
  annotations?: ToolAnnotations;
23
49
  _meta?: Record<string, unknown>;
24
50
  };
25
- type ToolHandler<TInput extends ZodRawShape, TReturn extends CallToolResult = CallToolResult> = (args: Infer<ZodObject<TInput>>, extra: RequestHandlerExtra<ServerRequest, ServerNotification>) => TReturn | Promise<TReturn>;
26
- export declare class McpServer<TTools extends Record<string, ToolDef> = {}> extends McpServerBase {
27
- widget<TName extends string, TInput extends ZodRawShape, TReturn extends CallToolResult>(name: TName, resourceConfig: McpServerOriginalResourceConfig, toolConfig: McpServerOriginalToolConfig & {
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?: ZodRawShape;
30
- }, toolCallback: ToolHandler<TInput, TReturn>): AddTool<TTools, TName, TInput, ExtractStructuredContent<TReturn>>;
31
- registerTool<TName extends string, InputArgs extends ZodRawShape, TReturn extends CallToolResult>(name: TName, config: ToolConfig<InputArgs>, cb: ToolHandler<InputArgs, TReturn>): AddTool<TTools, TName, InputArgs, ExtractStructuredContent<TReturn>>;
32
- registerTool<InputArgs extends ZodRawShape>(name: string, config: ToolConfig<InputArgs>, cb: ToolHandler<InputArgs>): RegisteredTool;
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 {};