@copilotkitnext/react 1.51.5-next.2 → 1.51.5-next.4

package/dist/hooks/use-render-tool.cjs

@@ -5,6 +5,47 @@ let react = require("react");
 
 //#region src/hooks/use-render-tool.tsx
 const EMPTY_DEPS = [];
+/**
+* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
+*
+* Key behavior:
+* - deduplicates by `agentId:name` (latest registration wins),
+* - keeps renderer entries on cleanup so historical chat tool calls can still render,
+* - refreshes registration when `deps` change.
+*
+* @typeParam S - Zod schema type describing tool call args.
+* @param config - Renderer config for wildcard or named tools.
+* @param deps - Optional dependencies to refresh registration.
+*
+* @example
+* ```tsx
+* useRenderTool(
+*   {
+*     name: "searchDocs",
+*     args: z.object({ query: z.string() }),
+*     render: ({ status, args, result }) => {
+*       if (status === "executing") return <div>Searching {args.query}</div>;
+*       if (status === "complete") return <div>{result}</div>;
+*       return <div>Preparing...</div>;
+*     },
+*   },
+*   [],
+* );
+* ```
+*
+* @example
+* ```tsx
+* useRenderTool(
+*   {
+*     name: "summarize",
+*     args: z.object({ text: z.string() }),
+*     agentId: "research-agent",
+*     render: ({ name, status }) => <div>{name}: {status}</div>,
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
 function useRenderTool(config, deps) {
 	const { copilotkit } = require_CopilotKitProvider.useCopilotKit();
 	const extraDeps = deps ?? EMPTY_DEPS;

package/dist/hooks/use-render-tool.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-render-tool.cjs","names":["useCopilotKit","defineToolCallRenderer"],"sources":["../../src/hooks/use-render-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { z } from \"zod\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport interface RenderToolInProgressProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: Partial<z.infer<S>>;\n  status: \"inProgress\";\n  result: undefined;\n}\n\nexport interface RenderToolExecutingProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"executing\";\n  result: undefined;\n}\n\nexport interface RenderToolCompleteProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"complete\";\n  result: string;\n}\n\nexport type RenderToolProps<S extends z.ZodTypeAny> =\n  | RenderToolInProgressProps<S>\n  | RenderToolExecutingProps<S>\n  | RenderToolCompleteProps<S>;\n\ntype RenderToolConfig<S extends z.ZodTypeAny> = {\n  name: string;\n  args?: S;\n  render: (props: RenderToolProps<S>) => React.ReactElement;\n  agentId?: string;\n};\n\n// Overload: wildcard without args\nexport function useRenderTool(\n  config: {\n    name: \"*\";\n    render: (props: any) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n// Overload: named tool with args\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: {\n    name: string;\n    args: S;\n    render: (props: RenderToolProps<S>) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n// Implementation\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: RenderToolConfig<S>,\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    // Build the ReactToolCallRenderer via defineToolCallRenderer\n    const renderer =\n      config.name === \"*\" && !config.args\n        ? defineToolCallRenderer({\n            name: \"*\",\n            render: config.render as any,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          })\n        : defineToolCallRenderer({\n            name: config.name,\n            args: config.args!,\n            render: config.render as any,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          });\n\n    // Dedupe by \"agentId:name\" key, same pattern as useFrontendTool\n    const keyOf = (rc: ReactToolCallRenderer<any>) =>\n      `${rc.agentId ?? \"\"}:${rc.name}`;\n    const currentRenderToolCalls =\n      copilotkit.renderToolCalls as ReactToolCallRenderer<any>[];\n\n    const mergedMap = new Map<string, ReactToolCallRenderer<any>>();\n    for (const rc of currentRenderToolCalls) {\n      mergedMap.set(keyOf(rc), rc);\n    }\n\n    mergedMap.set(keyOf(renderer), renderer);\n\n    copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n\n    // No cleanup removal — keeps renderer for chat history, same as useFrontendTool\n  }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;;AAMA,MAAM,aAAqC,EAAE;AAyD7C,SAAgB,cACd,QACA,MACM;CACN,MAAM,EAAE,eAAeA,0CAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,4BAAgB;EAEd,MAAM,WACJ,OAAO,SAAS,OAAO,CAAC,OAAO,OAC3BC,sDAAuB;GACrB,MAAM;GACN,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC,GACFA,sDAAuB;GACrB,MAAM,OAAO;GACb,MAAM,OAAO;GACb,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC;EAGR,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;EAC5B,MAAM,yBACJ,WAAW;EAEb,MAAM,4BAAY,IAAI,KAAyC;AAC/D,OAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;AAG9B,YAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAExC,aAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;IAG5D;EAAC,OAAO;EAAM;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}
+{"version":3,"file":"use-render-tool.cjs","names":["useCopilotKit","defineToolCallRenderer"],"sources":["../../src/hooks/use-render-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { z } from \"zod\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport interface RenderToolInProgressProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: Partial<z.infer<S>>;\n  status: \"inProgress\";\n  result: undefined;\n}\n\nexport interface RenderToolExecutingProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"executing\";\n  result: undefined;\n}\n\nexport interface RenderToolCompleteProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"complete\";\n  result: string;\n}\n\nexport type RenderToolProps<S extends z.ZodTypeAny> =\n  | RenderToolInProgressProps<S>\n  | RenderToolExecutingProps<S>\n  | RenderToolCompleteProps<S>;\n\ntype RenderToolConfig<S extends z.ZodTypeAny> = {\n  name: string;\n  args?: S;\n  render: (props: RenderToolProps<S>) => React.ReactElement;\n  agentId?: string;\n};\n\n/**\n * Registers a wildcard (`\"*\"`) renderer for tool calls.\n *\n * The wildcard renderer is used as a fallback when no exact name-matched\n * renderer is registered for a tool call.\n *\n * @param config - Wildcard renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"*\",\n *     render: ({ name, status }) => (\n *       <div>\n *         {status === \"complete\" ? \"✓\" : \"⏳\"} {name}\n *       </div>\n *     ),\n *   },\n *   [],\n * );\n * ```\n */\nexport function useRenderTool(\n  config: {\n    name: \"*\";\n    render: (props: any) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n/**\n * Registers a name-scoped renderer for tool calls.\n *\n * The provided `args` Zod schema defines the typed shape of `props.args`\n * in `render` for `executing` and `complete` states.\n *\n * @typeParam S - Zod schema type describing tool call args.\n * @param config - Named renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"searchDocs\",\n *     args: z.object({ query: z.string() }),\n *     render: ({ status, args, result }) => {\n *       if (status === \"inProgress\") return <div>Preparing...</div>;\n *       if (status === \"executing\") return <div>Searching {args.query}</div>;\n *       return <div>{result}</div>;\n *     },\n *   },\n *   [],\n * );\n * ```\n */\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: {\n    name: string;\n    args: S;\n    render: (props: RenderToolProps<S>) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n/**\n * Registers a renderer entry in CopilotKit's `renderToolCalls` registry.\n *\n * Key behavior:\n * - deduplicates by `agentId:name` (latest registration wins),\n * - keeps renderer entries on cleanup so historical chat tool calls can still render,\n * - refreshes registration when `deps` change.\n *\n * @typeParam S - Zod schema type describing tool call args.\n * @param config - Renderer config for wildcard or named tools.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"searchDocs\",\n *     args: z.object({ query: z.string() }),\n *     render: ({ status, args, result }) => {\n *       if (status === \"executing\") return <div>Searching {args.query}</div>;\n *       if (status === \"complete\") return <div>{result}</div>;\n *       return <div>Preparing...</div>;\n *     },\n *   },\n *   [],\n * );\n * ```\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"summarize\",\n *     args: z.object({ text: z.string() }),\n *     agentId: \"research-agent\",\n *     render: ({ name, status }) => <div>{name}: {status}</div>,\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: RenderToolConfig<S>,\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    // Build the ReactToolCallRenderer via defineToolCallRenderer\n    const renderer =\n      config.name === \"*\" && !config.args\n        ? defineToolCallRenderer({\n            name: \"*\",\n            render: config.render,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          })\n        : defineToolCallRenderer({\n            name: config.name,\n            args: config.args!,\n            render: config.render,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          });\n\n    // Dedupe by \"agentId:name\" key, same pattern as useFrontendTool\n    const keyOf = (rc: ReactToolCallRenderer) =>\n      `${rc.agentId ?? \"\"}:${rc.name}`;\n    const currentRenderToolCalls =\n      copilotkit.renderToolCalls as ReactToolCallRenderer[];\n\n    const mergedMap = new Map<string, ReactToolCallRenderer>();\n    for (const rc of currentRenderToolCalls) {\n      mergedMap.set(keyOf(rc), rc);\n    }\n\n    mergedMap.set(keyOf(renderer), renderer);\n\n    copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n\n    // No cleanup removal — keeps renderer for chat history, same as useFrontendTool\n  }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;;AAMA,MAAM,aAAqC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJ7C,SAAgB,cACd,QACA,MACM;CACN,MAAM,EAAE,eAAeA,0CAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,4BAAgB;EAEd,MAAM,WACJ,OAAO,SAAS,OAAO,CAAC,OAAO,OAC3BC,sDAAuB;GACrB,MAAM;GACN,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC,GACFA,sDAAuB;GACrB,MAAM,OAAO;GACb,MAAM,OAAO;GACb,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC;EAGR,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;EAC5B,MAAM,yBACJ,WAAW;EAEb,MAAM,4BAAY,IAAI,KAAoC;AAC1D,OAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;AAG9B,YAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAExC,aAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;IAG5D;EAAC,OAAO;EAAM;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}

package/dist/hooks/use-render-tool.d.cts

@@ -20,11 +20,61 @@ interface RenderToolCompleteProps<S extends z.ZodTypeAny> {
   result: string;
 }
 type RenderToolProps<S extends z.ZodTypeAny> = RenderToolInProgressProps<S> | RenderToolExecutingProps<S> | RenderToolCompleteProps<S>;
+/**
+ * Registers a wildcard (`"*"`) renderer for tool calls.
+ *
+ * The wildcard renderer is used as a fallback when no exact name-matched
+ * renderer is registered for a tool call.
+ *
+ * @param config - Wildcard renderer configuration.
+ * @param deps - Optional dependencies to refresh registration.
+ *
+ * @example
+ * ```tsx
+ * useRenderTool(
+ *   {
+ *     name: "*",
+ *     render: ({ name, status }) => (
+ *       <div>
+ *         {status === "complete" ? "✓" : "⏳"} {name}
+ *       </div>
+ *     ),
+ *   },
+ *   [],
+ * );
+ * ```
+ */
 declare function useRenderTool(config: {
   name: "*";
   render: (props: any) => React.ReactElement;
   agentId?: string;
 }, deps?: ReadonlyArray<unknown>): void;
+/**
+ * Registers a name-scoped renderer for tool calls.
+ *
+ * The provided `args` Zod schema defines the typed shape of `props.args`
+ * in `render` for `executing` and `complete` states.
+ *
+ * @typeParam S - Zod schema type describing tool call args.
+ * @param config - Named renderer configuration.
+ * @param deps - Optional dependencies to refresh registration.
+ *
+ * @example
+ * ```tsx
+ * useRenderTool(
+ *   {
+ *     name: "searchDocs",
+ *     args: z.object({ query: z.string() }),
+ *     render: ({ status, args, result }) => {
+ *       if (status === "inProgress") return <div>Preparing...</div>;
+ *       if (status === "executing") return <div>Searching {args.query}</div>;
+ *       return <div>{result}</div>;
+ *     },
+ *   },
+ *   [],
+ * );
+ * ```
+ */
 declare function useRenderTool<S extends z.ZodTypeAny>(config: {
   name: string;
   args: S;

package/dist/hooks/use-render-tool.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-render-tool.d.cts","names":[],"sources":["../../src/hooks/use-render-tool.tsx"],"mappings":";;;UAQiB,yBAAA,WAAoC,CAAA,CAAE,UAAA;EACrD,IAAA;EACA,IAAA,EAAM,OAAA,CAAQ,CAAA,CAAE,KAAA,CAAM,CAAA;EACtB,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,wBAAA,WAAmC,CAAA,CAAE,UAAA;EACpD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,uBAAA,WAAkC,CAAA,CAAE,UAAA;EACnD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,KAGU,eAAA,WAA0B,CAAA,CAAE,UAAA,IACpC,yBAAA,CAA0B,CAAA,IAC1B,wBAAA,CAAyB,CAAA,IACzB,uBAAA,CAAwB,CAAA;AAAA,iBAUZ,aAAA,CACd,MAAA;EACE,IAAA;EACA,MAAA,GAAS,KAAA,UAAe,KAAA,CAAM,YAAA;EAC9B,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA;AAAA,iBAIO,aAAA,WAAwB,CAAA,CAAE,UAAA,CAAA,CACxC,MAAA;EACE,IAAA;EACA,IAAA,EAAM,CAAA;EACN,MAAA,GAAS,KAAA,EAAO,eAAA,CAAgB,CAAA,MAAO,KAAA,CAAM,YAAA;EAC7C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}
+{"version":3,"file":"use-render-tool.d.cts","names":[],"sources":["../../src/hooks/use-render-tool.tsx"],"mappings":";;;UAQiB,yBAAA,WAAoC,CAAA,CAAE,UAAA;EACrD,IAAA;EACA,IAAA,EAAM,OAAA,CAAQ,CAAA,CAAE,KAAA,CAAM,CAAA;EACtB,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,wBAAA,WAAmC,CAAA,CAAE,UAAA;EACpD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,uBAAA,WAAkC,CAAA,CAAE,UAAA;EACnD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,KAGU,eAAA,WAA0B,CAAA,CAAE,UAAA,IACpC,yBAAA,CAA0B,CAAA,IAC1B,wBAAA,CAAyB,CAAA,IACzB,uBAAA,CAAwB,CAAA;;;;;;AAjB5B;;;;;;;;;;;;;;;;;;;iBAkDgB,aAAA,CACd,MAAA;EACE,IAAA;EACA,MAAA,GAAS,KAAA,UAAe,KAAA,CAAM,YAAA;EAC9B,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA;;;;;;;;;;;;;;;;;AA1CT;;;;;;;;;;iBAuEgB,aAAA,WAAwB,CAAA,CAAE,UAAA,CAAA,CACxC,MAAA;EACE,IAAA;EACA,IAAA,EAAM,CAAA;EACN,MAAA,GAAS,KAAA,EAAO,eAAA,CAAgB,CAAA,MAAO,KAAA,CAAM,YAAA;EAC7C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}

package/dist/hooks/use-render-tool.d.mts

@@ -20,11 +20,61 @@ interface RenderToolCompleteProps<S extends z.ZodTypeAny> {
   result: string;
 }
 type RenderToolProps<S extends z.ZodTypeAny> = RenderToolInProgressProps<S> | RenderToolExecutingProps<S> | RenderToolCompleteProps<S>;
+/**
+ * Registers a wildcard (`"*"`) renderer for tool calls.
+ *
+ * The wildcard renderer is used as a fallback when no exact name-matched
+ * renderer is registered for a tool call.
+ *
+ * @param config - Wildcard renderer configuration.
+ * @param deps - Optional dependencies to refresh registration.
+ *
+ * @example
+ * ```tsx
+ * useRenderTool(
+ *   {
+ *     name: "*",
+ *     render: ({ name, status }) => (
+ *       <div>
+ *         {status === "complete" ? "✓" : "⏳"} {name}
+ *       </div>
+ *     ),
+ *   },
+ *   [],
+ * );
+ * ```
+ */
 declare function useRenderTool(config: {
   name: "*";
   render: (props: any) => React.ReactElement;
   agentId?: string;
 }, deps?: ReadonlyArray<unknown>): void;
+/**
+ * Registers a name-scoped renderer for tool calls.
+ *
+ * The provided `args` Zod schema defines the typed shape of `props.args`
+ * in `render` for `executing` and `complete` states.
+ *
+ * @typeParam S - Zod schema type describing tool call args.
+ * @param config - Named renderer configuration.
+ * @param deps - Optional dependencies to refresh registration.
+ *
+ * @example
+ * ```tsx
+ * useRenderTool(
+ *   {
+ *     name: "searchDocs",
+ *     args: z.object({ query: z.string() }),
+ *     render: ({ status, args, result }) => {
+ *       if (status === "inProgress") return <div>Preparing...</div>;
+ *       if (status === "executing") return <div>Searching {args.query}</div>;
+ *       return <div>{result}</div>;
+ *     },
+ *   },
+ *   [],
+ * );
+ * ```
+ */
 declare function useRenderTool<S extends z.ZodTypeAny>(config: {
   name: string;
   args: S;

package/dist/hooks/use-render-tool.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-render-tool.d.mts","names":[],"sources":["../../src/hooks/use-render-tool.tsx"],"mappings":";;;UAQiB,yBAAA,WAAoC,CAAA,CAAE,UAAA;EACrD,IAAA;EACA,IAAA,EAAM,OAAA,CAAQ,CAAA,CAAE,KAAA,CAAM,CAAA;EACtB,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,wBAAA,WAAmC,CAAA,CAAE,UAAA;EACpD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,uBAAA,WAAkC,CAAA,CAAE,UAAA;EACnD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,KAGU,eAAA,WAA0B,CAAA,CAAE,UAAA,IACpC,yBAAA,CAA0B,CAAA,IAC1B,wBAAA,CAAyB,CAAA,IACzB,uBAAA,CAAwB,CAAA;AAAA,iBAUZ,aAAA,CACd,MAAA;EACE,IAAA;EACA,MAAA,GAAS,KAAA,UAAe,KAAA,CAAM,YAAA;EAC9B,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA;AAAA,iBAIO,aAAA,WAAwB,CAAA,CAAE,UAAA,CAAA,CACxC,MAAA;EACE,IAAA;EACA,IAAA,EAAM,CAAA;EACN,MAAA,GAAS,KAAA,EAAO,eAAA,CAAgB,CAAA,MAAO,KAAA,CAAM,YAAA;EAC7C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}
+{"version":3,"file":"use-render-tool.d.mts","names":[],"sources":["../../src/hooks/use-render-tool.tsx"],"mappings":";;;UAQiB,yBAAA,WAAoC,CAAA,CAAE,UAAA;EACrD,IAAA;EACA,IAAA,EAAM,OAAA,CAAQ,CAAA,CAAE,KAAA,CAAM,CAAA;EACtB,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,wBAAA,WAAmC,CAAA,CAAE,UAAA;EACpD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,UAGe,uBAAA,WAAkC,CAAA,CAAE,UAAA;EACnD,IAAA;EACA,IAAA,EAAM,CAAA,CAAE,KAAA,CAAM,CAAA;EACd,MAAA;EACA,MAAA;AAAA;AAAA,KAGU,eAAA,WAA0B,CAAA,CAAE,UAAA,IACpC,yBAAA,CAA0B,CAAA,IAC1B,wBAAA,CAAyB,CAAA,IACzB,uBAAA,CAAwB,CAAA;;;;;;AAjB5B;;;;;;;;;;;;;;;;;;;iBAkDgB,aAAA,CACd,MAAA;EACE,IAAA;EACA,MAAA,GAAS,KAAA,UAAe,KAAA,CAAM,YAAA;EAC9B,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA;;;;;;;;;;;;;;;;;AA1CT;;;;;;;;;;iBAuEgB,aAAA,WAAwB,CAAA,CAAE,UAAA,CAAA,CACxC,MAAA;EACE,IAAA;EACA,IAAA,EAAM,CAAA;EACN,MAAA,GAAS,KAAA,EAAO,eAAA,CAAgB,CAAA,MAAO,KAAA,CAAM,YAAA;EAC7C,OAAA;AAAA,GAEF,IAAA,GAAO,aAAA"}

package/dist/hooks/use-render-tool.mjs

@@ -4,6 +4,47 @@ import { useEffect } from "react";
 
 //#region src/hooks/use-render-tool.tsx
 const EMPTY_DEPS = [];
+/**
+* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
+*
+* Key behavior:
+* - deduplicates by `agentId:name` (latest registration wins),
+* - keeps renderer entries on cleanup so historical chat tool calls can still render,
+* - refreshes registration when `deps` change.
+*
+* @typeParam S - Zod schema type describing tool call args.
+* @param config - Renderer config for wildcard or named tools.
+* @param deps - Optional dependencies to refresh registration.
+*
+* @example
+* ```tsx
+* useRenderTool(
+*   {
+*     name: "searchDocs",
+*     args: z.object({ query: z.string() }),
+*     render: ({ status, args, result }) => {
+*       if (status === "executing") return <div>Searching {args.query}</div>;
+*       if (status === "complete") return <div>{result}</div>;
+*       return <div>Preparing...</div>;
+*     },
+*   },
+*   [],
+* );
+* ```
+*
+* @example
+* ```tsx
+* useRenderTool(
+*   {
+*     name: "summarize",
+*     args: z.object({ text: z.string() }),
+*     agentId: "research-agent",
+*     render: ({ name, status }) => <div>{name}: {status}</div>,
+*   },
+*   [selectedAgentId],
+* );
+* ```
+*/
 function useRenderTool(config, deps) {
 	const { copilotkit } = useCopilotKit();
 	const extraDeps = deps ?? EMPTY_DEPS;

package/dist/hooks/use-render-tool.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-render-tool.mjs","names":[],"sources":["../../src/hooks/use-render-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { z } from \"zod\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport interface RenderToolInProgressProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: Partial<z.infer<S>>;\n  status: \"inProgress\";\n  result: undefined;\n}\n\nexport interface RenderToolExecutingProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"executing\";\n  result: undefined;\n}\n\nexport interface RenderToolCompleteProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"complete\";\n  result: string;\n}\n\nexport type RenderToolProps<S extends z.ZodTypeAny> =\n  | RenderToolInProgressProps<S>\n  | RenderToolExecutingProps<S>\n  | RenderToolCompleteProps<S>;\n\ntype RenderToolConfig<S extends z.ZodTypeAny> = {\n  name: string;\n  args?: S;\n  render: (props: RenderToolProps<S>) => React.ReactElement;\n  agentId?: string;\n};\n\n// Overload: wildcard without args\nexport function useRenderTool(\n  config: {\n    name: \"*\";\n    render: (props: any) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n// Overload: named tool with args\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: {\n    name: string;\n    args: S;\n    render: (props: RenderToolProps<S>) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n// Implementation\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: RenderToolConfig<S>,\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    // Build the ReactToolCallRenderer via defineToolCallRenderer\n    const renderer =\n      config.name === \"*\" && !config.args\n        ? defineToolCallRenderer({\n            name: \"*\",\n            render: config.render as any,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          })\n        : defineToolCallRenderer({\n            name: config.name,\n            args: config.args!,\n            render: config.render as any,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          });\n\n    // Dedupe by \"agentId:name\" key, same pattern as useFrontendTool\n    const keyOf = (rc: ReactToolCallRenderer<any>) =>\n      `${rc.agentId ?? \"\"}:${rc.name}`;\n    const currentRenderToolCalls =\n      copilotkit.renderToolCalls as ReactToolCallRenderer<any>[];\n\n    const mergedMap = new Map<string, ReactToolCallRenderer<any>>();\n    for (const rc of currentRenderToolCalls) {\n      mergedMap.set(keyOf(rc), rc);\n    }\n\n    mergedMap.set(keyOf(renderer), renderer);\n\n    copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n\n    // No cleanup removal — keeps renderer for chat history, same as useFrontendTool\n  }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;AAMA,MAAM,aAAqC,EAAE;AAyD7C,SAAgB,cACd,QACA,MACM;CACN,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,iBAAgB;EAEd,MAAM,WACJ,OAAO,SAAS,OAAO,CAAC,OAAO,OAC3B,uBAAuB;GACrB,MAAM;GACN,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC,GACF,uBAAuB;GACrB,MAAM,OAAO;GACb,MAAM,OAAO;GACb,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC;EAGR,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;EAC5B,MAAM,yBACJ,WAAW;EAEb,MAAM,4BAAY,IAAI,KAAyC;AAC/D,OAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;AAG9B,YAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAExC,aAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;IAG5D;EAAC,OAAO;EAAM;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}
+{"version":3,"file":"use-render-tool.mjs","names":[],"sources":["../../src/hooks/use-render-tool.tsx"],"sourcesContent":["import { useEffect } from \"react\";\nimport type { z } from \"zod\";\nimport { useCopilotKit } from \"../providers/CopilotKitProvider\";\nimport { defineToolCallRenderer } from \"../types/defineToolCallRenderer\";\nimport type { ReactToolCallRenderer } from \"../types/react-tool-call-renderer\";\n\nconst EMPTY_DEPS: ReadonlyArray<unknown> = [];\n\nexport interface RenderToolInProgressProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: Partial<z.infer<S>>;\n  status: \"inProgress\";\n  result: undefined;\n}\n\nexport interface RenderToolExecutingProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"executing\";\n  result: undefined;\n}\n\nexport interface RenderToolCompleteProps<S extends z.ZodTypeAny> {\n  name: string;\n  args: z.infer<S>;\n  status: \"complete\";\n  result: string;\n}\n\nexport type RenderToolProps<S extends z.ZodTypeAny> =\n  | RenderToolInProgressProps<S>\n  | RenderToolExecutingProps<S>\n  | RenderToolCompleteProps<S>;\n\ntype RenderToolConfig<S extends z.ZodTypeAny> = {\n  name: string;\n  args?: S;\n  render: (props: RenderToolProps<S>) => React.ReactElement;\n  agentId?: string;\n};\n\n/**\n * Registers a wildcard (`\"*\"`) renderer for tool calls.\n *\n * The wildcard renderer is used as a fallback when no exact name-matched\n * renderer is registered for a tool call.\n *\n * @param config - Wildcard renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"*\",\n *     render: ({ name, status }) => (\n *       <div>\n *         {status === \"complete\" ? \"✓\" : \"⏳\"} {name}\n *       </div>\n *     ),\n *   },\n *   [],\n * );\n * ```\n */\nexport function useRenderTool(\n  config: {\n    name: \"*\";\n    render: (props: any) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n/**\n * Registers a name-scoped renderer for tool calls.\n *\n * The provided `args` Zod schema defines the typed shape of `props.args`\n * in `render` for `executing` and `complete` states.\n *\n * @typeParam S - Zod schema type describing tool call args.\n * @param config - Named renderer configuration.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"searchDocs\",\n *     args: z.object({ query: z.string() }),\n *     render: ({ status, args, result }) => {\n *       if (status === \"inProgress\") return <div>Preparing...</div>;\n *       if (status === \"executing\") return <div>Searching {args.query}</div>;\n *       return <div>{result}</div>;\n *     },\n *   },\n *   [],\n * );\n * ```\n */\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: {\n    name: string;\n    args: S;\n    render: (props: RenderToolProps<S>) => React.ReactElement;\n    agentId?: string;\n  },\n  deps?: ReadonlyArray<unknown>,\n): void;\n\n/**\n * Registers a renderer entry in CopilotKit's `renderToolCalls` registry.\n *\n * Key behavior:\n * - deduplicates by `agentId:name` (latest registration wins),\n * - keeps renderer entries on cleanup so historical chat tool calls can still render,\n * - refreshes registration when `deps` change.\n *\n * @typeParam S - Zod schema type describing tool call args.\n * @param config - Renderer config for wildcard or named tools.\n * @param deps - Optional dependencies to refresh registration.\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"searchDocs\",\n *     args: z.object({ query: z.string() }),\n *     render: ({ status, args, result }) => {\n *       if (status === \"executing\") return <div>Searching {args.query}</div>;\n *       if (status === \"complete\") return <div>{result}</div>;\n *       return <div>Preparing...</div>;\n *     },\n *   },\n *   [],\n * );\n * ```\n *\n * @example\n * ```tsx\n * useRenderTool(\n *   {\n *     name: \"summarize\",\n *     args: z.object({ text: z.string() }),\n *     agentId: \"research-agent\",\n *     render: ({ name, status }) => <div>{name}: {status}</div>,\n *   },\n *   [selectedAgentId],\n * );\n * ```\n */\nexport function useRenderTool<S extends z.ZodTypeAny>(\n  config: RenderToolConfig<S>,\n  deps?: ReadonlyArray<unknown>,\n): void {\n  const { copilotkit } = useCopilotKit();\n  const extraDeps = deps ?? EMPTY_DEPS;\n\n  useEffect(() => {\n    // Build the ReactToolCallRenderer via defineToolCallRenderer\n    const renderer =\n      config.name === \"*\" && !config.args\n        ? defineToolCallRenderer({\n            name: \"*\",\n            render: config.render,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          })\n        : defineToolCallRenderer({\n            name: config.name,\n            args: config.args!,\n            render: config.render,\n            ...(config.agentId ? { agentId: config.agentId } : {}),\n          });\n\n    // Dedupe by \"agentId:name\" key, same pattern as useFrontendTool\n    const keyOf = (rc: ReactToolCallRenderer) =>\n      `${rc.agentId ?? \"\"}:${rc.name}`;\n    const currentRenderToolCalls =\n      copilotkit.renderToolCalls as ReactToolCallRenderer[];\n\n    const mergedMap = new Map<string, ReactToolCallRenderer>();\n    for (const rc of currentRenderToolCalls) {\n      mergedMap.set(keyOf(rc), rc);\n    }\n\n    mergedMap.set(keyOf(renderer), renderer);\n\n    copilotkit.setRenderToolCalls(Array.from(mergedMap.values()));\n\n    // No cleanup removal — keeps renderer for chat history, same as useFrontendTool\n  }, [config.name, copilotkit, extraDeps.length, ...extraDeps]);\n}\n"],"mappings":";;;;;AAMA,MAAM,aAAqC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiJ7C,SAAgB,cACd,QACA,MACM;CACN,MAAM,EAAE,eAAe,eAAe;CACtC,MAAM,YAAY,QAAQ;AAE1B,iBAAgB;EAEd,MAAM,WACJ,OAAO,SAAS,OAAO,CAAC,OAAO,OAC3B,uBAAuB;GACrB,MAAM;GACN,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC,GACF,uBAAuB;GACrB,MAAM,OAAO;GACb,MAAM,OAAO;GACb,QAAQ,OAAO;GACf,GAAI,OAAO,UAAU,EAAE,SAAS,OAAO,SAAS,GAAG,EAAE;GACtD,CAAC;EAGR,MAAM,SAAS,OACb,GAAG,GAAG,WAAW,GAAG,GAAG,GAAG;EAC5B,MAAM,yBACJ,WAAW;EAEb,MAAM,4BAAY,IAAI,KAAoC;AAC1D,OAAK,MAAM,MAAM,uBACf,WAAU,IAAI,MAAM,GAAG,EAAE,GAAG;AAG9B,YAAU,IAAI,MAAM,SAAS,EAAE,SAAS;AAExC,aAAW,mBAAmB,MAAM,KAAK,UAAU,QAAQ,CAAC,CAAC;IAG5D;EAAC,OAAO;EAAM;EAAY,UAAU;EAAQ,GAAG;EAAU,CAAC"}

package/dist/index.cjs

@@ -13,6 +13,7 @@ require('./providers/index.cjs');
 const require_use_render_custom_messages = require('./hooks/use-render-custom-messages.cjs');
 const require_use_render_activity_message = require('./hooks/use-render-activity-message.cjs');
 const require_use_frontend_tool = require('./hooks/use-frontend-tool.cjs');
+const require_use_component = require('./hooks/use-component.cjs');
 const require_defineToolCallRenderer = require('./types/defineToolCallRenderer.cjs');
 const require_use_render_tool = require('./hooks/use-render-tool.cjs');
 const require_use_default_render_tool = require('./hooks/use-default-render-tool.cjs');
@@ -93,6 +94,7 @@ exports.WildcardToolCallRender = require_WildcardToolCallRender.WildcardToolCall
 exports.defineToolCallRenderer = require_defineToolCallRenderer.defineToolCallRenderer;
 exports.useAgent = require_use_agent.useAgent;
 exports.useAgentContext = require_use_agent_context.useAgentContext;
+exports.useComponent = require_use_component.useComponent;
 exports.useConfigureSuggestions = require_use_configure_suggestions.useConfigureSuggestions;
 exports.useCopilotChatConfiguration = require_CopilotChatConfigurationProvider.useCopilotChatConfiguration;
 exports.useCopilotKit = require_CopilotKitProvider.useCopilotKit;

package/dist/index.d.cts

@@ -31,6 +31,7 @@ import { defineToolCallRenderer } from "./types/defineToolCallRenderer.cjs";
 import "./types/index.cjs";
 import { useRenderActivityMessage } from "./hooks/use-render-activity-message.cjs";
 import { useFrontendTool } from "./hooks/use-frontend-tool.cjs";
+import { useComponent } from "./hooks/use-component.cjs";
 import { useRenderTool } from "./hooks/use-render-tool.cjs";
 import { useDefaultRenderTool } from "./hooks/use-default-render-tool.cjs";
 import { useHumanInTheLoop } from "./hooks/use-human-in-the-loop.cjs";
@@ -43,4 +44,4 @@ import { CopilotKitCoreReact, CopilotKitCoreReactConfig, CopilotKitCoreReactSubs
 import { CopilotKitContextValue, CopilotKitProvider, CopilotKitProviderProps, useCopilotKit } from "./providers/CopilotKitProvider.cjs";
 import "./providers/index.cjs";
 export * from "@ag-ui/client";
-export { AgentContextInput, AudioRecorderError, AudioRecorderState, CopilotChat, CopilotChatAssistantMessage, CopilotChatAssistantMessageProps, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatConfigurationProviderProps, CopilotChatConfigurationValue, CopilotChatInput, CopilotChatInputProps, CopilotChatLabels, CopilotChatMessageView, CopilotChatMessageViewProps, CopilotChatProps, CopilotChatReasoningMessage, CopilotChatReasoningMessageProps, CopilotChatSuggestionPill, CopilotChatSuggestionPillProps, CopilotChatSuggestionView, CopilotChatSuggestionViewProps, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToggleButtonProps, CopilotChatToolCallsView, CopilotChatToolCallsViewProps, CopilotChatUserMessage, CopilotChatUserMessageProps, CopilotChatView, CopilotChatViewProps, CopilotKitContextValue, CopilotKitCoreReact, CopilotKitCoreReactConfig, CopilotKitCoreReactSubscriber, CopilotKitInspector, CopilotKitInspectorProps, CopilotKitProvider, CopilotKitProviderProps, CopilotModalHeader, CopilotModalHeaderProps, CopilotPopup, CopilotPopupProps, CopilotPopupView, CopilotPopupViewProps, CopilotSidebar, CopilotSidebarProps, CopilotSidebarView, CopilotSidebarViewProps, JsonSerializable, MCPAppsActivityContent, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, ReactActivityMessageRenderer, ReactCustomMessageRenderer, ReactCustomMessageRendererPosition, ReactFrontendTool, ReactHumanInTheLoop, ReactToolCallRenderer, ToolsMenuItem, UseAgentUpdate, WildcardToolCallRender, defineToolCallRenderer, useAgent, useAgentContext, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useHumanInTheLoop, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSuggestions };
+export { AgentContextInput, AudioRecorderError, AudioRecorderState, CopilotChat, CopilotChatAssistantMessage, CopilotChatAssistantMessageProps, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatConfigurationProviderProps, CopilotChatConfigurationValue, CopilotChatInput, CopilotChatInputProps, CopilotChatLabels, CopilotChatMessageView, CopilotChatMessageViewProps, CopilotChatProps, CopilotChatReasoningMessage, CopilotChatReasoningMessageProps, CopilotChatSuggestionPill, CopilotChatSuggestionPillProps, CopilotChatSuggestionView, CopilotChatSuggestionViewProps, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToggleButtonProps, CopilotChatToolCallsView, CopilotChatToolCallsViewProps, CopilotChatUserMessage, CopilotChatUserMessageProps, CopilotChatView, CopilotChatViewProps, CopilotKitContextValue, CopilotKitCoreReact, CopilotKitCoreReactConfig, CopilotKitCoreReactSubscriber, CopilotKitInspector, CopilotKitInspectorProps, CopilotKitProvider, CopilotKitProviderProps, CopilotModalHeader, CopilotModalHeaderProps, CopilotPopup, CopilotPopupProps, CopilotPopupView, CopilotPopupViewProps, CopilotSidebar, CopilotSidebarProps, CopilotSidebarView, CopilotSidebarViewProps, JsonSerializable, MCPAppsActivityContent, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, ReactActivityMessageRenderer, ReactCustomMessageRenderer, ReactCustomMessageRendererPosition, ReactFrontendTool, ReactHumanInTheLoop, ReactToolCallRenderer, ToolsMenuItem, UseAgentUpdate, WildcardToolCallRender, defineToolCallRenderer, useAgent, useAgentContext, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useHumanInTheLoop, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSuggestions };

package/dist/index.d.mts

@@ -31,6 +31,7 @@ import { defineToolCallRenderer } from "./types/defineToolCallRenderer.mjs";
 import "./types/index.mjs";
 import { useRenderActivityMessage } from "./hooks/use-render-activity-message.mjs";
 import { useFrontendTool } from "./hooks/use-frontend-tool.mjs";
+import { useComponent } from "./hooks/use-component.mjs";
 import { useRenderTool } from "./hooks/use-render-tool.mjs";
 import { useDefaultRenderTool } from "./hooks/use-default-render-tool.mjs";
 import { useHumanInTheLoop } from "./hooks/use-human-in-the-loop.mjs";
@@ -43,4 +44,4 @@ import { CopilotKitCoreReact, CopilotKitCoreReactConfig, CopilotKitCoreReactSubs
 import { CopilotKitContextValue, CopilotKitProvider, CopilotKitProviderProps, useCopilotKit } from "./providers/CopilotKitProvider.mjs";
 import "./providers/index.mjs";
 export * from "@ag-ui/client";
-export { AgentContextInput, AudioRecorderError, AudioRecorderState, CopilotChat, CopilotChatAssistantMessage, CopilotChatAssistantMessageProps, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatConfigurationProviderProps, CopilotChatConfigurationValue, CopilotChatInput, CopilotChatInputProps, CopilotChatLabels, CopilotChatMessageView, CopilotChatMessageViewProps, CopilotChatProps, CopilotChatReasoningMessage, CopilotChatReasoningMessageProps, CopilotChatSuggestionPill, CopilotChatSuggestionPillProps, CopilotChatSuggestionView, CopilotChatSuggestionViewProps, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToggleButtonProps, CopilotChatToolCallsView, CopilotChatToolCallsViewProps, CopilotChatUserMessage, CopilotChatUserMessageProps, CopilotChatView, CopilotChatViewProps, CopilotKitContextValue, CopilotKitCoreReact, CopilotKitCoreReactConfig, CopilotKitCoreReactSubscriber, CopilotKitInspector, CopilotKitInspectorProps, CopilotKitProvider, CopilotKitProviderProps, CopilotModalHeader, CopilotModalHeaderProps, CopilotPopup, CopilotPopupProps, CopilotPopupView, CopilotPopupViewProps, CopilotSidebar, CopilotSidebarProps, CopilotSidebarView, CopilotSidebarViewProps, JsonSerializable, MCPAppsActivityContent, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, ReactActivityMessageRenderer, ReactCustomMessageRenderer, ReactCustomMessageRendererPosition, ReactFrontendTool, ReactHumanInTheLoop, ReactToolCallRenderer, ToolsMenuItem, UseAgentUpdate, WildcardToolCallRender, defineToolCallRenderer, useAgent, useAgentContext, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useHumanInTheLoop, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSuggestions };
+export { AgentContextInput, AudioRecorderError, AudioRecorderState, CopilotChat, CopilotChatAssistantMessage, CopilotChatAssistantMessageProps, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatConfigurationProviderProps, CopilotChatConfigurationValue, CopilotChatInput, CopilotChatInputProps, CopilotChatLabels, CopilotChatMessageView, CopilotChatMessageViewProps, CopilotChatProps, CopilotChatReasoningMessage, CopilotChatReasoningMessageProps, CopilotChatSuggestionPill, CopilotChatSuggestionPillProps, CopilotChatSuggestionView, CopilotChatSuggestionViewProps, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToggleButtonProps, CopilotChatToolCallsView, CopilotChatToolCallsViewProps, CopilotChatUserMessage, CopilotChatUserMessageProps, CopilotChatView, CopilotChatViewProps, CopilotKitContextValue, CopilotKitCoreReact, CopilotKitCoreReactConfig, CopilotKitCoreReactSubscriber, CopilotKitInspector, CopilotKitInspectorProps, CopilotKitProvider, CopilotKitProviderProps, CopilotModalHeader, CopilotModalHeaderProps, CopilotPopup, CopilotPopupProps, CopilotPopupView, CopilotPopupViewProps, CopilotSidebar, CopilotSidebarProps, CopilotSidebarView, CopilotSidebarViewProps, JsonSerializable, MCPAppsActivityContent, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, ReactActivityMessageRenderer, ReactCustomMessageRenderer, ReactCustomMessageRendererPosition, ReactFrontendTool, ReactHumanInTheLoop, ReactToolCallRenderer, ToolsMenuItem, UseAgentUpdate, WildcardToolCallRender, defineToolCallRenderer, useAgent, useAgentContext, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useHumanInTheLoop, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSuggestions };

package/dist/index.mjs

@@ -12,6 +12,7 @@ import "./providers/index.mjs";
 import { useRenderCustomMessages } from "./hooks/use-render-custom-messages.mjs";
 import { useRenderActivityMessage } from "./hooks/use-render-activity-message.mjs";
 import { useFrontendTool } from "./hooks/use-frontend-tool.mjs";
+import { useComponent } from "./hooks/use-component.mjs";
 import { defineToolCallRenderer } from "./types/defineToolCallRenderer.mjs";
 import { useRenderTool } from "./hooks/use-render-tool.mjs";
 import { useDefaultRenderTool } from "./hooks/use-default-render-tool.mjs";
@@ -42,4 +43,4 @@ import "./types/index.mjs";
 
 export * from "@ag-ui/client"
 
-export { AudioRecorderError, CopilotChat, CopilotChatAssistantMessage_default as CopilotChatAssistantMessage, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatInput_default as CopilotChatInput, CopilotChatMessageView, CopilotChatReasoningMessage_default as CopilotChatReasoningMessage, CopilotChatSuggestionPill, CopilotChatSuggestionView, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToolCallsView, CopilotChatUserMessage_default as CopilotChatUserMessage, CopilotChatView_default as CopilotChatView, CopilotKitCoreReact, CopilotKitInspector, CopilotKitProvider, CopilotModalHeader, CopilotPopup, CopilotPopupView, CopilotSidebar, CopilotSidebarView, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, UseAgentUpdate, WildcardToolCallRender, defineToolCallRenderer, useAgent, useAgentContext, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useHumanInTheLoop, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSuggestions };
+export { AudioRecorderError, CopilotChat, CopilotChatAssistantMessage_default as CopilotChatAssistantMessage, CopilotChatAudioRecorder, CopilotChatConfigurationProvider, CopilotChatInput_default as CopilotChatInput, CopilotChatMessageView, CopilotChatReasoningMessage_default as CopilotChatReasoningMessage, CopilotChatSuggestionPill, CopilotChatSuggestionView, CopilotChatToggleButton, DefaultCloseIcon as CopilotChatToggleButtonCloseIcon, DefaultOpenIcon as CopilotChatToggleButtonOpenIcon, CopilotChatToolCallsView, CopilotChatUserMessage_default as CopilotChatUserMessage, CopilotChatView_default as CopilotChatView, CopilotKitCoreReact, CopilotKitInspector, CopilotKitProvider, CopilotModalHeader, CopilotPopup, CopilotPopupView, CopilotSidebar, CopilotSidebarView, MCPAppsActivityContentSchema, MCPAppsActivityRenderer, MCPAppsActivityType, UseAgentUpdate, WildcardToolCallRender, defineToolCallRenderer, useAgent, useAgentContext, useComponent, useConfigureSuggestions, useCopilotChatConfiguration, useCopilotKit, useDefaultRenderTool, useFrontendTool, useHumanInTheLoop, useRenderActivityMessage, useRenderCustomMessages, useRenderTool, useRenderToolCall, useSuggestions };

package/dist/index.umd.js

@@ -2229,6 +2229,60 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 		]);
 	}
 
+//#endregion
+//#region src/hooks/use-component.tsx
+/**
+	* Registers a React component as a frontend tool renderer in chat.
+	*
+	* This hook is a convenience wrapper around `useFrontendTool` that:
+	* - builds a model-facing tool description,
+	* - forwards optional Zod parameters,
+	* - renders your component with tool call args.
+	*
+	* Use this when you want to display a typed visual component for a tool call
+	* without manually wiring a full frontend tool object.
+	*
+	* @typeParam T - Shape of tool args expected by the component.
+	* @param config - Tool registration config.
+	* @param deps - Optional dependencies to refresh registration (same semantics as `useEffect`).
+	*
+	* @example
+	* ```tsx
+	* useComponent({
+	*   name: "showWeatherCard",
+	*   parameters: z.object({ city: z.string() }),
+	*   component: ({ city }: { city: string }) => <div>{city}</div>,
+	* });
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useComponent(
+	*   {
+	*     name: "renderProfile",
+	*     parameters: z.object({ userId: z.string() }),
+	*     component: ProfileCard,
+	*     agentId: "support-agent",
+	*   },
+	*   [selectedAgentId],
+	* );
+	* ```
+	*/
+	function useComponent(config, deps) {
+		const prefix = `Use this tool to display the "${config.name}" component in the chat. This tool renders a visual UI component for the user.`;
+		const fullDescription = config.description ? `${prefix}\n\n${config.description}` : prefix;
+		useFrontendTool({
+			name: config.name,
+			description: fullDescription,
+			parameters: config.parameters,
+			render: ({ args }) => {
+				const Component = config.component;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, { ...args });
+			},
+			agentId: config.agentId
+		}, deps);
+	}
+
 //#endregion
 //#region src/types/defineToolCallRenderer.ts
 	function defineToolCallRenderer(def) {
@@ -2244,6 +2298,47 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#endregion
 //#region src/hooks/use-render-tool.tsx
 	const EMPTY_DEPS = [];
+	/**
+	* Registers a renderer entry in CopilotKit's `renderToolCalls` registry.
+	*
+	* Key behavior:
+	* - deduplicates by `agentId:name` (latest registration wins),
+	* - keeps renderer entries on cleanup so historical chat tool calls can still render,
+	* - refreshes registration when `deps` change.
+	*
+	* @typeParam S - Zod schema type describing tool call args.
+	* @param config - Renderer config for wildcard or named tools.
+	* @param deps - Optional dependencies to refresh registration.
+	*
+	* @example
+	* ```tsx
+	* useRenderTool(
+	*   {
+	*     name: "searchDocs",
+	*     args: z.object({ query: z.string() }),
+	*     render: ({ status, args, result }) => {
+	*       if (status === "executing") return <div>Searching {args.query}</div>;
+	*       if (status === "complete") return <div>{result}</div>;
+	*       return <div>Preparing...</div>;
+	*     },
+	*   },
+	*   [],
+	* );
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useRenderTool(
+	*   {
+	*     name: "summarize",
+	*     args: z.object({ text: z.string() }),
+	*     agentId: "research-agent",
+	*     render: ({ name, status }) => <div>{name}: {status}</div>,
+	*   },
+	*   [selectedAgentId],
+	* );
+	* ```
+	*/
 	function useRenderTool(config, deps) {
 		const { copilotkit } = useCopilotKit();
 		const extraDeps = deps !== null && deps !== void 0 ? deps : EMPTY_DEPS;
@@ -2278,10 +2373,40 @@ window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-
 //#endregion
 //#region src/hooks/use-default-render-tool.tsx
 /**
-	* Registers a wildcard ("*") tool-call renderer via `useRenderTool`.
+	* Registers a wildcard (`"*"`) tool-call renderer via `useRenderTool`.
+	*
+	* - Call with no config to use CopilotKit's built-in default tool-call card.
+	* - Pass `config.render` to replace the default UI with your own fallback renderer.
 	*
-	* - Call with no arguments to get a sensible default UI.
-	* - Pass a `render` function to fully replace the default UI.
+	* This is useful when you want a generic renderer for tools that do not have a
+	* dedicated `useRenderTool({ name: "..." })` registration.
+	*
+	* @param config - Optional custom wildcard render function.
+	* @param deps - Optional dependencies to refresh registration.
+	*
+	* @example
+	* ```tsx
+	* useDefaultRenderTool();
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useDefaultRenderTool({
+	*   render: ({ name, status }) => <div>{name}: {status}</div>,
+	* });
+	* ```
+	*
+	* @example
+	* ```tsx
+	* useDefaultRenderTool(
+	*   {
+	*     render: ({ name, result }) => (
+	*       <ToolEventRow title={name} payload={result} compact={compactMode} />
+	*     ),
+	*   },
+	*   [compactMode],
+	* );
+	* ```
 	*/
 	function useDefaultRenderTool(config, deps) {
 		var _config$render;
@@ -4730,6 +4855,7 @@ exports.WildcardToolCallRender = WildcardToolCallRender;
 exports.defineToolCallRenderer = defineToolCallRenderer;
 exports.useAgent = useAgent;
 exports.useAgentContext = useAgentContext;
+exports.useComponent = useComponent;
 exports.useConfigureSuggestions = useConfigureSuggestions;
 exports.useCopilotChatConfiguration = useCopilotChatConfiguration;
 exports.useCopilotKit = useCopilotKit;