import { Implementation } from "@modelcontextprotocol/sdk/types.js"; import { App, McpUiAppCapabilities, McpUiTheme } from "@modelcontextprotocol/ext-apps/react"; import { App as App$1 } from "@modelcontextprotocol/ext-apps"; //#region src/ui/use-mcp-app.d.ts /** Options for {@link useMcpApp}. */ interface UseMcpAppOptions { /** Identifies this view to the host */ appInfo: Implementation; /** Features this view supports; defaults to none */ capabilities?: McpUiAppCapabilities; } /** Connection state, host theme, and tool data for an MCP App view. */ interface McpAppState { /** Connected app instance, or null while connecting */ app: App | null; /** Whether the handshake with the host completed */ isConnected: boolean; /** Set when the handshake itself failed */ connectionError: Error | null; /** Host's current color theme, kept in sync as the host changes it */ theme: McpUiTheme; /** Payload of the most recent tool result, if any */ data: TData | undefined; /** Error message from the most recent tool result, if it failed */ toolError: string | undefined; /** Whether a {@link McpAppState.callTool} request is in flight */ isCallingTool: boolean; /** * Invokes a tool on the server this view came from and folds the response into * `data` / `toolError`, so calling a refresh-style tool re-renders the view. * * Returns the parsed payload, or `undefined` when the tool reported an error. */ callTool: (name: string, args?: Record) => Promise; } /** * Connects a React view to its MCP host. * * Wraps the MCP Apps SDK with the conventions this monorepo already uses: host * style variables and fonts are applied so the view matches the surrounding * client, and tool results are unwrapped from the `createToolResult` envelope * into typed `data`. This hook only feeds the host's values to CSS custom * properties; the view supplies its own stylesheet. * * The initial payload arrives as a `ui/notifications/tool-result` notification * rather than in the handshake response, so listeners are registered in * `onAppCreated` — before `connect()` — to avoid dropping a result that lands * immediately. They are attached with `addEventListener` rather than the `on*` * setters so a view can observe the same notifications on the returned `app` * without displacing this hook's own handling. * * `appInfo` and `capabilities` are read once, on mount: the underlying `useApp` * deliberately does not reconnect when its options change, so later values are * ignored. * * @param options - View identity and declared capabilities * @returns Connection state, host theme, tool data, and a tool caller * * @example * ```tsx * const { data, theme, callTool } = useMcpApp<{ greeting: string }>({ * appInfo: { name: 'docs-hello', version: '1.0.0' }, * }); * ``` */ declare function useMcpApp({ appInfo, capabilities }: UseMcpAppOptions): McpAppState; //#endregion //#region src/ui/tool-envelope.d.ts /** Payload and error message extracted from a tool result. */ interface ParsedToolResult { /** Result payload, or undefined when the tool reported an error */ data: TData | undefined; /** Human-readable error message, or undefined when the call succeeded */ error: string | undefined; /** Total matching rows across all pages, when the tool returned a list envelope */ totalCount?: number; /** Whether another page of results exists, when the tool returned a list envelope */ hasNextPage?: boolean; /** Cursor for the next page, when the tool returned one */ nextCursor?: string; } //#endregion //#region src/ui/use-tool.d.ts /** Loading, error, and result state for a single MCP server tool. */ interface UseToolState { /** Most recent successful payload for this tool */ data: TData | undefined; /** Error message from the most recent failed call, if any */ error: string | undefined; /** Whether a {@link UseToolState.call} request is in flight */ isLoading: boolean; /** * Invokes this tool on the originating server. * * Unlike {@link import('./use-mcp-app.js').McpAppState.callTool}, this keeps * its own `data` / `error` and does not overwrite the view's open/refresh * payload. Concurrent calls: the latest response wins for `data` / `error`; * each `call()` promise still resolves to that invocation's parsed result, * including list pagination when present. * * @param args - Tool arguments (defaults to `{}`) * @returns Parsed payload and list metadata; `data` is undefined on error */ call: (args?: Record) => Promise>; } /** * Calls one named MCP tool from a view and tracks its own loading / error / result. * * Use this when the view needs tools beyond the open/refresh payload that * {@link import('./use-mcp-app.js').useMcpApp} owns. Pair with `app` from * `useMcpApp`; one hook instance per tool name. * * @param app - Connected app from `useMcpApp`, or null while connecting * @param toolName - Tool to invoke (model-facing or `visibility: ['app']`) * @returns Per-tool state and a `call` helper * * @example * ```tsx * const { app, isConnected } = useMcpApp({ appInfo: { name: 'my-view', version: '1.0.0' } }); * const org = useTool<{ name: string }>(app, 'admin_get_organization'); * * useEffect(() => { * if (isConnected) void org.call({}); * }, [isConnected, org.call]); * ``` */ declare function useTool(app: App$1 | null, toolName: string): UseToolState; //#endregion export { type McpAppState, type ParsedToolResult, type UseMcpAppOptions, type UseToolState, useMcpApp, useTool }; //# sourceMappingURL=index.d.mts.map