modelcontextprotocol/ext-apps
Watch
1
0
Fork
You've already forked ext-apps
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add fullscreen button to threejs-server (#446)

Browse source 
* Add fullscreen button to threejs-server

* Simplify wrapper: pass app instance directly instead of useCallback wrappers

* Update examples/threejs-server/src/threejs-app.tsx

Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>

* Update examples/threejs-server/src/threejs-app.tsx

Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>

* prettier

---------

Co-authored-by: Jonathan Hefner <jonathan@hefner.pro>
This commit is contained in:
Olivier Chafik 2026-02-19 11:17:04 -08:00 • committed by GitHub
commit 37e127034f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 129 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

35
examples/threejs-server/src/mcp-app-wrapper.tsx
View file

@ -7,7 +7,7 @@
import type { App, McpUiHostContext } from "@modelcontextprotocol/ext-apps";
import { useApp, useHostStyles } from "@modelcontextprotocol/ext-apps/react";
import type { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
import { StrictMode, useState, useCallback, useEffect } from "react";
import { StrictMode, useState, useEffect } from "react";
import { createRoot } from "react-dom/client";
import ThreeJSApp from "./threejs-app.tsx";
import "./global.css";
@ -21,6 +21,8 @@ import "./global.css";
* This interface can be reused for other views.
*/
export interface ViewProps<TToolInput = Record<string, unknown>> {
/** The connected MCP App instance */
app: App;
/** Complete tool input (after streaming finishes) */
toolInputs: TToolInput | null;
/** Partial tool input (during streaming) */
@ -29,14 +31,6 @@ export interface ViewProps<TToolInput = Record<string, unknown>> {
toolResult: CallToolResult | null;
/** Host context (theme, dimensions, locale, etc.) */
hostContext: McpUiHostContext | null;
/** Call a tool on the MCP server */
callServerTool: App["callServerTool"];
/** Send a message to the host's chat */
sendMessage: App["sendMessage"];
/** Request the host to open a URL */
openLink: App["openLink"];
/** Send log messages to the host */
sendLog: App["sendLog"];
}
// =============================================================================
@ -91,24 +85,6 @@ function McpAppWrapper() {
}
}, [app]);
// Memoized callbacks that forward to app methods
const callServerTool = useCallback<App["callServerTool"]>(
(params, options) => app!.callServerTool(params, options),
[app],
);
const sendMessage = useCallback<App["sendMessage"]>(
(params, options) => app!.sendMessage(params, options),
[app],
);
const openLink = useCallback<App["openLink"]>(
(params, options) => app!.openLink(params, options),
[app],
);
const sendLog = useCallback<App["sendLog"]>(
(params) => app!.sendLog(params),
[app],
);
if (error) {
return <div className="error">Error: {error.message}</div>;
}
@ -119,14 +95,11 @@ function McpAppWrapper() {
return (
<ThreeJSApp
app={app}
toolInputs={toolInputs}
toolInputsPartial={toolInputsPartial}
toolResult={toolResult}
hostContext={hostContext}
callServerTool={callServerTool}
sendMessage={sendMessage}
openLink={openLink}
sendLog={sendLog}
/>
);
}