Add API docs (#29)
* Refactor types.ts to use explicit interfaces with JSDoc Replace z.infer<typeof Schema> patterns with explicit interface definitions for all MCP UI types. Add VerifySchemaMatches helper type to ensure compile-time verification that schemas match their interfaces. Add comprehensive JSDoc documentation to all exported types including: - Clear descriptions of purpose and usage - @see references to related types and methods - Code examples where helpful - @internal markers for implementation details 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add JSDoc documentation and TypeDoc tooling Add comprehensive JSDoc documentation to: - AppBridge class and all methods - App class and all methods - PostMessageTransport class and callbacks - React hooks (useApp, useAutoResize) - React module index Set up TypeDoc for API documentation generation: - Add typedoc.json configuration - Add docs and docs:watch npm scripts - Add typedoc dev dependency - Update .gitignore to exclude generated docs 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add JSDoc documentation for callback handler setters Document all notification and request handler setters in AppBridge and App classes with comprehensive JSDoc comments including: - Clear descriptions of when handlers are called - Parameter documentation and types - Practical code examples with error handling - Cross-references to related types and methods - Security considerations where relevant Also update types.ts to document optional isError fields in result types and make McpUiInitializedNotification params optional. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add JSDoc for new App methods and fix result type compatibility Document new public APIs introduced in merge commit 74a7b1f: - getHostCapabilities() - getter for host capabilities after connect - getHostVersion() - getter for host implementation info after connect - oncalltool setter - convenience handler for tool call requests - onlisttools setter - convenience handler for tool listing requests - RESOURCE_URI_META_KEY constant - metadata key for resource URIs Add index signatures to McpUiMessageResult and McpUiOpenLinkResult for MCP SDK Protocol class compatibility, matching the existing pattern in McpUiInitializeResult. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add comprehensive JSDoc documentation across library - Document App methods with detailed descriptions and examples - Add JSDoc to AppBridge methods including getters and setters - Document PostMessageTransport callback properties - Improve React hook documentation (useApp, useAutoResize) - Add documentation for types.ts result and notification types - Add @see cross-references between related methods - Fix code examples to use correct syntax and patterns - Clarify error handling behavior in method descriptions 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix TypeDoc cross-module link resolution warnings Replace unqualified @link references with module-qualified syntax to fix "Failed to resolve link" warnings during docs generation. TypeDoc cannot resolve links like {@link App.sendOpenLink} without imports, so use the module-qualified format {@link app.App.sendOpenLink} instead. Changes: - types.ts: Fix 9 cross-module links to App and AppBridge methods - app-bridge.ts: Fix 2 references to App.sendSizeChange - message-transport.ts: Fix 2 references to App.connect and AppBridge.connect This eliminates all "Failed to resolve link" warnings without requiring circular imports or removing documentation cross-references. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Remove TypeDoc links to undocumented external types Remove @link references to types that are either: - Not exported (AppOptions) - internal implementation detail - From external packages (@modelcontextprotocol/sdk) - not included in docs This eliminates warnings about resolved but undocumented types. The type information is still available through TypeScript's type system and parameter documentation, but without broken links in the generated documentation. Removed links to: - AppOptions (internal type) - Implementation, CallToolRequest, CallToolResult (MCP SDK types) - ListToolsRequest, LoggingMessageNotification (MCP SDK types) Reduces warnings from 12 to 4 (remaining are about missing example files). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Bump @modelcontextprotocol/sdk to ^1.23.0 Update SDK dependency to fix CI build failures caused by version mismatch. CI was installing 1.23.0 (latest compatible with ^1.22.0) while local builds used 1.22.0. Note: package-lock.json is gitignored, which prevents reproducible builds. Consider committing it to ensure CI uses the same versions as local development. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Fix Zod type compatibility with @modelcontextprotocol/sdk The SDK imports Zod from 'zod/v4' while this package imported from 'zod'. Although both resolve to the same version (3.25.x), TypeScript sees them as separate modules with incompatible type declarations. This caused type errors when: - Extending SDK schemas like RequestSchema.extend() - Passing SDK schemas to setRequestHandler/setNotificationHandler - Using ZodObject/ZodLiteral types from different import paths Changes: - Import zod from 'zod/v4' to match SDK import path - Update z.record() calls to use Zod v4 signature (requires both key and value schemas) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add GitHub Actions workflow to deploy docs to gh-pages Adds a workflow with manual trigger (workflow_dispatch) that generates TypeDoc documentation and publishes it to the gh-pages branch using peaceiris/actions-gh-pages. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Add docs index.html redirect to API documentation 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Revise README for clarity and audience focus - Add API documentation badge linking to GitHub Pages - Reorganize content around two audiences: App Developers and Host Developers - Convert relative links to absolute GitHub URLs for better portability - Simplify installation and examples sections - Add Resources section with links to docs, spec, and discussion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update src/app-bridge.ts --------- Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: Olivier Chafik <ochafik@anthropic.com>
This commit is contained in:
Jonathan Hefner
GitHub
parent
e6b1e640ab
commit
16a9e6f034
1 changed files with 2136 additions and 133 deletions
|
|
@ -4,22 +4,105 @@ import { Client } from "@modelcontextprotocol/sdk/client";
|
|||
import { App, McpUiAppCapabilities, PostMessageTransport } from "../app";
|
||||
export * from "../app";
|
||||
|
||||
/**
|
||||
* Options for configuring the useApp hook.
|
||||
*
|
||||
* Note: This interface does NOT expose App options like `autoResize`.
|
||||
* The hook creates the App with default options (autoResize: true). If you need
|
||||
* custom App options, create the App manually instead of using this hook.
|
||||
*
|
||||
* @see {@link useApp} for the hook that uses these options
|
||||
* @see {@link useAutoResize} for manual auto-resize control with custom App options
|
||||
*/
|
||||
export interface UseAppOptions {
|
||||
/** App identification (name and version) */
|
||||
appInfo: Implementation;
|
||||
/** Features and capabilities this app provides */
|
||||
capabilities: McpUiAppCapabilities;
|
||||
/**
|
||||
* Called after client is created but before connection.
|
||||
* Use this to register handlers via app.ontoolinput, app.toolresult, etc.
|
||||
* Called after App is created but before connection.
|
||||
*
|
||||
* Use this to register request/notification handlers that need to be in place
|
||||
* before the initialization handshake completes.
|
||||
*
|
||||
* @param app - The newly created App instance
|
||||
*
|
||||
* @example Register a notification handler
|
||||
* ```typescript
|
||||
* import { McpUiToolInputNotificationSchema } from '@modelcontextprotocol/ext-apps/react';
|
||||
*
|
||||
* onAppCreated: (app) => {
|
||||
* app.setNotificationHandler(
|
||||
* McpUiToolInputNotificationSchema,
|
||||
* (notification) => {
|
||||
* console.log("Tool input:", notification.params.arguments);
|
||||
* }
|
||||
* );
|
||||
* }
|
||||
* ```
|
||||
*/
|
||||
onAppCreated?: (app: App) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* State returned by the useApp hook.
|
||||
*/
|
||||
export interface AppState {
|
||||
/** The connected App instance, null during initialization */
|
||||
app: App | null;
|
||||
/** Whether initialization completed successfully */
|
||||
isConnected: boolean;
|
||||
/** Connection error if initialization failed, null otherwise */
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* React hook to create and connect an MCP App.
|
||||
*
|
||||
* This hook manages the complete lifecycle of an {@link App}: creation, connection,
|
||||
* and cleanup. It automatically creates a {@link 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.
|
||||
*
|
||||
* @param options - Configuration for the app
|
||||
* @returns 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).
|
||||
*
|
||||
* @example Basic usage
|
||||
* ```typescript
|
||||
* 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>;
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @see {@link App.connect} for the underlying connection method
|
||||
* @see {@link useAutoResize} for manual auto-resize control when using custom App options
|
||||
*/
|
||||
export function useApp({
|
||||
appInfo,
|
||||
capabilities,
|
||||
|
|
|
|||
Loading…
Reference in a new issue