npm - @copilotkit/react-core - Versions diffs - 1.55.0-next.9 → 1.55.0 - Mend

@copilotkit/react-core 1.55.0-next.9 → 1.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (81) hide show

package/CHANGELOG.md +36 -6
package/dist/{copilotkit-DeOzjPsb.mjs → copilotkit-BY5S1-0P.mjs} +2402 -552
package/dist/copilotkit-BY5S1-0P.mjs.map +1 -0
package/dist/{copilotkit-BqcyhQjT.d.mts → copilotkit-BuhSUZHb.d.mts} +228 -17
package/dist/copilotkit-BuhSUZHb.d.mts.map +1 -0
package/dist/{copilotkit-BDNjFNmk.cjs → copilotkit-Bz5-ImDl.cjs} +2421 -541
package/dist/copilotkit-Bz5-ImDl.cjs.map +1 -0
package/dist/{copilotkit-l-IBF4Xp.d.cts → copilotkit-dwDWYpya.d.cts} +228 -17
package/dist/copilotkit-dwDWYpya.d.cts.map +1 -0
package/dist/index.cjs +1 -1
package/dist/index.d.cts +1 -1
package/dist/index.d.mts +1 -1
package/dist/index.mjs +1 -1
package/dist/index.umd.js +1400 -238
package/dist/index.umd.js.map +1 -1
package/dist/v2/index.cjs +13 -1
package/dist/v2/index.css +1 -1
package/dist/v2/index.d.cts +3 -3
package/dist/v2/index.d.mts +3 -3
package/dist/v2/index.mjs +3 -2
package/dist/v2/index.umd.js +2442 -552
package/dist/v2/index.umd.js.map +1 -1
package/package.json +62 -54
package/scripts/scope-preflight.mjs +1 -2
package/src/components/CopilotListeners.tsx +41 -8
package/src/components/copilot-provider/copilotkit-props.tsx +4 -2
package/src/components/toast/toast-provider.tsx +269 -194
package/src/v2/__tests__/A2UIMessageRenderer.test.tsx +86 -22
package/src/v2/__tests__/utils/test-helpers.tsx +67 -0
package/src/v2/a2ui/A2UICatalogContext.tsx +79 -0
package/src/v2/a2ui/A2UIMessageRenderer.tsx +125 -37
package/src/v2/a2ui/A2UIToolCallRenderer.tsx +290 -0
package/src/v2/components/CopilotKitInspector.tsx +2 -0
package/src/v2/components/OpenGenerativeUIRenderer.tsx +598 -0
package/src/v2/components/__tests__/OpenGenerativeUIRenderer.test.tsx +665 -0
package/src/v2/components/chat/CopilotChat.tsx +193 -50
package/src/v2/components/chat/CopilotChatAssistantMessage.tsx +17 -2
package/src/v2/components/chat/CopilotChatAttachmentQueue.tsx +481 -0
package/src/v2/components/chat/CopilotChatAttachmentRenderer.tsx +139 -0
package/src/v2/components/chat/CopilotChatInput.tsx +146 -77
package/src/v2/components/chat/CopilotChatMessageView.tsx +253 -149
package/src/v2/components/chat/CopilotChatSuggestionView.tsx +1 -0
package/src/v2/components/chat/CopilotChatUserMessage.tsx +54 -0
package/src/v2/components/chat/CopilotChatView.tsx +179 -66
package/src/v2/components/chat/__tests__/CopilotChat.attachments.test.tsx +168 -0
package/src/v2/components/chat/__tests__/CopilotChatActivityRendering.e2e.test.tsx +63 -2
package/src/v2/components/chat/__tests__/CopilotChatInput.test.tsx +544 -1
package/src/v2/components/chat/__tests__/CopilotChatPerf.e2e.test.tsx +268 -0
package/src/v2/components/chat/__tests__/CopilotChatPropsRerender.e2e.test.tsx +249 -0
package/src/v2/components/chat/__tests__/MCPAppsActivityRenderer.e2e.test.tsx +43 -2
package/src/v2/components/chat/__tests__/copilot-chat-throttle.test.tsx +138 -0
package/src/v2/components/chat/index.ts +9 -0
package/src/v2/components/chat/scroll-element-context.ts +13 -0
package/src/v2/hooks/__tests__/use-agent-throttle.test.tsx +1003 -0
package/src/v2/hooks/__tests__/use-attachments.test.tsx +169 -0
package/src/v2/hooks/__tests__/use-threads.test.tsx +54 -0
package/src/v2/hooks/index.ts +5 -0
package/src/v2/hooks/use-agent.tsx +95 -10
package/src/v2/hooks/use-attachments.tsx +269 -0
package/src/v2/hooks/use-frontend-tool.tsx +5 -2
package/src/v2/hooks/use-render-activity-message.tsx +9 -2
package/src/v2/hooks/use-threads.tsx +35 -15
package/src/v2/index.ts +5 -1
package/src/v2/lib/__tests__/processPartialHtml.test.ts +112 -0
package/src/v2/lib/__tests__/slots.test.ts +56 -0
package/src/v2/lib/processPartialHtml.ts +45 -0
package/src/v2/lib/slots.tsx +42 -1
package/src/v2/providers/CopilotChatConfigurationProvider.tsx +9 -3
package/src/v2/providers/CopilotKitProvider.tsx +268 -32
package/src/v2/providers/SandboxFunctionsContext.ts +10 -0
package/src/v2/providers/__tests__/CopilotKitProvider.sandboxFunctions.test.tsx +198 -0
package/src/v2/providers/__tests__/CopilotKitProvider.test.tsx +71 -0
package/src/v2/providers/index.ts +7 -0
package/src/v2/styles/globals.css +2 -1
package/src/v2/types/index.ts +1 -0
package/src/v2/types/sandbox-function.ts +11 -0
package/dist/copilotkit-BDNjFNmk.cjs.map +0 -1
package/dist/copilotkit-BqcyhQjT.d.mts.map +0 -1
package/dist/copilotkit-DeOzjPsb.mjs.map +0 -1
package/dist/copilotkit-l-IBF4Xp.d.cts.map +0 -1
package/src/v2/components/__tests__/license-warning-banner.test.tsx +0 -46

package/src/v2/providers/CopilotKitProvider.tsx CHANGED Viewed

@@ -9,12 +9,14 @@ import {
   type ReactNode,
   useMemo,
   useEffect,
+  useLayoutEffect,
   useReducer,
   useRef,
   useState,
 } from "react";
 import { z } from "zod";
 import { CopilotKitInspector } from "../components/CopilotKitInspector";
+import type { Anchor } from "@copilotkit/web-inspector";
 import { LicenseWarningBanner } from "../components/license-warning-banner";
 import {
   createLicenseContextValue,
@@ -26,7 +28,16 @@ import {
   MCPAppsActivityRenderer,
   MCPAppsActivityType,
 } from "../components/MCPAppsActivityRenderer";
+import {
+  OpenGenerativeUIActivityType,
+  OpenGenerativeUIContentSchema,
+  OpenGenerativeUIActivityRenderer,
+  OpenGenerativeUIToolRenderer,
+  GenerateSandboxedUiArgsSchema,
+} from "../components/OpenGenerativeUIRenderer";
 import { createA2UIMessageRenderer } from "../a2ui/A2UIMessageRenderer";
+import { A2UIBuiltInToolCallRenderer } from "../a2ui/A2UIToolCallRenderer";
+import { A2UICatalogContext } from "../a2ui/A2UICatalogContext";
 import { viewerTheme } from "@copilotkit/a2ui-renderer";
 import type { Theme as A2UITheme } from "@copilotkit/a2ui-renderer";
 import { CopilotKitCoreReact } from "../lib/react-core";
@@ -37,10 +48,39 @@ import type {
 import type { ReactFrontendTool } from "../types/frontend-tool";
 import type { ReactHumanInTheLoop } from "../types/human-in-the-loop";
 import type { ReactCustomMessageRenderer } from "../types/react-custom-message-renderer";
+import type { SandboxFunction } from "../types/sandbox-function";
+import { SandboxFunctionsContext } from "./SandboxFunctionsContext";
+import { schemaToJsonSchema } from "@copilotkit/shared";
+import { zodToJsonSchema } from "zod-to-json-schema";
 const HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
 const COPILOT_CLOUD_CHAT_URL = "https://api.cloud.copilotkit.ai/copilotkit/v1";
+const DEFAULT_DESIGN_SKILL = `When generating UI with generateSandboxedUi, follow these design principles inspired by shadcn/ui:
+- Use a minimal, flat aesthetic. Avoid drop shadows and gradients — rely on subtle borders (1px solid, light gray like #e5e7eb) to define surfaces.
+- Neutral base palette: white backgrounds, zinc/slate gray text (#09090b for headings, #71717a for secondary text). One accent color for interactive elements.
+- Use system font stacks (system-ui, -apple-system, sans-serif) at readable sizes (14px body, 600 weight for headings). Tight line-heights.
+- Small, consistent border-radius (6–8px). Cards and containers use border, not shadow, for separation.
+- Buttons: solid fill for primary (dark bg, white text), outline for secondary (border + transparent bg). Subtle hover state (slight opacity or background shift).
+- Use CSS Grid or Flexbox for layout. Ensure the UI looks good at any width.
+- Minimal transitions (150ms) for hover/focus states only. No decorative animations.
+- Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
+const GENERATE_SANDBOXED_UI_DESCRIPTION =
+  "Generate sandboxed UI. " +
+  "IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. " +
+  "Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. " +
+  "To communicate with the host application, use Websandbox.connection.remote.<functionName>(args) which returns a Promise.\n\n" +
+  "You CAN use external libraries from CDNs by including <script> or <link> tags in the HTML <head> (e.g., Chart.js, D3, Three.js, x-data-spreadsheet, etc.). " +
+  "CDN resources load normally inside the sandbox.\n\n" +
+  "PARAMETER ORDER IS CRITICAL — generate parameters in exactly this order:\n" +
+  "1. initialHeight + placeholderMessages (shown to user while generating)\n" +
+  "2. css (all styles FIRST — the user sees a placeholder until CSS is complete)\n" +
+  "3. html (streams in live — the user watches the UI build as HTML is generated)\n" +
+  "4. jsFunctions (reusable helper functions)\n" +
+  "5. jsExpressions (applied one-by-one — the user sees each expression take effect)";
 // Define the context value interface - idiomatic React naming
 export interface CopilotKitContextValue {
   copilotkit: CopilotKitCoreReact;
@@ -99,6 +139,39 @@ export interface CopilotKitProviderProps {
   renderCustomMessages?: ReactCustomMessageRenderer[];
   frontendTools?: ReactFrontendTool[];
   humanInTheLoop?: ReactHumanInTheLoop[];
+  /**
+   * Configuration for OpenGenerativeUI — sandboxed UI generated by the LLM.
+   *
+   * @example
+   * ```tsx
+   * <CopilotKit
+   *   runtimeUrl="/api/copilotkit"
+   *   openGenerativeUI={{
+   *     sandboxFunctions: [{ name: "addToCart", description: "…", parameters: schema, handler: fn }],
+   *   }}
+   * >
+   * ```
+   */
+  openGenerativeUI?: {
+    /**
+     * Functions made available inside sandboxed iframes.
+     * Each function is described to the LLM via agent context and exposed
+     * via websandbox's `localApi`.
+     *
+     * Inside the iframe, call them with:
+     * ```js
+     * await Websandbox.connection.remote.<functionName>(args)
+     * ```
+     */
+    sandboxFunctions?: SandboxFunction[];
+    /**
+     * Design guidelines injected as agent context for the `generateSandboxedUi` tool.
+     * Override this to control the visual style of generated UIs.
+     *
+     * A sensible default is provided if omitted.
+     */
+    designSkill?: string;
+  };
   showDevConsole?: boolean | "auto";
   /**
    * Error handler called when CopilotKit encounters an error.
@@ -128,7 +201,39 @@ export interface CopilotKitProviderProps {
      * When omitted, the built-in `viewerTheme` from `@copilotkit/a2ui-renderer` is used.
      */
     theme?: A2UITheme;
+    /**
+     * Optional component catalog to pass to the A2UI renderer.
+     * When omitted, the default basicCatalog is used.
+     */
+    catalog?: any;
+    /**
+     * Optional custom loading component shown while an A2UI surface is generating.
+     * When omitted, a default animated skeleton is shown.
+     */
+    loadingComponent?: React.ComponentType;
+    /**
+     * When true (the default), the full component schemas from the catalog are
+     * sent as agent context so the agent knows what components and props are
+     * available. The A2UI middleware can overwrite this with a server-side
+     * schema if configured. Set to false to disable.
+     */
+    includeSchema?: boolean;
   };
+  /**
+   * Default throttle interval (in milliseconds) for `useAgent` re-renders
+   * triggered by `OnMessagesChanged` notifications. This value is used as
+   * a fallback when neither the `useAgent()` hook nor `<CopilotChat>` /
+   * `<CopilotSidebar>` / `<CopilotPopup>` specify an explicit `throttleMs`.
+   *
+   * @default undefined (components/hooks without an explicit throttleMs will be unthrottled)
+   */
+  defaultThrottleMs?: number;
+  /**
+   * Default anchor corner for the inspector button and window.
+   * Only used on first load before the user drags to a custom position.
+   * Defaults to `{ horizontal: "right", vertical: "top" }`.
+   */
+  inspectorDefaultAnchor?: Anchor;
 }
 // Small helper to normalize array props to a stable reference and warn
@@ -171,13 +276,18 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
   renderCustomMessages,
   frontendTools,
   humanInTheLoop,
+  openGenerativeUI,
   showDevConsole = false,
-  useSingleEndpoint = false,
+  useSingleEndpoint,
   onError,
   a2ui,
+  defaultThrottleMs,
+  inspectorDefaultAnchor,
 }) => {
   const [shouldRenderInspector, setShouldRenderInspector] = useState(false);
   const [runtimeA2UIEnabled, setRuntimeA2UIEnabled] = useState(false);
+  const [runtimeOpenGenUIEnabled, setRuntimeOpenGenUIEnabled] = useState(false);
+  const openGenUIActive = runtimeOpenGenUIEnabled || !!openGenerativeUI;
   const [runtimeLicenseStatus, setRuntimeLicenseStatus] = useState<
     string | undefined
   >(undefined);
@@ -245,14 +355,26 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
       },
     ];
+    if (openGenUIActive) {
+      renderers.push({
+        activityType: OpenGenerativeUIActivityType,
+        content: OpenGenerativeUIContentSchema,
+        render: OpenGenerativeUIActivityRenderer,
+      });
+    }
     if (runtimeA2UIEnabled) {
       renderers.unshift(
-        createA2UIMessageRenderer({ theme: a2ui?.theme ?? viewerTheme }),
+        createA2UIMessageRenderer({
+          theme: a2ui?.theme ?? viewerTheme,
+          catalog: a2ui?.catalog,
+          loadingComponent: a2ui?.loadingComponent,
+        }),
       );
     }
     return renderers;
-  }, [runtimeA2UIEnabled, a2ui]);
+  }, [runtimeA2UIEnabled, openGenUIActive, a2ui]);
   // Combine user-provided activity renderers with built-in ones
   // User-provided renderers take precedence (come first) so they can override built-ins
@@ -299,6 +421,10 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
     humanInTheLoop,
     "humanInTheLoop must be a stable array. If you want to dynamically add or remove human-in-the-loop tools, use `useHumanInTheLoop` instead.",
   );
+  const sandboxFunctionsList = useStableArrayProp<SandboxFunction>(
+    openGenerativeUI?.sandboxFunctions,
+    "openGenerativeUI.sandboxFunctions must be a stable array.",
+  );
   // Note: warnings for array identity changes are handled by useStableArrayProp
@@ -344,25 +470,41 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
     return { tools: processedTools, renderToolCalls: processedRenderToolCalls };
   }, [humanInTheLoopList]);
+  // Built-in frontend tool for generateSandboxedUi — registered only when the runtime has openGenerativeUI enabled
+  const builtInFrontendTools = useMemo<ReactFrontendTool[]>(() => {
+    if (!openGenUIActive) return [];
+    return [
+      {
+        name: "generateSandboxedUi",
+        description: GENERATE_SANDBOXED_UI_DESCRIPTION,
+        parameters: GenerateSandboxedUiArgsSchema,
+        handler: async () => "UI generated",
+        followUp: true,
+        render: OpenGenerativeUIToolRenderer,
+      },
+    ];
+  }, [openGenUIActive]);
   // Combine all tools for CopilotKitCore
   const allTools = useMemo(() => {
     const tools: FrontendTool[] = [];
-    // Add frontend tools
+    // Add frontend tools (user-provided + built-in)
     tools.push(...frontendToolsList);
+    tools.push(...builtInFrontendTools);
     // Add processed human-in-the-loop tools
     tools.push(...processedHumanInTheLoopTools.tools);
     return tools;
-  }, [frontendToolsList, processedHumanInTheLoopTools]);
+  }, [frontendToolsList, builtInFrontendTools, processedHumanInTheLoopTools]);
   // Combine all render tool calls
   const allRenderToolCalls = useMemo(() => {
     const combined: ReactToolCallRenderer<unknown>[] = [...renderToolCallsList];
-    // Add render components from frontend tools
-    frontendToolsList.forEach((tool) => {
+    // Add render components from frontend tools (user-provided + built-in)
+    [...frontendToolsList, ...builtInFrontendTools].forEach((tool) => {
       if (tool.render) {
         // For wildcard tools without parameters, default to z.any()
         const args =
@@ -381,7 +523,12 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
     combined.push(...processedHumanInTheLoopTools.renderToolCalls);
     return combined;
-  }, [renderToolCallsList, frontendToolsList, processedHumanInTheLoopTools]);
+  }, [
+    renderToolCallsList,
+    frontendToolsList,
+    builtInFrontendTools,
+    processedHumanInTheLoopTools,
+  ]);
   // Stable instance: created once for the provider lifetime.
   // Updates are applied via setter effects below rather than recreating the instance.
@@ -389,7 +536,12 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
   if (copilotkitRef.current === null) {
     copilotkitRef.current = new CopilotKitCoreReact({
       runtimeUrl: chatApiEndpoint,
-      runtimeTransport: useSingleEndpoint ? "single" : "rest",
+      runtimeTransport:
+        useSingleEndpoint === true
+          ? "single"
+          : useSingleEndpoint === false
+            ? "rest"
+            : "auto",
       headers: mergedHeaders,
       credentials,
       properties,
@@ -399,14 +551,22 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
       renderActivityMessages: allActivityRenderers,
       renderCustomMessages: renderCustomMessagesList,
     });
+    // Set initial defaultThrottleMs synchronously so child hooks see the
+    // correct value on their first render (before useEffect fires).
+    if (defaultThrottleMs !== undefined) {
+      copilotkitRef.current.setDefaultThrottleMs(defaultThrottleMs);
+    }
   }
   const copilotkit = copilotkitRef.current;
-  // Sync runtime-reported state once runtime info is fetched
+  // Sync runtime feature flags from the core once runtime info is fetched
   useEffect(() => {
+    // Check current value immediately (may already be set before subscription)
+    setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
     const subscription = copilotkit.subscribe({
       onRuntimeConnectionStatusChanged: () => {
         setRuntimeA2UIEnabled(copilotkit.a2uiEnabled);
+        setRuntimeOpenGenUIEnabled(copilotkit.openGenerativeUIEnabled);
         setRuntimeLicenseStatus(copilotkit.licenseStatus);
       },
     });
@@ -490,7 +650,13 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
   useEffect(() => {
     copilotkit.setRuntimeUrl(chatApiEndpoint);
-    copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
+    copilotkit.setRuntimeTransport(
+      useSingleEndpoint === true
+        ? "single"
+        : useSingleEndpoint === false
+          ? "rest"
+          : "auto",
+    );
     copilotkit.setHeaders(mergedHeaders);
     copilotkit.setCredentials(credentials);
     copilotkit.setProperties(properties);
@@ -540,6 +706,64 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
     didMountRef.current = true;
   }, []);
+  // Sync defaultThrottleMs to the core instance on prop changes.
+  // Initial value is set synchronously during instance creation (below the
+  // ref init) so child hooks see the correct value on their first render.
+  // This effect handles subsequent updates when the prop changes.
+  useEffect(() => {
+    if (
+      defaultThrottleMs !== undefined &&
+      (!Number.isFinite(defaultThrottleMs) || defaultThrottleMs < 0)
+    ) {
+      console.error(
+        `CopilotKitProvider: defaultThrottleMs must be a non-negative finite number, got ${defaultThrottleMs}. ` +
+          `useAgent hooks without an explicit throttleMs will fall back to unthrottled.`,
+      );
+    }
+    copilotkit.setDefaultThrottleMs(defaultThrottleMs);
+  }, [copilotkit, defaultThrottleMs]);
+  // Register design skill as agent context for the generateSandboxedUi tool
+  const designSkill = openGenerativeUI?.designSkill ?? DEFAULT_DESIGN_SKILL;
+  useLayoutEffect(() => {
+    if (!copilotkit || !openGenUIActive) return;
+    const id = copilotkit.addContext({
+      description:
+        "Design guidelines for the generateSandboxedUi tool. Follow these when building UI.",
+      value: designSkill,
+    });
+    return () => {
+      copilotkit.removeContext(id);
+    };
+  }, [copilotkit, designSkill, openGenUIActive]);
+  // Register sandbox functions as agent context so the LLM knows how to call them
+  const sandboxFunctionsDescriptors = useMemo(() => {
+    if (sandboxFunctionsList.length === 0) return null;
+    return JSON.stringify(
+      sandboxFunctionsList.map((fn) => ({
+        name: fn.name,
+        description: fn.description,
+        parameters: schemaToJsonSchema(fn.parameters, { zodToJsonSchema }),
+      })),
+    );
+  }, [sandboxFunctionsList]);
+  useLayoutEffect(() => {
+    if (!copilotkit || !sandboxFunctionsDescriptors || !openGenUIActive) return;
+    const id = copilotkit.addContext({
+      description:
+        "Sandbox functions available in generated sandboxed UI code. Call via: await Websandbox.connection.remote.<functionName>(args)",
+      value: sandboxFunctionsDescriptors,
+    });
+    return () => {
+      copilotkit.removeContext(id);
+    };
+  }, [copilotkit, sandboxFunctionsDescriptors, openGenUIActive]);
   const contextValue = useMemo<CopilotKitContextValue>(
     () => ({ copilotkit, executingToolCallIds }),
     [copilotkit, executingToolCallIds],
@@ -552,27 +776,39 @@ export const CopilotKitProvider: React.FC<CopilotKitProviderProps> = ({
   );
   return (
-    <CopilotKitContext.Provider value={contextValue}>
-      <LicenseContext.Provider value={licenseContextValue}>
-        {children}
-        {shouldRenderInspector ? (
-          <CopilotKitInspector core={copilotkit} />
-        ) : null}
-        {/* License warnings — driven by server-reported status */}
-        {runtimeLicenseStatus === "none" && !resolvedPublicKey && (
-          <LicenseWarningBanner type="no_license" />
-        )}
-        {runtimeLicenseStatus === "expired" && (
-          <LicenseWarningBanner type="expired" />
-        )}
-        {runtimeLicenseStatus === "invalid" && (
-          <LicenseWarningBanner type="invalid" />
-        )}
-        {runtimeLicenseStatus === "expiring" && (
-          <LicenseWarningBanner type="expiring" />
-        )}
-      </LicenseContext.Provider>
-    </CopilotKitContext.Provider>
+    <SandboxFunctionsContext.Provider value={sandboxFunctionsList}>
+      <CopilotKitContext.Provider value={contextValue}>
+        <LicenseContext.Provider value={licenseContextValue}>
+          {runtimeA2UIEnabled && <A2UIBuiltInToolCallRenderer />}
+          {runtimeA2UIEnabled && (
+            <A2UICatalogContext
+              catalog={a2ui?.catalog}
+              includeSchema={a2ui?.includeSchema}
+            />
+          )}
+          {children}
+          {shouldRenderInspector ? (
+            <CopilotKitInspector
+              core={copilotkit}
+              defaultAnchor={inspectorDefaultAnchor}
+            />
+          ) : null}
+          {/* License warnings — driven by server-reported status */}
+          {runtimeLicenseStatus === "none" && !resolvedPublicKey && (
+            <LicenseWarningBanner type="no_license" />
+          )}
+          {runtimeLicenseStatus === "expired" && (
+            <LicenseWarningBanner type="expired" />
+          )}
+          {runtimeLicenseStatus === "invalid" && (
+            <LicenseWarningBanner type="invalid" />
+          )}
+          {runtimeLicenseStatus === "expiring" && (
+            <LicenseWarningBanner type="expiring" />
+          )}
+        </LicenseContext.Provider>
+      </CopilotKitContext.Provider>
+    </SandboxFunctionsContext.Provider>
   );
 };

package/src/v2/providers/SandboxFunctionsContext.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+import type { SandboxFunction } from "../types/sandbox-function";
+export const SandboxFunctionsContext = createContext<
+  readonly SandboxFunction[]
+>([]);
+export function useSandboxFunctions(): readonly SandboxFunction[] {
+  return useContext(SandboxFunctionsContext);
+}

package/src/v2/providers/__tests__/CopilotKitProvider.sandboxFunctions.test.tsx ADDED Viewed

@@ -0,0 +1,198 @@
+import { renderHook } from "@testing-library/react";
+import React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { z } from "zod";
+import { CopilotKitProvider, useCopilotKit } from "../CopilotKitProvider";
+import { useSandboxFunctions } from "../SandboxFunctionsContext";
+import type { SandboxFunction } from "../../types/sandbox-function";
+describe("CopilotKitProvider — openGenerativeUI.sandboxFunctions", () => {
+  beforeEach(() => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+  });
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+  const makeSandboxFunction = (
+    name: string,
+    overrides?: Partial<SandboxFunction>,
+  ): SandboxFunction => ({
+    name,
+    description: `${name} description`,
+    parameters: z.object({ value: z.string() }),
+    handler: vi.fn().mockResolvedValue(undefined),
+    ...overrides,
+  });
+  /** Helper: find the sandbox-functions context entry from the context record */
+  function findSandboxContext(
+    ctx: Record<string, { description: string; value: string }>,
+  ) {
+    return Object.values(ctx).find((c) =>
+      c.description.includes("Sandbox functions"),
+    );
+  }
+  describe("SandboxFunctionsContext", () => {
+    it("provides sandbox functions to children via context", () => {
+      const fns = [makeSandboxFunction("myFn")];
+      const { result } = renderHook(() => useSandboxFunctions(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{ sandboxFunctions: fns }}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      expect(result.current).toHaveLength(1);
+      expect(result.current[0].name).toBe("myFn");
+    });
+    it("provides empty array when openGenerativeUI is not set", () => {
+      const { result } = renderHook(() => useSandboxFunctions(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider>{children}</CopilotKitProvider>
+        ),
+      });
+      expect(result.current).toHaveLength(0);
+    });
+    it("provides empty array when sandboxFunctions is not set", () => {
+      const { result } = renderHook(() => useSandboxFunctions(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{}}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      expect(result.current).toHaveLength(0);
+    });
+  });
+  describe("agent context registration", () => {
+    it("registers agent context when sandbox functions are provided", () => {
+      const fns = [makeSandboxFunction("addToCart")];
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{ sandboxFunctions: fns }}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      const sandboxContext = findSandboxContext(
+        result.current.copilotkit.context,
+      );
+      expect(sandboxContext).toBeDefined();
+      const parsed = JSON.parse(sandboxContext!.value);
+      expect(parsed).toHaveLength(1);
+      expect(parsed[0].name).toBe("addToCart");
+      expect(parsed[0].description).toBe("addToCart description");
+      expect(parsed[0].parameters).toBeDefined();
+      expect(parsed[0].parameters.type).toBe("object");
+    });
+    it("does not register agent context when sandbox functions are empty", () => {
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{ sandboxFunctions: [] }}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      const sandboxContext = findSandboxContext(
+        result.current.copilotkit.context,
+      );
+      expect(sandboxContext).toBeUndefined();
+    });
+    it("does not register agent context when openGenerativeUI is omitted", () => {
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider>{children}</CopilotKitProvider>
+        ),
+      });
+      const sandboxContext = findSandboxContext(
+        result.current.copilotkit.context,
+      );
+      expect(sandboxContext).toBeUndefined();
+    });
+    it("includes multiple functions in agent context", () => {
+      const fns = [makeSandboxFunction("fnA"), makeSandboxFunction("fnB")];
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{ sandboxFunctions: fns }}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      const sandboxContext = findSandboxContext(
+        result.current.copilotkit.context,
+      );
+      const parsed = JSON.parse(sandboxContext!.value);
+      expect(parsed).toHaveLength(2);
+      expect(parsed.map((f: any) => f.name)).toEqual(["fnA", "fnB"]);
+    });
+    it("converts parameters to JSON Schema in agent context", () => {
+      const fns = [
+        makeSandboxFunction("myFn", {
+          parameters: z.object({
+            itemId: z.string(),
+            quantity: z.number(),
+          }),
+        }),
+      ];
+      const { result } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{ sandboxFunctions: fns }}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      const sandboxContext = findSandboxContext(
+        result.current.copilotkit.context,
+      );
+      const parsed = JSON.parse(sandboxContext!.value);
+      const params = parsed[0].parameters;
+      expect(params.type).toBe("object");
+      expect(params.properties.itemId).toEqual({ type: "string" });
+      expect(params.properties.quantity).toEqual({ type: "number" });
+    });
+    it("removes agent context on unmount", () => {
+      const fns = [makeSandboxFunction("myFn")];
+      const { result, unmount } = renderHook(() => useCopilotKit(), {
+        wrapper: ({ children }) => (
+          <CopilotKitProvider openGenerativeUI={{ sandboxFunctions: fns }}>
+            {children}
+          </CopilotKitProvider>
+        ),
+      });
+      const copilotkit = result.current.copilotkit;
+      expect(findSandboxContext(copilotkit.context)).toBeDefined();
+      unmount();
+      expect(findSandboxContext(copilotkit.context)).toBeUndefined();
+    });
+  });
+});