|
1 | 1 | import { useCallback, useMemo } from "react"; |
2 | 2 |
|
3 | | -/** Options for sending a message */ |
4 | 3 | interface SendMessageOptions { |
5 | | - /** Target origin for postMessage. Defaults to "*" */ |
6 | 4 | targetOrigin?: string; |
7 | 5 | } |
8 | 6 |
|
9 | 7 | /** Return type for the useUIActions hook */ |
10 | 8 | interface UseUIActionsResult { |
11 | | - /** |
12 | | - * Sends an intent message to the host. |
13 | | - * Indicates the user has interacted with the UI and expressed an intent for the host to act on. |
14 | | - * @param intent - The intent identifier |
15 | | - * @param params - Optional parameters for the intent |
16 | | - */ |
| 9 | + /** Sends an intent message for the host to act on */ |
17 | 10 | intent: <T = unknown>(intent: string, params?: T) => void; |
18 | | - |
19 | | - /** |
20 | | - * Sends a notify message to the host. |
21 | | - * Indicates the iframe already acted upon user interaction and is notifying the host. |
22 | | - * @param message - The notification message |
23 | | - */ |
| 11 | + /** Notifies the host of something that happened */ |
24 | 12 | notify: (message: string) => void; |
25 | | - |
26 | | - /** |
27 | | - * Sends a prompt message to the host. |
28 | | - * Asks the host to run a prompt. |
29 | | - * @param prompt - The prompt text to run |
30 | | - */ |
| 13 | + /** Asks the host to run a prompt */ |
31 | 14 | prompt: (prompt: string) => void; |
32 | | - |
33 | | - /** |
34 | | - * Sends a tool call message to the host. |
35 | | - * Asks the host to execute a tool. |
36 | | - * @param toolName - The name of the tool to call |
37 | | - * @param params - Optional parameters for the tool |
38 | | - */ |
| 15 | + /** Asks the host to execute a tool */ |
39 | 16 | tool: <T = unknown>(toolName: string, params?: T) => void; |
40 | | - |
41 | | - /** |
42 | | - * Sends a link message to the host. |
43 | | - * Asks the host to navigate to a URL. |
44 | | - * @param url - The URL to navigate to |
45 | | - */ |
| 17 | + /** Asks the host to navigate to a URL */ |
46 | 18 | link: (url: string) => void; |
47 | | - |
48 | | - /** |
49 | | - * Reports a size change to the host. |
50 | | - * Used for auto-resizing iframes. |
51 | | - * @param dimensions - The new dimensions (width and/or height) |
52 | | - */ |
| 19 | + /** Reports iframe size changes to the host */ |
53 | 20 | reportSizeChange: (dimensions: { width?: number; height?: number }) => void; |
54 | 21 | } |
55 | 22 |
|
56 | 23 | /** |
57 | | - * Hook for sending UI actions to the parent window via postMessage. |
58 | | - * This is used by iframe-based UI components to communicate back to an MCP client. |
59 | | - * |
60 | | - * Implements the MCP-UI embeddable UI communication protocol. |
61 | | - * All actions are fire-and-forget - use `useRenderData` to receive responses from the host. |
62 | | - * |
63 | | - * @param defaultOptions - Default options applied to all messages |
64 | | - * @returns An object containing action methods: |
65 | | - * - intent: Send an intent for the host to act on |
66 | | - * - notify: Notify the host of something that happened |
67 | | - * - prompt: Ask the host to run a prompt |
68 | | - * - tool: Ask the host to run a tool call |
69 | | - * - link: Ask the host to navigate to a URL |
70 | | - * - reportSizeChange: Report iframe size changes |
| 24 | + * Hook for sending UI actions to the parent window via postMessage |
| 25 | + * This is used by iframe-based UI components to communicate back to an MCP client |
71 | 26 | * |
72 | 27 | * @example |
73 | 28 | * ```tsx |
74 | 29 | * function MyComponent() { |
75 | | - * const { data } = useRenderData<MyData>(); |
76 | 30 | * const { intent, tool, link } = useUIActions(); |
77 | 31 | * |
78 | | - * const handleCreateTask = () => { |
79 | | - * intent("create-task", { title: "Buy groceries" }); |
80 | | - * }; |
81 | | - * |
82 | | - * const handleRefresh = () => { |
83 | | - * // Ask host to run a tool, host will send new data via render data |
84 | | - * tool("refresh-data", { id: data?.id }); |
85 | | - * }; |
86 | | - * |
87 | | - * const handleOpenDocs = () => { |
88 | | - * link("https://docs.example.com"); |
89 | | - * }; |
90 | | - * |
91 | | - * return <button onClick={handleCreateTask}>Create Task</button>; |
| 32 | + * return <button onClick={() => intent("create-task", { title: "Buy groceries" })}>Create Task</button>; |
92 | 33 | * } |
93 | 34 | * ``` |
94 | 35 | */ |
|
0 commit comments