setup notification handlers in App & AppBridge

This commit is contained in:
Olivier Chafik 2025-11-24 14:59:58 +00:00
commit ac3863092a
No known key found for this signature in database
3 changed files with 89 additions and 45 deletions

View file

@ -8,7 +8,7 @@
* <code>
* npx esbuild src/ui-raw.ts --bundle --outfile=dist/ui-raw.js --minify --sourcemap --platform=browser
* </code>
*
*
* We implement a barebones JSON-RPC message sender/receiver (see `app` object below),
* but without timeouts or runtime type validation of any kind
* (for that, use the Apps SDK / see ui-vanilla.ts or ui-react.ts).

View file

@ -26,19 +26,9 @@ export function McpClientApp() {
appInfo: APP_INFO,
capabilities: {},
onAppCreated: (app) => {
app.setNotificationHandler(
McpUiToolResultNotificationSchema,
async (notification) => {
setToolResults((prev) => [...prev, notification.params]);
},
);
app.setNotificationHandler(
McpUiSizeChangeNotificationSchema,
async (notification) => {
document.body.style.width = `${notification.params.width}px`;
document.body.style.height = `${notification.params.height}px`;
},
);
app.ontoolresult = async (params) => {
setToolResults((prev) => [...prev, params]);
};
},
});

View file

@ -36,28 +36,17 @@ window.addEventListener("load", async () => {
version: "1.0.0",
});
app.setNotificationHandler(
McpUiToolInputNotificationSchema,
async ({ params }) => {
appendText(
`Tool call input received: ${JSON.stringify(params.arguments)}`,
);
},
);
app.setNotificationHandler(
McpUiToolResultNotificationSchema,
async ({ params: { content, structuredContent, isError } }) => {
appendText(
`Tool call result received: isError=${isError}, content=${content}, structuredContent=${JSON.stringify(structuredContent)}`,
);
},
);
app.setNotificationHandler(
McpUiHostContextChangedNotificationSchema,
async (params) => {
appendText(`Host context changed: ${JSON.stringify(params)}`);
},
);
app.ontoolinput = (params) => {
appendText(`Tool call input received: ${JSON.stringify(params.arguments)}`);
};
app.ontoolresult = ({ content, structuredContent, isError }) => {
appendText(
`Tool call result received: isError=${isError}, content=${content}, structuredContent=${JSON.stringify(structuredContent)}`,
);
};
app.onhostcontextchanged = (params) => {
appendText(`Host context changed: ${JSON.stringify(params)}`);
};
document.body.addEventListener("resize", () => {
app.sendSizeChange({