mcp-use
Version:
Opinionated MCP Framework for TypeScript (@modelcontextprotocol/sdk compatible) - Build MCP Agents, Clients and Servers with support for ChatGPT Apps, Code Mode, OAuth, Notifications, Sampling, Observability and more.
61 lines • 2.3 kB
TypeScript
/**
* React hook for OpenAI Apps SDK widget development
* Wraps window.openai API and adapts MCP UI props to toolInput
*/
import type { Theme, UnknownObject, UseWidgetResult } from "./widget-types.js";
/**
* React hook for building OpenAI Apps SDK widgets with MCP-use
*
* Provides type-safe access to the window.openai API. Widget props come from
* _meta["mcp-use/props"] (widget-only data), while toolInput contains the original tool arguments.
*
* @example
* ```tsx
* const MyWidget: React.FC = () => {
* const { props, toolInput, output, theme } = useWidget<
* { city: string; temperature: number }, // Props (widget-only)
* string, // Output (model sees)
* {}, // Metadata
* {}, // State
* { city: string } // ToolInput (tool args)
* >();
*
* return (
* <div data-theme={theme}>
* <h1>{props.city}</h1>
* <p>{props.temperature}°C</p>
* <p>Requested: {toolInput.city}</p>
* </div>
* );
* };
* ```
*/
export declare function useWidget<TProps extends UnknownObject = UnknownObject, TOutput extends UnknownObject = UnknownObject, TMetadata extends UnknownObject = UnknownObject, TState extends UnknownObject = UnknownObject, TToolInput extends UnknownObject = UnknownObject>(defaultProps?: TProps): UseWidgetResult<TProps, TOutput, TMetadata, TState, TToolInput>;
/**
* Hook to get just the widget props (most common use case)
* @example
* ```tsx
* const props = useWidgetProps<{ city: string; temperature: number }>();
* ```
*/
export declare function useWidgetProps<TProps extends UnknownObject = UnknownObject>(defaultProps?: TProps): TProps;
/**
* Hook to get theme value
* @example
* ```tsx
* const theme = useWidgetTheme();
* ```
*/
export declare function useWidgetTheme(): Theme;
/**
* Hook to get and update widget state
* @example
* ```tsx
* const [favorites, setFavorites] = useWidgetState<string[]>([]);
* ```
*/
export declare function useWidgetState<TState extends UnknownObject>(defaultState?: TState): readonly [
TState | null,
(state: TState | ((prev: TState | null) => TState)) => Promise<void>
];
//# sourceMappingURL=useWidget.d.ts.map