Configuration for the app
Current connection state and app instance. If connection fails during
initialization, the error field will contain the error (typically connection
timeouts, initialization handshake failures, or transport errors).
function MyApp() {
const [hostContext, setHostContext] = useState<
McpUiHostContext | undefined
>(undefined);
const { app, isConnected, error } = useApp({
appInfo: { name: "MyApp", version: "1.0.0" },
capabilities: {},
onAppCreated: (app) => {
app.ontoolinput = (input) => {
console.log("Tool input:", input);
};
app.ontoolresult = (result) => {
console.log("Tool result:", result);
};
app.ontoolcancelled = (params) => {
console.log("Tool cancelled:", params.reason);
};
app.onerror = (error) => {
console.log("Error:", error);
};
app.onhostcontextchanged = (ctx) => {
setHostContext((prev) => ({ ...prev, ...ctx }));
};
},
});
if (error) return <div>Error: {error.message}</div>;
if (!isConnected) return <div>Connecting...</div>;
return <div>Theme: {hostContext?.theme}</div>;
}
App.connect for the underlying connection methoduseAutoResize for manual auto-resize control when using custom App options
React hook to create and connect an MCP App.
This hook manages
Appcreation and connection. It automatically creates aPostMessageTransportto window.parent and handles initialization.This hook is part of the optional React integration. The core SDK (
App,PostMessageTransport) is framework-agnostic and can be used with any UI framework or vanilla JavaScript.Important: The hook intentionally does NOT re-run when options change to avoid reconnection loops. Options are only used during the initial mount. Furthermore, the
Appinstance is NOT closed on unmount. This avoids cleanup issues during React Strict Mode's double-mount cycle. If you need to explicitly close theApp, callApp.closemanually.