@modelcontextprotocol/ext-apps 0.4.0 → 0.4.2
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 +196 -1
- package/README.md +274 -25
- package/dist/docs/patterns.d.ts +9 -0
- package/dist/src/app-bridge.d.ts +253 -247
- package/dist/src/app-bridge.examples.d.ts +9 -0
- package/dist/src/app-bridge.js +17 -17
- package/dist/src/app-with-deps.js +9 -9
- package/dist/src/app.d.ts +246 -209
- package/dist/src/app.examples.d.ts +9 -0
- package/dist/src/app.js +10 -10
- package/dist/src/generated/schema.d.ts +45 -33
- package/dist/src/generated/schema.test.d.ts +1 -0
- package/dist/src/message-transport.d.ts +30 -32
- package/dist/src/message-transport.examples.d.ts +9 -0
- package/dist/src/react/index.d.ts +8 -10
- package/dist/src/react/index.examples.d.ts +6 -0
- package/dist/src/react/index.js +8 -8
- package/dist/src/react/react-with-deps.js +8 -8
- package/dist/src/react/useApp.d.ts +58 -44
- package/dist/src/react/useApp.examples.d.ts +6 -0
- package/dist/src/react/useAutoResize.d.ts +14 -11
- package/dist/src/react/useAutoResize.examples.d.ts +6 -0
- package/dist/src/react/useDocumentTheme.d.ts +14 -16
- package/dist/src/react/useDocumentTheme.examples.d.ts +6 -0
- package/dist/src/react/useHostStyles.d.ts +45 -53
- package/dist/src/react/useHostStyles.examples.d.ts +6 -0
- package/dist/src/server/index.d.ts +215 -41
- package/dist/src/server/index.examples.d.ts +9 -0
- package/dist/src/server/index.js +10 -10
- package/dist/src/spec.types.d.ts +56 -40
- package/dist/src/styles.d.ts +75 -32
- package/dist/src/styles.examples.d.ts +9 -0
- package/dist/src/types.d.ts +8 -7
- package/package.json +26 -7
package/dist/src/app-bridge.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
|
|
2
2
|
import { Transport } from "@modelcontextprotocol/sdk/shared/transport.js";
|
|
3
|
-
import { CallToolRequest, CallToolResult, EmptyResult, Implementation, ListPromptsRequest, ListPromptsResult, ListResourcesRequest, ListResourcesResult, ListResourceTemplatesRequest, ListResourceTemplatesResult, LoggingMessageNotification, PingRequest, PromptListChangedNotification, ReadResourceRequest, ReadResourceResult, ResourceListChangedNotification, ToolListChangedNotification } from "@modelcontextprotocol/sdk/types.js";
|
|
3
|
+
import { CallToolRequest, CallToolResult, EmptyResult, Implementation, ListPromptsRequest, ListPromptsResult, ListResourcesRequest, ListResourcesResult, ListResourceTemplatesRequest, ListResourceTemplatesResult, LoggingMessageNotification, PingRequest, PromptListChangedNotification, ReadResourceRequest, ReadResourceResult, ResourceListChangedNotification, Tool, ToolListChangedNotification } from "@modelcontextprotocol/sdk/types.js";
|
|
4
4
|
import { Protocol, ProtocolOptions, RequestOptions } from "@modelcontextprotocol/sdk/shared/protocol.js";
|
|
5
5
|
import { type AppNotification, type AppRequest, type AppResult, type McpUiSandboxResourceReadyNotification, type McpUiSizeChangedNotification, type McpUiToolCancelledNotification, type McpUiToolInputNotification, type McpUiToolInputPartialNotification, type McpUiToolResultNotification, McpUiAppCapabilities, McpUiUpdateModelContextRequest, McpUiHostCapabilities, McpUiHostContext, McpUiHostContextChangedNotification, McpUiInitializedNotification, McpUiMessageRequest, McpUiMessageResult, McpUiOpenLinkRequest, McpUiOpenLinkResult, McpUiResourceTeardownRequest, McpUiSandboxProxyReadyNotification, McpUiRequestDisplayModeRequest, McpUiRequestDisplayModeResult, McpUiResourcePermissions } from "./types";
|
|
6
6
|
export * from "./types";
|
|
@@ -15,7 +15,7 @@ export { PostMessageTransport } from "./message-transport";
|
|
|
15
15
|
*
|
|
16
16
|
* @param tool - A tool object with optional `_meta` property
|
|
17
17
|
* @returns The UI resource URI if valid, undefined if not present
|
|
18
|
-
* @throws Error if resourceUri is present but invalid (not
|
|
18
|
+
* @throws Error if resourceUri is present but invalid (does not start with "ui://")
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
21
|
* ```typescript
|
|
@@ -30,9 +30,7 @@ export { PostMessageTransport } from "./message-transport";
|
|
|
30
30
|
* });
|
|
31
31
|
* ```
|
|
32
32
|
*/
|
|
33
|
-
export declare function getToolUiResourceUri(tool:
|
|
34
|
-
_meta?: Record<string, unknown>;
|
|
35
|
-
}): string | undefined;
|
|
33
|
+
export declare function getToolUiResourceUri(tool: Partial<Tool>): string | undefined;
|
|
36
34
|
/**
|
|
37
35
|
* Build iframe `allow` attribute string from permissions.
|
|
38
36
|
*
|
|
@@ -51,9 +49,12 @@ export declare function getToolUiResourceUri(tool: {
|
|
|
51
49
|
*/
|
|
52
50
|
export declare function buildAllowAttribute(permissions: McpUiResourcePermissions | undefined): string;
|
|
53
51
|
/**
|
|
54
|
-
* Options for configuring AppBridge behavior.
|
|
52
|
+
* Options for configuring {@link AppBridge `AppBridge`} behavior.
|
|
55
53
|
*
|
|
56
|
-
* @
|
|
54
|
+
* @property hostContext - Optional initial host context to provide to the view
|
|
55
|
+
*
|
|
56
|
+
* @see `ProtocolOptions` from @modelcontextprotocol/sdk for available options
|
|
57
|
+
* @see {@link McpUiHostContext `McpUiHostContext`} for the hostContext structure
|
|
57
58
|
*/
|
|
58
59
|
export type HostOptions = ProtocolOptions & {
|
|
59
60
|
hostContext?: McpUiHostContext;
|
|
@@ -68,7 +69,7 @@ export declare const SUPPORTED_PROTOCOL_VERSIONS: string[];
|
|
|
68
69
|
/**
|
|
69
70
|
* Extra metadata passed to request handlers.
|
|
70
71
|
*
|
|
71
|
-
* This type represents the additional context provided by the Protocol class
|
|
72
|
+
* This type represents the additional context provided by the `Protocol` class
|
|
72
73
|
* when handling requests, including abort signals and session information.
|
|
73
74
|
* It is extracted from the MCP SDK's request handler signature.
|
|
74
75
|
*
|
|
@@ -76,34 +77,32 @@ export declare const SUPPORTED_PROTOCOL_VERSIONS: string[];
|
|
|
76
77
|
*/
|
|
77
78
|
type RequestHandlerExtra = Parameters<Parameters<AppBridge["setRequestHandler"]>[1]>[1];
|
|
78
79
|
/**
|
|
79
|
-
* Host-side bridge for communicating with a single
|
|
80
|
+
* Host-side bridge for communicating with a single View ({@link app!App `App`}).
|
|
80
81
|
*
|
|
81
|
-
* AppBridge extends the MCP SDK's Protocol class and acts as a proxy between
|
|
82
|
-
* the host application and a
|
|
83
|
-
*
|
|
84
|
-
*
|
|
82
|
+
* `AppBridge` extends the MCP SDK's `Protocol` class and acts as a proxy between
|
|
83
|
+
* the host application and a view running in an iframe. When an MCP client
|
|
84
|
+
* is provided to the constructor, it automatically forwards MCP server capabilities
|
|
85
|
+
* (tools, resources, prompts) to the view. It also handles the initialization
|
|
86
|
+
* handshake.
|
|
85
87
|
*
|
|
86
88
|
* ## Architecture
|
|
87
89
|
*
|
|
88
|
-
* **
|
|
90
|
+
* **View ↔ AppBridge ↔ Host ↔ MCP Server**
|
|
89
91
|
*
|
|
90
|
-
* The bridge proxies requests from the
|
|
92
|
+
* The bridge proxies requests from the view to the MCP server and forwards
|
|
91
93
|
* responses back. It also sends host-initiated notifications like tool input
|
|
92
|
-
* and results to the
|
|
94
|
+
* and results to the view.
|
|
93
95
|
*
|
|
94
96
|
* ## Lifecycle
|
|
95
97
|
*
|
|
96
|
-
* 1. **Create**: Instantiate AppBridge with MCP client and capabilities
|
|
98
|
+
* 1. **Create**: Instantiate `AppBridge` with MCP client and capabilities
|
|
97
99
|
* 2. **Connect**: Call `connect()` with transport to establish communication
|
|
98
|
-
* 3. **Wait for init**:
|
|
99
|
-
* 4. **Send data**: Call `sendToolInput
|
|
100
|
-
* 5. **Teardown**: Call `teardownResource
|
|
100
|
+
* 3. **Wait for init**: View sends initialize request, bridge responds
|
|
101
|
+
* 4. **Send data**: Call {@link sendToolInput `sendToolInput`}, {@link sendToolResult `sendToolResult`}, etc.
|
|
102
|
+
* 5. **Teardown**: Call {@link teardownResource `teardownResource`} before unmounting iframe
|
|
101
103
|
*
|
|
102
104
|
* @example Basic usage
|
|
103
|
-
* ```
|
|
104
|
-
* import { AppBridge, PostMessageTransport } from '@modelcontextprotocol/ext-apps/app-bridge';
|
|
105
|
-
* import { Client } from '@modelcontextprotocol/sdk/client/index.js';
|
|
106
|
-
*
|
|
105
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_basicUsage"
|
|
107
106
|
* // Create MCP client for the server
|
|
108
107
|
* const client = new Client({
|
|
109
108
|
* name: "MyHost",
|
|
@@ -111,22 +110,22 @@ type RequestHandlerExtra = Parameters<Parameters<AppBridge["setRequestHandler"]>
|
|
|
111
110
|
* });
|
|
112
111
|
* await client.connect(serverTransport);
|
|
113
112
|
*
|
|
114
|
-
* // Create bridge for the
|
|
113
|
+
* // Create bridge for the View
|
|
115
114
|
* const bridge = new AppBridge(
|
|
116
115
|
* client,
|
|
117
116
|
* { name: "MyHost", version: "1.0.0" },
|
|
118
|
-
* { openLinks: {}, serverTools: {}, logging: {} }
|
|
117
|
+
* { openLinks: {}, serverTools: {}, logging: {} },
|
|
119
118
|
* );
|
|
120
119
|
*
|
|
121
120
|
* // Set up iframe and connect
|
|
122
|
-
* const iframe = document.getElementById(
|
|
121
|
+
* const iframe = document.getElementById("app") as HTMLIFrameElement;
|
|
123
122
|
* const transport = new PostMessageTransport(
|
|
124
123
|
* iframe.contentWindow!,
|
|
125
124
|
* iframe.contentWindow!,
|
|
126
125
|
* );
|
|
127
126
|
*
|
|
128
127
|
* bridge.oninitialized = () => {
|
|
129
|
-
* console.log("
|
|
128
|
+
* console.log("View initialized");
|
|
130
129
|
* // Now safe to send tool input
|
|
131
130
|
* bridge.sendToolInput({ arguments: { location: "NYC" } });
|
|
132
131
|
* };
|
|
@@ -145,79 +144,82 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
145
144
|
* Create a new AppBridge instance.
|
|
146
145
|
*
|
|
147
146
|
* @param _client - MCP client connected to the server, or `null`. When provided,
|
|
148
|
-
* {@link connect} will automatically set up forwarding of MCP requests/notifications
|
|
149
|
-
* between the
|
|
150
|
-
* manually using the `oncalltool
|
|
147
|
+
* {@link connect `connect`} will automatically set up forwarding of MCP requests/notifications
|
|
148
|
+
* between the View and the server. When `null`, you must register handlers
|
|
149
|
+
* manually using the {@link oncalltool `oncalltool`}, {@link onlistresources `onlistresources`}, etc. setters.
|
|
151
150
|
* @param _hostInfo - Host application identification (name and version)
|
|
152
151
|
* @param _capabilities - Features and capabilities the host supports
|
|
153
152
|
* @param options - Configuration options (inherited from Protocol)
|
|
154
153
|
*
|
|
155
154
|
* @example With MCP client (automatic forwarding)
|
|
156
|
-
* ```
|
|
155
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_constructor_withMcpClient"
|
|
157
156
|
* const bridge = new AppBridge(
|
|
158
157
|
* mcpClient,
|
|
159
158
|
* { name: "MyHost", version: "1.0.0" },
|
|
160
|
-
* { openLinks: {}, serverTools: {}, logging: {} }
|
|
159
|
+
* { openLinks: {}, serverTools: {}, logging: {} },
|
|
161
160
|
* );
|
|
162
161
|
* ```
|
|
163
162
|
*
|
|
164
163
|
* @example Without MCP client (manual handlers)
|
|
165
|
-
* ```
|
|
164
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_constructor_withoutMcpClient"
|
|
166
165
|
* const bridge = new AppBridge(
|
|
167
166
|
* null,
|
|
168
167
|
* { name: "MyHost", version: "1.0.0" },
|
|
169
|
-
* { openLinks: {}, serverTools: {}, logging: {} }
|
|
168
|
+
* { openLinks: {}, serverTools: {}, logging: {} },
|
|
170
169
|
* );
|
|
171
|
-
* bridge.oncalltool = async (params, extra) => {
|
|
170
|
+
* bridge.oncalltool = async (params, extra) => {
|
|
171
|
+
* // Handle tool calls manually
|
|
172
|
+
* return { content: [] };
|
|
173
|
+
* };
|
|
172
174
|
* ```
|
|
173
175
|
*/
|
|
174
176
|
constructor(_client: Client | null, _hostInfo: Implementation, _capabilities: McpUiHostCapabilities, options?: HostOptions);
|
|
175
177
|
/**
|
|
176
|
-
* Get the
|
|
178
|
+
* Get the view's capabilities discovered during initialization.
|
|
177
179
|
*
|
|
178
|
-
* Returns the capabilities that the
|
|
180
|
+
* Returns the capabilities that the view advertised during its
|
|
179
181
|
* initialization request. Returns `undefined` if called before
|
|
180
182
|
* initialization completes.
|
|
181
183
|
*
|
|
182
|
-
* @returns
|
|
184
|
+
* @returns view capabilities, or `undefined` if not yet initialized
|
|
183
185
|
*
|
|
184
|
-
* @example Check
|
|
185
|
-
* ```
|
|
186
|
+
* @example Check view capabilities after initialization
|
|
187
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_getAppCapabilities_checkAfterInit"
|
|
186
188
|
* bridge.oninitialized = () => {
|
|
187
189
|
* const caps = bridge.getAppCapabilities();
|
|
188
190
|
* if (caps?.tools) {
|
|
189
|
-
* console.log("
|
|
191
|
+
* console.log("View provides tools");
|
|
190
192
|
* }
|
|
191
193
|
* };
|
|
192
194
|
* ```
|
|
193
195
|
*
|
|
194
|
-
* @see {@link McpUiAppCapabilities} for the capabilities structure
|
|
196
|
+
* @see {@link McpUiAppCapabilities `McpUiAppCapabilities`} for the capabilities structure
|
|
195
197
|
*/
|
|
196
198
|
getAppCapabilities(): McpUiAppCapabilities | undefined;
|
|
197
199
|
/**
|
|
198
|
-
* Get the
|
|
200
|
+
* Get the view's implementation info discovered during initialization.
|
|
199
201
|
*
|
|
200
|
-
* Returns the
|
|
202
|
+
* Returns the view's name and version as provided in its initialization
|
|
201
203
|
* request. Returns `undefined` if called before initialization completes.
|
|
202
204
|
*
|
|
203
|
-
* @returns
|
|
205
|
+
* @returns view implementation info, or `undefined` if not yet initialized
|
|
204
206
|
*
|
|
205
|
-
* @example Log
|
|
206
|
-
* ```
|
|
207
|
+
* @example Log view information after initialization
|
|
208
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_getAppVersion_logAfterInit"
|
|
207
209
|
* bridge.oninitialized = () => {
|
|
208
210
|
* const appInfo = bridge.getAppVersion();
|
|
209
211
|
* if (appInfo) {
|
|
210
|
-
* console.log(`
|
|
212
|
+
* console.log(`View: ${appInfo.name} v${appInfo.version}`);
|
|
211
213
|
* }
|
|
212
214
|
* };
|
|
213
215
|
* ```
|
|
214
216
|
*/
|
|
215
217
|
getAppVersion(): Implementation | undefined;
|
|
216
218
|
/**
|
|
217
|
-
* Optional handler for ping requests from the
|
|
219
|
+
* Optional handler for ping requests from the view.
|
|
218
220
|
*
|
|
219
|
-
* The
|
|
220
|
-
* is alive. The AppBridge automatically responds with an empty object, but this
|
|
221
|
+
* The View can send standard MCP `ping` requests to verify the connection
|
|
222
|
+
* is alive. The {@link AppBridge `AppBridge`} automatically responds with an empty object, but this
|
|
221
223
|
* handler allows the host to observe or log ping activity.
|
|
222
224
|
*
|
|
223
225
|
* Unlike the other handlers which use setters, this is a direct property
|
|
@@ -227,25 +229,25 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
227
229
|
* @param extra - Request metadata (abort signal, session info)
|
|
228
230
|
*
|
|
229
231
|
* @example
|
|
230
|
-
* ```
|
|
232
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onping_handleRequest"
|
|
231
233
|
* bridge.onping = (params, extra) => {
|
|
232
|
-
* console.log("Received ping from
|
|
234
|
+
* console.log("Received ping from view");
|
|
233
235
|
* };
|
|
234
236
|
* ```
|
|
235
237
|
*/
|
|
236
238
|
onping?: (params: PingRequest["params"], extra: RequestHandlerExtra) => void;
|
|
237
239
|
/**
|
|
238
|
-
* Register a handler for size change notifications from the
|
|
240
|
+
* Register a handler for size change notifications from the view.
|
|
239
241
|
*
|
|
240
|
-
* The
|
|
241
|
-
* size changes, typically via ResizeObserver
|
|
242
|
-
* adjust the iframe container dimensions based on the
|
|
242
|
+
* The view sends `ui/notifications/size-changed` when its rendered content
|
|
243
|
+
* size changes, typically via `ResizeObserver`. Set this callback to dynamically
|
|
244
|
+
* adjust the iframe container dimensions based on the view's content.
|
|
243
245
|
*
|
|
244
|
-
* Note: This is for
|
|
245
|
-
* host container dimension changes, use {@link setHostContext}.
|
|
246
|
+
* Note: This is for View → Host communication. To notify the View of
|
|
247
|
+
* host container dimension changes, use {@link setHostContext `setHostContext`}.
|
|
246
248
|
*
|
|
247
249
|
* @example
|
|
248
|
-
* ```
|
|
250
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onsizechange_handleResize"
|
|
249
251
|
* bridge.onsizechange = ({ width, height }) => {
|
|
250
252
|
* if (width != null) {
|
|
251
253
|
* iframe.style.width = `${width}px`;
|
|
@@ -256,8 +258,8 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
256
258
|
* };
|
|
257
259
|
* ```
|
|
258
260
|
*
|
|
259
|
-
* @see {@link McpUiSizeChangedNotification} for the notification type
|
|
260
|
-
* @see {@link app.App.sendSizeChanged}
|
|
261
|
+
* @see {@link McpUiSizeChangedNotification `McpUiSizeChangedNotification`} for the notification type
|
|
262
|
+
* @see {@link app!App.sendSizeChanged `App.sendSizeChanged`} - the View method that sends these notifications
|
|
261
263
|
*/
|
|
262
264
|
set onsizechange(callback: (params: McpUiSizeChangedNotification["params"]) => void);
|
|
263
265
|
/**
|
|
@@ -268,7 +270,7 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
268
270
|
* `ui/notifications/sandbox-proxy-ready` after it loads and is ready to receive
|
|
269
271
|
* HTML content.
|
|
270
272
|
*
|
|
271
|
-
* When this fires, the host should call {@link sendSandboxResourceReady} with
|
|
273
|
+
* When this fires, the host should call {@link sendSandboxResourceReady `sendSandboxResourceReady`} with
|
|
272
274
|
* the HTML content to load into the inner sandboxed iframe.
|
|
273
275
|
*
|
|
274
276
|
* @example
|
|
@@ -287,32 +289,32 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
287
289
|
* ```
|
|
288
290
|
*
|
|
289
291
|
* @internal
|
|
290
|
-
* @see {@link McpUiSandboxProxyReadyNotification} for the notification type
|
|
291
|
-
* @see {@link sendSandboxResourceReady} for sending content to the sandbox
|
|
292
|
+
* @see {@link McpUiSandboxProxyReadyNotification `McpUiSandboxProxyReadyNotification`} for the notification type
|
|
293
|
+
* @see {@link sendSandboxResourceReady `sendSandboxResourceReady`} for sending content to the sandbox
|
|
292
294
|
*/
|
|
293
295
|
set onsandboxready(callback: (params: McpUiSandboxProxyReadyNotification["params"]) => void);
|
|
294
296
|
/**
|
|
295
|
-
* Called when the
|
|
297
|
+
* Called when the view completes initialization.
|
|
296
298
|
*
|
|
297
|
-
* Set this callback to be notified when the
|
|
299
|
+
* Set this callback to be notified when the view has finished its
|
|
298
300
|
* initialization handshake and is ready to receive tool input and other data.
|
|
299
301
|
*
|
|
300
302
|
* @example
|
|
301
|
-
* ```
|
|
303
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_oninitialized_sendToolInput"
|
|
302
304
|
* bridge.oninitialized = () => {
|
|
303
|
-
* console.log("
|
|
305
|
+
* console.log("View ready");
|
|
304
306
|
* bridge.sendToolInput({ arguments: toolArgs });
|
|
305
307
|
* };
|
|
306
308
|
* ```
|
|
307
309
|
*
|
|
308
|
-
* @see {@link McpUiInitializedNotification} for the notification type
|
|
309
|
-
* @see {@link sendToolInput} for sending tool arguments to the
|
|
310
|
+
* @see {@link McpUiInitializedNotification `McpUiInitializedNotification`} for the notification type
|
|
311
|
+
* @see {@link sendToolInput `sendToolInput`} for sending tool arguments to the View
|
|
310
312
|
*/
|
|
311
313
|
set oninitialized(callback: (params: McpUiInitializedNotification["params"]) => void);
|
|
312
314
|
/**
|
|
313
|
-
* Register a handler for message requests from the
|
|
315
|
+
* Register a handler for message requests from the view.
|
|
314
316
|
*
|
|
315
|
-
* The
|
|
317
|
+
* The view sends `ui/message` requests when it wants to add a message to
|
|
316
318
|
* the host's chat interface. This enables interactive apps to communicate with
|
|
317
319
|
* the user through the conversation thread.
|
|
318
320
|
*
|
|
@@ -322,13 +324,13 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
322
324
|
* leakage.
|
|
323
325
|
*
|
|
324
326
|
* @param callback - Handler that receives message params and returns a result
|
|
325
|
-
* - params.role - Message role (currently only "user" is supported)
|
|
326
|
-
* - params.content - Message content blocks (text, image, etc.)
|
|
327
|
-
* - extra - Request metadata (abort signal, session info)
|
|
328
|
-
* - Returns: Promise<McpUiMessageResult
|
|
327
|
+
* - `params.role` - Message role (currently only "user" is supported)
|
|
328
|
+
* - `params.content` - Message content blocks (text, image, etc.)
|
|
329
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
330
|
+
* - Returns: `Promise<McpUiMessageResult>` with optional `isError` flag
|
|
329
331
|
*
|
|
330
332
|
* @example
|
|
331
|
-
* ```
|
|
333
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onmessage_logMessage"
|
|
332
334
|
* bridge.onmessage = async ({ role, content }, extra) => {
|
|
333
335
|
* try {
|
|
334
336
|
* await chatManager.addMessage({ role, content, source: "app" });
|
|
@@ -340,14 +342,14 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
340
342
|
* };
|
|
341
343
|
* ```
|
|
342
344
|
*
|
|
343
|
-
* @see {@link McpUiMessageRequest} for the request type
|
|
344
|
-
* @see {@link McpUiMessageResult} for the result type
|
|
345
|
+
* @see {@link McpUiMessageRequest `McpUiMessageRequest`} for the request type
|
|
346
|
+
* @see {@link McpUiMessageResult `McpUiMessageResult`} for the result type
|
|
345
347
|
*/
|
|
346
348
|
set onmessage(callback: (params: McpUiMessageRequest["params"], extra: RequestHandlerExtra) => Promise<McpUiMessageResult>);
|
|
347
349
|
/**
|
|
348
|
-
* Register a handler for external link requests from the
|
|
350
|
+
* Register a handler for external link requests from the view.
|
|
349
351
|
*
|
|
350
|
-
* The
|
|
352
|
+
* The view sends `ui/open-link` requests when it wants to open an external
|
|
351
353
|
* URL in the host's default browser. The handler should validate the URL and
|
|
352
354
|
* open it according to the host's security policy and user preferences.
|
|
353
355
|
*
|
|
@@ -358,12 +360,12 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
358
360
|
* - Reject the request entirely
|
|
359
361
|
*
|
|
360
362
|
* @param callback - Handler that receives URL params and returns a result
|
|
361
|
-
* - params.url - URL to open in the host's browser
|
|
362
|
-
* - extra - Request metadata (abort signal, session info)
|
|
363
|
-
* - Returns: Promise<McpUiOpenLinkResult
|
|
363
|
+
* - `params.url` - URL to open in the host's browser
|
|
364
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
365
|
+
* - Returns: `Promise<McpUiOpenLinkResult>` with optional `isError` flag
|
|
364
366
|
*
|
|
365
367
|
* @example
|
|
366
|
-
* ```
|
|
368
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onopenlink_handleRequest"
|
|
367
369
|
* bridge.onopenlink = async ({ url }, extra) => {
|
|
368
370
|
* if (!isAllowedDomain(url)) {
|
|
369
371
|
* console.warn("Blocked external link:", url);
|
|
@@ -372,7 +374,7 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
372
374
|
*
|
|
373
375
|
* const confirmed = await showDialog({
|
|
374
376
|
* message: `Open external link?\n${url}`,
|
|
375
|
-
* buttons: ["Open", "Cancel"]
|
|
377
|
+
* buttons: ["Open", "Cancel"],
|
|
376
378
|
* });
|
|
377
379
|
*
|
|
378
380
|
* if (confirmed) {
|
|
@@ -384,14 +386,14 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
384
386
|
* };
|
|
385
387
|
* ```
|
|
386
388
|
*
|
|
387
|
-
* @see {@link McpUiOpenLinkRequest} for the request type
|
|
388
|
-
* @see {@link McpUiOpenLinkResult} for the result type
|
|
389
|
+
* @see {@link McpUiOpenLinkRequest `McpUiOpenLinkRequest`} for the request type
|
|
390
|
+
* @see {@link McpUiOpenLinkResult `McpUiOpenLinkResult`} for the result type
|
|
389
391
|
*/
|
|
390
392
|
set onopenlink(callback: (params: McpUiOpenLinkRequest["params"], extra: RequestHandlerExtra) => Promise<McpUiOpenLinkResult>);
|
|
391
393
|
/**
|
|
392
|
-
* Register a handler for display mode change requests from the
|
|
394
|
+
* Register a handler for display mode change requests from the view.
|
|
393
395
|
*
|
|
394
|
-
* The
|
|
396
|
+
* The view sends `ui/request-display-mode` requests when it wants to change
|
|
395
397
|
* its display mode (e.g., from "inline" to "fullscreen"). The handler should
|
|
396
398
|
* check if the requested mode is in `availableDisplayModes` from the host context,
|
|
397
399
|
* update the display mode if supported, and return the actual mode that was set.
|
|
@@ -399,32 +401,32 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
399
401
|
* If the requested mode is not available, the handler should return the current
|
|
400
402
|
* display mode instead.
|
|
401
403
|
*
|
|
404
|
+
* By default, `AppBridge` returns the current `displayMode` from host context (or "inline").
|
|
405
|
+
* Setting this property replaces that default behavior.
|
|
406
|
+
*
|
|
402
407
|
* @param callback - Handler that receives the requested mode and returns the actual mode set
|
|
403
|
-
* - params.mode - The display mode being requested ("inline" | "fullscreen" | "pip")
|
|
404
|
-
* - extra - Request metadata (abort signal, session info)
|
|
405
|
-
* - Returns: Promise<McpUiRequestDisplayModeResult
|
|
408
|
+
* - `params.mode` - The display mode being requested ("inline" | "fullscreen" | "pip")
|
|
409
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
410
|
+
* - Returns: `Promise<McpUiRequestDisplayModeResult>` with the actual mode set
|
|
406
411
|
*
|
|
407
412
|
* @example
|
|
408
|
-
* ```
|
|
413
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onrequestdisplaymode_handleRequest"
|
|
409
414
|
* bridge.onrequestdisplaymode = async ({ mode }, extra) => {
|
|
410
|
-
*
|
|
411
|
-
*
|
|
412
|
-
* setDisplayMode(mode);
|
|
413
|
-
* return { mode };
|
|
415
|
+
* if (availableDisplayModes.includes(mode)) {
|
|
416
|
+
* currentDisplayMode = mode;
|
|
414
417
|
* }
|
|
415
|
-
* // Return current mode if requested mode not available
|
|
416
418
|
* return { mode: currentDisplayMode };
|
|
417
419
|
* };
|
|
418
420
|
* ```
|
|
419
421
|
*
|
|
420
|
-
* @see {@link McpUiRequestDisplayModeRequest} for the request type
|
|
421
|
-
* @see {@link McpUiRequestDisplayModeResult} for the result type
|
|
422
|
+
* @see {@link McpUiRequestDisplayModeRequest `McpUiRequestDisplayModeRequest`} for the request type
|
|
423
|
+
* @see {@link McpUiRequestDisplayModeResult `McpUiRequestDisplayModeResult`} for the result type
|
|
422
424
|
*/
|
|
423
425
|
set onrequestdisplaymode(callback: (params: McpUiRequestDisplayModeRequest["params"], extra: RequestHandlerExtra) => Promise<McpUiRequestDisplayModeResult>);
|
|
424
426
|
/**
|
|
425
|
-
* Register a handler for logging messages from the
|
|
427
|
+
* Register a handler for logging messages from the view.
|
|
426
428
|
*
|
|
427
|
-
* The
|
|
429
|
+
* The view sends standard MCP `notifications/message` (logging) notifications
|
|
428
430
|
* to report debugging information, errors, warnings, and other telemetry to the
|
|
429
431
|
* host. The host can display these in a console, log them to a file, or send
|
|
430
432
|
* them to a monitoring service.
|
|
@@ -433,27 +435,26 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
433
435
|
* message type.
|
|
434
436
|
*
|
|
435
437
|
* @param callback - Handler that receives logging params
|
|
436
|
-
* - params.level - Log level: "debug" | "info" | "notice" | "warning" | "error" | "critical" | "alert" | "emergency"
|
|
437
|
-
* - params.logger - Optional logger name/identifier
|
|
438
|
-
* - params.data - Log message and optional structured data
|
|
438
|
+
* - `params.level` - Log level: "debug" | "info" | "notice" | "warning" | "error" | "critical" | "alert" | "emergency"
|
|
439
|
+
* - `params.logger` - Optional logger name/identifier
|
|
440
|
+
* - `params.data` - Log message and optional structured data
|
|
439
441
|
*
|
|
440
442
|
* @example
|
|
441
|
-
* ```
|
|
443
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onloggingmessage_handleLog"
|
|
442
444
|
* bridge.onloggingmessage = ({ level, logger, data }) => {
|
|
443
|
-
* const prefix = logger ? `[${logger}]` : "[Guest UI]";
|
|
444
445
|
* console[level === "error" ? "error" : "log"](
|
|
445
|
-
*
|
|
446
|
-
* data
|
|
446
|
+
* `[${logger ?? "View"}] ${level.toUpperCase()}:`,
|
|
447
|
+
* data,
|
|
447
448
|
* );
|
|
448
449
|
* };
|
|
449
450
|
* ```
|
|
450
451
|
*/
|
|
451
452
|
set onloggingmessage(callback: (params: LoggingMessageNotification["params"]) => void);
|
|
452
453
|
/**
|
|
453
|
-
* Register a handler for model context updates from the
|
|
454
|
+
* Register a handler for model context updates from the view.
|
|
454
455
|
*
|
|
455
|
-
* The
|
|
456
|
-
* model context. Each request overwrites the previous context stored by the
|
|
456
|
+
* The view sends `ui/update-model-context` requests to update the Host's
|
|
457
|
+
* model context. Each request overwrites the previous context stored by the view.
|
|
457
458
|
* Unlike logging messages, context updates are intended to be available to
|
|
458
459
|
* the model in future turns. Unlike messages, context updates do not trigger follow-ups.
|
|
459
460
|
*
|
|
@@ -462,54 +463,52 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
462
463
|
* update received.
|
|
463
464
|
*
|
|
464
465
|
* @example
|
|
465
|
-
* ```
|
|
466
|
-
* bridge.onupdatemodelcontext = async (
|
|
467
|
-
*
|
|
468
|
-
*
|
|
469
|
-
*
|
|
470
|
-
*
|
|
471
|
-
*
|
|
472
|
-
* timestamp: Date.now()
|
|
473
|
-
* };
|
|
466
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onupdatemodelcontext_storeContext"
|
|
467
|
+
* bridge.onupdatemodelcontext = async (
|
|
468
|
+
* { content, structuredContent },
|
|
469
|
+
* extra,
|
|
470
|
+
* ) => {
|
|
471
|
+
* // Store the context snapshot for inclusion in the next model request
|
|
472
|
+
* modelContextManager.update({ content, structuredContent });
|
|
474
473
|
* return {};
|
|
475
474
|
* };
|
|
476
475
|
* ```
|
|
477
476
|
*
|
|
478
|
-
* @see {@link McpUiUpdateModelContextRequest} for the request type
|
|
477
|
+
* @see {@link McpUiUpdateModelContextRequest `McpUiUpdateModelContextRequest`} for the request type
|
|
479
478
|
*/
|
|
480
479
|
set onupdatemodelcontext(callback: (params: McpUiUpdateModelContextRequest["params"], extra: RequestHandlerExtra) => Promise<EmptyResult>);
|
|
481
480
|
/**
|
|
482
|
-
* Register a handler for tool call requests from the
|
|
481
|
+
* Register a handler for tool call requests from the view.
|
|
483
482
|
*
|
|
484
|
-
* The
|
|
483
|
+
* The view sends `tools/call` requests to execute MCP server tools. This
|
|
485
484
|
* handler allows the host to intercept and process these requests, typically
|
|
486
485
|
* by forwarding them to the MCP server.
|
|
487
486
|
*
|
|
488
487
|
* @param callback - Handler that receives tool call params and returns a
|
|
489
|
-
*
|
|
490
|
-
*
|
|
491
|
-
*
|
|
488
|
+
* `CallToolResult`
|
|
489
|
+
* - `params` - Tool call parameters (name and arguments)
|
|
490
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
492
491
|
*
|
|
493
492
|
* @example
|
|
494
|
-
* ```
|
|
495
|
-
* bridge.oncalltool = async (
|
|
493
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_oncalltool_forwardToServer"
|
|
494
|
+
* bridge.oncalltool = async (params, extra) => {
|
|
496
495
|
* return mcpClient.request(
|
|
497
|
-
* { method: "tools/call", params
|
|
496
|
+
* { method: "tools/call", params },
|
|
498
497
|
* CallToolResultSchema,
|
|
499
|
-
* { signal: extra.signal }
|
|
498
|
+
* { signal: extra.signal },
|
|
500
499
|
* );
|
|
501
500
|
* };
|
|
502
501
|
* ```
|
|
503
502
|
*
|
|
504
|
-
* @see
|
|
505
|
-
* @see
|
|
503
|
+
* @see `CallToolRequest` from @modelcontextprotocol/sdk for the request type
|
|
504
|
+
* @see `CallToolResult` from @modelcontextprotocol/sdk for the result type
|
|
506
505
|
*/
|
|
507
506
|
set oncalltool(callback: (params: CallToolRequest["params"], extra: RequestHandlerExtra) => Promise<CallToolResult>);
|
|
508
507
|
/**
|
|
509
|
-
* Notify the
|
|
508
|
+
* Notify the view that the MCP server's tool list has changed.
|
|
510
509
|
*
|
|
511
|
-
* The host sends `notifications/tools/list_changed` to the
|
|
512
|
-
* receives this notification from the MCP server. This allows the
|
|
510
|
+
* The host sends `notifications/tools/list_changed` to the view when it
|
|
511
|
+
* receives this notification from the MCP server. This allows the view
|
|
513
512
|
* to refresh its tool cache or UI accordingly.
|
|
514
513
|
*
|
|
515
514
|
* @param params - Optional notification params (typically empty)
|
|
@@ -522,47 +521,47 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
522
521
|
* });
|
|
523
522
|
* ```
|
|
524
523
|
*
|
|
525
|
-
* @see
|
|
524
|
+
* @see `ToolListChangedNotification` from @modelcontextprotocol/sdk for the notification type
|
|
526
525
|
*/
|
|
527
526
|
sendToolListChanged(params?: ToolListChangedNotification["params"]): Promise<void>;
|
|
528
527
|
/**
|
|
529
|
-
* Register a handler for list resources requests from the
|
|
528
|
+
* Register a handler for list resources requests from the view.
|
|
530
529
|
*
|
|
531
|
-
* The
|
|
530
|
+
* The view sends `resources/list` requests to enumerate available MCP
|
|
532
531
|
* resources. This handler allows the host to intercept and process these
|
|
533
532
|
* requests, typically by forwarding them to the MCP server.
|
|
534
533
|
*
|
|
535
534
|
* @param callback - Handler that receives list params and returns a
|
|
536
|
-
*
|
|
537
|
-
*
|
|
538
|
-
*
|
|
535
|
+
* `ListResourcesResult`
|
|
536
|
+
* - `params` - Request params (may include cursor for pagination)
|
|
537
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
539
538
|
*
|
|
540
539
|
* @example
|
|
541
|
-
* ```
|
|
540
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onlistresources_returnResources"
|
|
542
541
|
* bridge.onlistresources = async (params, extra) => {
|
|
543
542
|
* return mcpClient.request(
|
|
544
543
|
* { method: "resources/list", params },
|
|
545
544
|
* ListResourcesResultSchema,
|
|
546
|
-
* { signal: extra.signal }
|
|
545
|
+
* { signal: extra.signal },
|
|
547
546
|
* );
|
|
548
547
|
* };
|
|
549
548
|
* ```
|
|
550
549
|
*
|
|
551
|
-
* @see
|
|
552
|
-
* @see
|
|
550
|
+
* @see `ListResourcesRequest` from @modelcontextprotocol/sdk for the request type
|
|
551
|
+
* @see `ListResourcesResult` from @modelcontextprotocol/sdk for the result type
|
|
553
552
|
*/
|
|
554
553
|
set onlistresources(callback: (params: ListResourcesRequest["params"], extra: RequestHandlerExtra) => Promise<ListResourcesResult>);
|
|
555
554
|
/**
|
|
556
|
-
* Register a handler for list resource templates requests from the
|
|
555
|
+
* Register a handler for list resource templates requests from the view.
|
|
557
556
|
*
|
|
558
|
-
* The
|
|
557
|
+
* The view sends `resources/templates/list` requests to enumerate available
|
|
559
558
|
* MCP resource templates. This handler allows the host to intercept and process
|
|
560
559
|
* these requests, typically by forwarding them to the MCP server.
|
|
561
560
|
*
|
|
562
561
|
* @param callback - Handler that receives list params and returns a
|
|
563
|
-
*
|
|
564
|
-
*
|
|
565
|
-
*
|
|
562
|
+
* `ListResourceTemplatesResult`
|
|
563
|
+
* - `params` - Request params (may include cursor for pagination)
|
|
564
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
566
565
|
*
|
|
567
566
|
* @example
|
|
568
567
|
* ```typescript
|
|
@@ -575,42 +574,42 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
575
574
|
* };
|
|
576
575
|
* ```
|
|
577
576
|
*
|
|
578
|
-
* @see
|
|
579
|
-
* @see
|
|
577
|
+
* @see `ListResourceTemplatesRequest` from @modelcontextprotocol/sdk for the request type
|
|
578
|
+
* @see `ListResourceTemplatesResult` from @modelcontextprotocol/sdk for the result type
|
|
580
579
|
*/
|
|
581
580
|
set onlistresourcetemplates(callback: (params: ListResourceTemplatesRequest["params"], extra: RequestHandlerExtra) => Promise<ListResourceTemplatesResult>);
|
|
582
581
|
/**
|
|
583
|
-
* Register a handler for read resource requests from the
|
|
582
|
+
* Register a handler for read resource requests from the view.
|
|
584
583
|
*
|
|
585
|
-
* The
|
|
584
|
+
* The view sends `resources/read` requests to retrieve the contents of an
|
|
586
585
|
* MCP resource. This handler allows the host to intercept and process these
|
|
587
586
|
* requests, typically by forwarding them to the MCP server.
|
|
588
587
|
*
|
|
589
588
|
* @param callback - Handler that receives read params and returns a
|
|
590
|
-
*
|
|
591
|
-
*
|
|
592
|
-
*
|
|
589
|
+
* `ReadResourceResult`
|
|
590
|
+
* - `params` - Read parameters including the resource URI
|
|
591
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
593
592
|
*
|
|
594
593
|
* @example
|
|
595
|
-
* ```
|
|
596
|
-
* bridge.onreadresource = async (
|
|
594
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onreadresource_returnResource"
|
|
595
|
+
* bridge.onreadresource = async (params, extra) => {
|
|
597
596
|
* return mcpClient.request(
|
|
598
|
-
* { method: "resources/read", params
|
|
597
|
+
* { method: "resources/read", params },
|
|
599
598
|
* ReadResourceResultSchema,
|
|
600
|
-
* { signal: extra.signal }
|
|
599
|
+
* { signal: extra.signal },
|
|
601
600
|
* );
|
|
602
601
|
* };
|
|
603
602
|
* ```
|
|
604
603
|
*
|
|
605
|
-
* @see
|
|
606
|
-
* @see
|
|
604
|
+
* @see `ReadResourceRequest` from @modelcontextprotocol/sdk for the request type
|
|
605
|
+
* @see `ReadResourceResult` from @modelcontextprotocol/sdk for the result type
|
|
607
606
|
*/
|
|
608
607
|
set onreadresource(callback: (params: ReadResourceRequest["params"], extra: RequestHandlerExtra) => Promise<ReadResourceResult>);
|
|
609
608
|
/**
|
|
610
|
-
* Notify the
|
|
609
|
+
* Notify the view that the MCP server's resource list has changed.
|
|
611
610
|
*
|
|
612
|
-
* The host sends `notifications/resources/list_changed` to the
|
|
613
|
-
* receives this notification from the MCP server. This allows the
|
|
611
|
+
* The host sends `notifications/resources/list_changed` to the view when it
|
|
612
|
+
* receives this notification from the MCP server. This allows the view
|
|
614
613
|
* to refresh its resource cache or UI accordingly.
|
|
615
614
|
*
|
|
616
615
|
* @param params - Optional notification params (typically empty)
|
|
@@ -623,41 +622,41 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
623
622
|
* });
|
|
624
623
|
* ```
|
|
625
624
|
*
|
|
626
|
-
* @see
|
|
625
|
+
* @see `ResourceListChangedNotification` from @modelcontextprotocol/sdk for the notification type
|
|
627
626
|
*/
|
|
628
627
|
sendResourceListChanged(params?: ResourceListChangedNotification["params"]): Promise<void>;
|
|
629
628
|
/**
|
|
630
|
-
* Register a handler for list prompts requests from the
|
|
629
|
+
* Register a handler for list prompts requests from the view.
|
|
631
630
|
*
|
|
632
|
-
* The
|
|
631
|
+
* The view sends `prompts/list` requests to enumerate available MCP
|
|
633
632
|
* prompts. This handler allows the host to intercept and process these
|
|
634
633
|
* requests, typically by forwarding them to the MCP server.
|
|
635
634
|
*
|
|
636
635
|
* @param callback - Handler that receives list params and returns a
|
|
637
|
-
*
|
|
638
|
-
*
|
|
639
|
-
*
|
|
636
|
+
* `ListPromptsResult`
|
|
637
|
+
* - `params` - Request params (may include cursor for pagination)
|
|
638
|
+
* - `extra` - Request metadata (abort signal, session info)
|
|
640
639
|
*
|
|
641
640
|
* @example
|
|
642
|
-
* ```
|
|
641
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_onlistprompts_returnPrompts"
|
|
643
642
|
* bridge.onlistprompts = async (params, extra) => {
|
|
644
643
|
* return mcpClient.request(
|
|
645
644
|
* { method: "prompts/list", params },
|
|
646
645
|
* ListPromptsResultSchema,
|
|
647
|
-
* { signal: extra.signal }
|
|
646
|
+
* { signal: extra.signal },
|
|
648
647
|
* );
|
|
649
648
|
* };
|
|
650
649
|
* ```
|
|
651
650
|
*
|
|
652
|
-
* @see
|
|
653
|
-
* @see
|
|
651
|
+
* @see `ListPromptsRequest` from @modelcontextprotocol/sdk for the request type
|
|
652
|
+
* @see `ListPromptsResult` from @modelcontextprotocol/sdk for the result type
|
|
654
653
|
*/
|
|
655
654
|
set onlistprompts(callback: (params: ListPromptsRequest["params"], extra: RequestHandlerExtra) => Promise<ListPromptsResult>);
|
|
656
655
|
/**
|
|
657
|
-
* Notify the
|
|
656
|
+
* Notify the view that the MCP server's prompt list has changed.
|
|
658
657
|
*
|
|
659
|
-
* The host sends `notifications/prompts/list_changed` to the
|
|
660
|
-
* receives this notification from the MCP server. This allows the
|
|
658
|
+
* The host sends `notifications/prompts/list_changed` to the view when it
|
|
659
|
+
* receives this notification from the MCP server. This allows the view
|
|
661
660
|
* to refresh its prompt cache or UI accordingly.
|
|
662
661
|
*
|
|
663
662
|
* @param params - Optional notification params (typically empty)
|
|
@@ -670,7 +669,7 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
670
669
|
* });
|
|
671
670
|
* ```
|
|
672
671
|
*
|
|
673
|
-
* @see
|
|
672
|
+
* @see `PromptListChangedNotification` from @modelcontextprotocol/sdk for the notification type
|
|
674
673
|
*/
|
|
675
674
|
sendPromptListChanged(params?: PromptListChangedNotification["params"]): Promise<void>;
|
|
676
675
|
/**
|
|
@@ -703,7 +702,7 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
703
702
|
*
|
|
704
703
|
* @returns Host capabilities object
|
|
705
704
|
*
|
|
706
|
-
* @see {@link McpUiHostCapabilities} for the capabilities structure
|
|
705
|
+
* @see {@link McpUiHostCapabilities `McpUiHostCapabilities`} for the capabilities structure
|
|
707
706
|
*/
|
|
708
707
|
getCapabilities(): McpUiHostCapabilities;
|
|
709
708
|
/**
|
|
@@ -712,13 +711,14 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
712
711
|
*/
|
|
713
712
|
private _oninitialize;
|
|
714
713
|
/**
|
|
715
|
-
* Update the host context and notify the
|
|
714
|
+
* Update the host context and notify the view of changes.
|
|
716
715
|
*
|
|
717
|
-
* Compares the new context with the current context and sends a
|
|
718
|
-
* `ui/notifications/host-context-changed` notification containing only
|
|
719
|
-
*
|
|
716
|
+
* Compares fields present in the new context with the current context and sends a
|
|
717
|
+
* `ui/notifications/host-context-changed` notification containing only fields
|
|
718
|
+
* that have been added or modified. If no fields have changed, no notification is sent.
|
|
719
|
+
* The new context fully replaces the internal state.
|
|
720
720
|
*
|
|
721
|
-
* Common use cases include notifying the
|
|
721
|
+
* Common use cases include notifying the view when:
|
|
722
722
|
* - Theme changes (light/dark mode toggle)
|
|
723
723
|
* - Viewport size changes (window resize)
|
|
724
724
|
* - Display mode changes (inline/fullscreen)
|
|
@@ -727,122 +727,127 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
727
727
|
* @param hostContext - The complete new host context state
|
|
728
728
|
*
|
|
729
729
|
* @example Update theme when user toggles dark mode
|
|
730
|
-
* ```
|
|
730
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_setHostContext_updateTheme"
|
|
731
731
|
* bridge.setHostContext({ theme: "dark" });
|
|
732
732
|
* ```
|
|
733
733
|
*
|
|
734
734
|
* @example Update multiple context fields
|
|
735
|
-
* ```
|
|
735
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_setHostContext_updateMultiple"
|
|
736
736
|
* bridge.setHostContext({
|
|
737
737
|
* theme: "dark",
|
|
738
|
-
* containerDimensions: { maxHeight: 600, width: 800 }
|
|
738
|
+
* containerDimensions: { maxHeight: 600, width: 800 },
|
|
739
739
|
* });
|
|
740
740
|
* ```
|
|
741
741
|
*
|
|
742
|
-
* @see {@link McpUiHostContext} for the context structure
|
|
743
|
-
* @see {@link McpUiHostContextChangedNotification} for the notification type
|
|
742
|
+
* @see {@link McpUiHostContext `McpUiHostContext`} for the context structure
|
|
743
|
+
* @see {@link McpUiHostContextChangedNotification `McpUiHostContextChangedNotification`} for the notification type
|
|
744
744
|
*/
|
|
745
745
|
setHostContext(hostContext: McpUiHostContext): void;
|
|
746
746
|
/**
|
|
747
|
-
*
|
|
748
|
-
*
|
|
747
|
+
* Low-level method to notify the view of host context changes.
|
|
748
|
+
*
|
|
749
|
+
* Most hosts should use {@link setHostContext `setHostContext`} instead, which automatically
|
|
750
|
+
* detects changes and calls this method with only the modified fields.
|
|
751
|
+
* Use this directly only when you need fine-grained control over change detection.
|
|
752
|
+
*
|
|
753
|
+
* @param params - The context fields that have changed (partial update)
|
|
749
754
|
*/
|
|
750
755
|
sendHostContextChange(params: McpUiHostContextChangedNotification["params"]): Promise<void> | void;
|
|
751
756
|
/**
|
|
752
|
-
* Send complete tool arguments to the
|
|
757
|
+
* Send complete tool arguments to the view.
|
|
753
758
|
*
|
|
754
|
-
* The host MUST send this notification after the
|
|
755
|
-
* (after {@link oninitialized} callback fires) and complete tool arguments become available.
|
|
756
|
-
* This notification is sent exactly once and is required before {@link sendToolResult}.
|
|
759
|
+
* The host MUST send this notification after the View completes initialization
|
|
760
|
+
* (after {@link oninitialized `oninitialized`} callback fires) and complete tool arguments become available.
|
|
761
|
+
* This notification is sent exactly once and is required before {@link sendToolResult `sendToolResult`}.
|
|
757
762
|
*
|
|
758
763
|
* @param params - Complete tool call arguments
|
|
759
764
|
*
|
|
760
765
|
* @example
|
|
761
|
-
* ```
|
|
766
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_sendToolInput_afterInit"
|
|
762
767
|
* bridge.oninitialized = () => {
|
|
763
768
|
* bridge.sendToolInput({
|
|
764
|
-
* arguments: { location: "New York", units: "metric" }
|
|
769
|
+
* arguments: { location: "New York", units: "metric" },
|
|
765
770
|
* });
|
|
766
771
|
* };
|
|
767
772
|
* ```
|
|
768
773
|
*
|
|
769
|
-
* @see {@link McpUiToolInputNotification} for the notification type
|
|
770
|
-
* @see {@link oninitialized} for the initialization callback
|
|
771
|
-
* @see {@link sendToolResult} for sending results after execution
|
|
774
|
+
* @see {@link McpUiToolInputNotification `McpUiToolInputNotification`} for the notification type
|
|
775
|
+
* @see {@link oninitialized `oninitialized`} for the initialization callback
|
|
776
|
+
* @see {@link sendToolResult `sendToolResult`} for sending results after execution
|
|
772
777
|
*/
|
|
773
778
|
sendToolInput(params: McpUiToolInputNotification["params"]): Promise<void>;
|
|
774
779
|
/**
|
|
775
|
-
* Send streaming partial tool arguments to the
|
|
780
|
+
* Send streaming partial tool arguments to the view.
|
|
776
781
|
*
|
|
777
782
|
* The host MAY send this notification zero or more times while tool arguments
|
|
778
|
-
* are being streamed, before {@link sendToolInput} is called with complete
|
|
783
|
+
* are being streamed, before {@link sendToolInput `sendToolInput`} is called with complete
|
|
779
784
|
* arguments. This enables progressive rendering of tool arguments in the
|
|
780
|
-
*
|
|
785
|
+
* view.
|
|
781
786
|
*
|
|
782
|
-
* The arguments represent best-effort recovery of incomplete JSON.
|
|
787
|
+
* The arguments represent best-effort recovery of incomplete JSON. views
|
|
783
788
|
* SHOULD handle missing or changing fields gracefully between notifications.
|
|
784
789
|
*
|
|
785
790
|
* @param params - Partial tool call arguments (may be incomplete)
|
|
786
791
|
*
|
|
787
792
|
* @example Stream partial arguments as they arrive
|
|
788
|
-
* ```
|
|
793
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_sendToolInputPartial_streaming"
|
|
789
794
|
* // As streaming progresses...
|
|
790
795
|
* bridge.sendToolInputPartial({ arguments: { loc: "N" } });
|
|
791
796
|
* bridge.sendToolInputPartial({ arguments: { location: "New" } });
|
|
792
797
|
* bridge.sendToolInputPartial({ arguments: { location: "New York" } });
|
|
793
798
|
*
|
|
794
799
|
* // When complete, send final input
|
|
795
|
-
* bridge.sendToolInput({
|
|
800
|
+
* bridge.sendToolInput({
|
|
801
|
+
* arguments: { location: "New York", units: "metric" },
|
|
802
|
+
* });
|
|
796
803
|
* ```
|
|
797
804
|
*
|
|
798
|
-
* @see {@link McpUiToolInputPartialNotification} for the notification type
|
|
799
|
-
* @see {@link sendToolInput} for sending complete arguments
|
|
805
|
+
* @see {@link McpUiToolInputPartialNotification `McpUiToolInputPartialNotification`} for the notification type
|
|
806
|
+
* @see {@link sendToolInput `sendToolInput`} for sending complete arguments
|
|
800
807
|
*/
|
|
801
808
|
sendToolInputPartial(params: McpUiToolInputPartialNotification["params"]): Promise<void>;
|
|
802
809
|
/**
|
|
803
|
-
* Send tool execution result to the
|
|
810
|
+
* Send tool execution result to the view.
|
|
804
811
|
*
|
|
805
812
|
* The host MUST send this notification when tool execution completes successfully,
|
|
806
|
-
* provided the
|
|
813
|
+
* provided the view is still displayed. If the view was closed before execution
|
|
807
814
|
* completes, the host MAY skip this notification. This must be sent after
|
|
808
|
-
* {@link sendToolInput}.
|
|
815
|
+
* {@link sendToolInput `sendToolInput`}.
|
|
809
816
|
*
|
|
810
817
|
* @param params - Standard MCP tool execution result
|
|
811
818
|
*
|
|
812
819
|
* @example
|
|
813
|
-
* ```
|
|
814
|
-
* import { CallToolResultSchema } from '@modelcontextprotocol/sdk/types.js';
|
|
815
|
-
*
|
|
820
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_sendToolResult_afterExecution"
|
|
816
821
|
* const result = await mcpClient.request(
|
|
817
822
|
* { method: "tools/call", params: { name: "get_weather", arguments: args } },
|
|
818
|
-
* CallToolResultSchema
|
|
823
|
+
* CallToolResultSchema,
|
|
819
824
|
* );
|
|
820
825
|
* bridge.sendToolResult(result);
|
|
821
826
|
* ```
|
|
822
827
|
*
|
|
823
|
-
* @see {@link McpUiToolResultNotification} for the notification type
|
|
824
|
-
* @see {@link sendToolInput} for sending tool arguments before results
|
|
828
|
+
* @see {@link McpUiToolResultNotification `McpUiToolResultNotification`} for the notification type
|
|
829
|
+
* @see {@link sendToolInput `sendToolInput`} for sending tool arguments before results
|
|
825
830
|
*/
|
|
826
831
|
sendToolResult(params: McpUiToolResultNotification["params"]): Promise<void>;
|
|
827
832
|
/**
|
|
828
|
-
* Notify the
|
|
833
|
+
* Notify the view that tool execution was cancelled.
|
|
829
834
|
*
|
|
830
835
|
* The host MUST send this notification if tool execution was cancelled for any
|
|
831
836
|
* reason, including user action, sampling error, classifier intervention, or
|
|
832
|
-
* any other interruption. This allows the
|
|
837
|
+
* any other interruption. This allows the view to update its state and
|
|
833
838
|
* display appropriate feedback to the user.
|
|
834
839
|
*
|
|
835
|
-
* @param params -
|
|
840
|
+
* @param params - Cancellation details object
|
|
836
841
|
* - `reason`: Human-readable explanation for why the tool was cancelled
|
|
837
842
|
*
|
|
838
843
|
* @example User-initiated cancellation
|
|
839
|
-
* ```
|
|
844
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_sendToolCancelled_userInitiated"
|
|
840
845
|
* // User clicked "Cancel" button
|
|
841
846
|
* bridge.sendToolCancelled({ reason: "User cancelled the operation" });
|
|
842
847
|
* ```
|
|
843
848
|
*
|
|
844
849
|
* @example System-level cancellation
|
|
845
|
-
* ```
|
|
850
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_sendToolCancelled_systemLevel"
|
|
846
851
|
* // Sampling error or timeout
|
|
847
852
|
* bridge.sendToolCancelled({ reason: "Request timeout after 30 seconds" });
|
|
848
853
|
*
|
|
@@ -850,9 +855,9 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
850
855
|
* bridge.sendToolCancelled({ reason: "Content policy violation detected" });
|
|
851
856
|
* ```
|
|
852
857
|
*
|
|
853
|
-
* @see {@link McpUiToolCancelledNotification} for the notification type
|
|
854
|
-
* @see {@link sendToolResult} for sending successful results
|
|
855
|
-
* @see {@link sendToolInput} for sending tool arguments
|
|
858
|
+
* @see {@link McpUiToolCancelledNotification `McpUiToolCancelledNotification`} for the notification type
|
|
859
|
+
* @see {@link sendToolResult `sendToolResult`} for sending successful results
|
|
860
|
+
* @see {@link sendToolInput `sendToolInput`} for sending tool arguments
|
|
856
861
|
*/
|
|
857
862
|
sendToolCancelled(params: McpUiToolCancelledNotification["params"]): Promise<void>;
|
|
858
863
|
/**
|
|
@@ -868,27 +873,27 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
868
873
|
* - `sandbox`: Optional sandbox attribute value (e.g., "allow-scripts")
|
|
869
874
|
*
|
|
870
875
|
* @internal
|
|
871
|
-
* @see {@link onsandboxready} for handling the sandbox proxy ready notification
|
|
876
|
+
* @see {@link onsandboxready `onsandboxready`} for handling the sandbox proxy ready notification
|
|
872
877
|
*/
|
|
873
878
|
sendSandboxResourceReady(params: McpUiSandboxResourceReadyNotification["params"]): Promise<void>;
|
|
874
879
|
/**
|
|
875
|
-
* Request graceful shutdown of the
|
|
880
|
+
* Request graceful shutdown of the view.
|
|
876
881
|
*
|
|
877
882
|
* The host MUST send this request before tearing down the UI resource (before
|
|
878
|
-
* unmounting the iframe). This gives the
|
|
883
|
+
* unmounting the iframe). This gives the view an opportunity to save state,
|
|
879
884
|
* cancel pending operations, or show confirmation dialogs.
|
|
880
885
|
*
|
|
881
886
|
* The host SHOULD wait for the response before unmounting to prevent data loss.
|
|
882
887
|
*
|
|
883
888
|
* @param params - Empty params object
|
|
884
889
|
* @param options - Request options (timeout, etc.)
|
|
885
|
-
* @returns Promise resolving when
|
|
890
|
+
* @returns Promise resolving when view confirms readiness for teardown
|
|
886
891
|
*
|
|
887
892
|
* @example
|
|
888
|
-
* ```
|
|
893
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_teardownResource_gracefulShutdown"
|
|
889
894
|
* try {
|
|
890
895
|
* await bridge.teardownResource({});
|
|
891
|
-
* //
|
|
896
|
+
* // View is ready, safe to unmount iframe
|
|
892
897
|
* iframe.remove();
|
|
893
898
|
* } catch (error) {
|
|
894
899
|
* console.error("Teardown failed:", error);
|
|
@@ -896,26 +901,26 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
896
901
|
* ```
|
|
897
902
|
*/
|
|
898
903
|
teardownResource(params: McpUiResourceTeardownRequest["params"], options?: RequestOptions): Promise<Record<string, unknown>>;
|
|
899
|
-
/** @deprecated Use {@link teardownResource} instead */
|
|
904
|
+
/** @deprecated Use {@link teardownResource `teardownResource`} instead */
|
|
900
905
|
sendResourceTeardown: AppBridge["teardownResource"];
|
|
901
906
|
/**
|
|
902
|
-
* Connect to the
|
|
907
|
+
* Connect to the view via transport and optionally set up message forwarding.
|
|
903
908
|
*
|
|
904
909
|
* This method establishes the transport connection. If an MCP client was passed
|
|
905
910
|
* to the constructor, it also automatically sets up request/notification forwarding
|
|
906
|
-
* based on the MCP server's capabilities, proxying the following to the
|
|
911
|
+
* based on the MCP server's capabilities, proxying the following to the view:
|
|
907
912
|
* - Tools (tools/call, notifications/tools/list_changed)
|
|
908
913
|
* - Resources (resources/list, resources/read, resources/templates/list, notifications/resources/list_changed)
|
|
909
914
|
* - Prompts (prompts/list, notifications/prompts/list_changed)
|
|
910
915
|
*
|
|
911
916
|
* If no client was passed to the constructor, no automatic forwarding is set up
|
|
912
|
-
* and you must register handlers manually using the `oncalltool
|
|
917
|
+
* and you must register handlers manually using the {@link oncalltool `oncalltool`}, {@link onlistresources `onlistresources`},
|
|
913
918
|
* etc. setters.
|
|
914
919
|
*
|
|
915
|
-
* After calling connect, wait for the `oninitialized` callback before sending
|
|
916
|
-
* tool input and other data to the
|
|
920
|
+
* After calling connect, wait for the {@link oninitialized `oninitialized`} callback before sending
|
|
921
|
+
* tool input and other data to the View.
|
|
917
922
|
*
|
|
918
|
-
* @param transport - Transport layer (typically PostMessageTransport)
|
|
923
|
+
* @param transport - Transport layer (typically {@link PostMessageTransport `PostMessageTransport`})
|
|
919
924
|
* @returns Promise resolving when connection is established
|
|
920
925
|
*
|
|
921
926
|
* @throws {Error} If a client was passed but server capabilities are not available.
|
|
@@ -924,7 +929,7 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
924
929
|
* before calling `bridge.connect()`.
|
|
925
930
|
*
|
|
926
931
|
* @example With MCP client (automatic forwarding)
|
|
927
|
-
* ```
|
|
932
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_connect_withMcpClient"
|
|
928
933
|
* const bridge = new AppBridge(mcpClient, hostInfo, capabilities);
|
|
929
934
|
* const transport = new PostMessageTransport(
|
|
930
935
|
* iframe.contentWindow!,
|
|
@@ -932,7 +937,7 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
932
937
|
* );
|
|
933
938
|
*
|
|
934
939
|
* bridge.oninitialized = () => {
|
|
935
|
-
* console.log("
|
|
940
|
+
* console.log("View ready");
|
|
936
941
|
* bridge.sendToolInput({ arguments: toolArgs });
|
|
937
942
|
* };
|
|
938
943
|
*
|
|
@@ -940,12 +945,13 @@ export declare class AppBridge extends Protocol<AppRequest, AppNotification, App
|
|
|
940
945
|
* ```
|
|
941
946
|
*
|
|
942
947
|
* @example Without MCP client (manual handlers)
|
|
943
|
-
* ```
|
|
948
|
+
* ```ts source="./app-bridge.examples.ts#AppBridge_connect_withoutMcpClient"
|
|
944
949
|
* const bridge = new AppBridge(null, hostInfo, capabilities);
|
|
945
950
|
*
|
|
946
951
|
* // Register handlers manually
|
|
947
952
|
* bridge.oncalltool = async (params, extra) => {
|
|
948
953
|
* // Custom tool call handling
|
|
954
|
+
* return { content: [] };
|
|
949
955
|
* };
|
|
950
956
|
*
|
|
951
957
|
* await bridge.connect(transport);
|