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).
import { useApp, McpUiToolInputNotificationSchema } from '@modelcontextprotocol/ext-apps/react';
function MyApp() {
const { app, isConnected, error } = useApp({
appInfo: { name: "MyApp", version: "1.0.0" },
capabilities: {},
onAppCreated: (app) => {
// Register handlers before connection
app.setNotificationHandler(
McpUiToolInputNotificationSchema,
(notification) => {
console.log("Tool input:", notification.params.arguments);
}
);
},
});
if (error) return <div>Error: {error.message}</div>;
if (!isConnected) return <div>Connecting...</div>;
return <div>Connected!</div>;
}
React hook to create and connect an MCP App.
This hook manages the complete lifecycle of an App: creation, connection, and cleanup. It automatically creates a PostMessageTransport to window.parent and handles initialization.
Important: The hook intentionally does NOT re-run when options change to avoid reconnection loops. Options are only used during the initial mount.
Note: This 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.