chore: use latest copilot action wrapper methods in dojo (#503)

* chore: use latest copilot action wrapper methods in dojo

Author: ranst91

typescript-sdk/apps/dojo/package.json

@@ -24,11 +24,11 @@
     "@ag-ui/server-starter-all-features": "workspace:*",
     "@ag-ui/vercel-ai-sdk": "workspace:*",
     "@ai-sdk/openai": "^2.0.42",
-    "@copilotkit/react-core": "1.10.5",
-    "@copilotkit/react-ui": "1.10.5",
-    "@copilotkit/runtime": "1.10.5",
-    "@copilotkit/runtime-client-gql": "1.10.5",
-    "@copilotkit/shared": "1.10.5",
+    "@copilotkit/react-core": "1.10.6-next.2",
+    "@copilotkit/react-ui": "1.10.6-next.2",
+    "@copilotkit/runtime": "1.10.6-next.2",
+    "@copilotkit/runtime-client-gql": "1.10.6-next.2",
+    "@copilotkit/shared": "1.10.6-next.2",
     "@mastra/client-js": "^0.14.0",
     "@mastra/core": "^0.19.0",
     "@mastra/dynamodb": "^0.15.4",

typescript-sdk/apps/dojo/scripts/prep-dojo-everything.js

@@ -89,7 +89,7 @@ const ALL_TARGETS = {
     cwd: path.join(integrationsRoot, 'llamaindex/server-py'),
   },
   'mastra': {
-    command: 'npm install',
+    command: 'pnpm install',
     name: 'Mastra',
     cwd: path.join(integrationsRoot, 'mastra/example'),
   },

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/a2a_chat/a2a_chat.tsx

@@ -5,8 +5,7 @@ import "./style.css";
 import {
   ActionRenderProps,
   CopilotKit,
-  useCoAgent,
-  useCoAgentStateRender,
+  useRenderToolCall,
   useCopilotAction,
   useCopilotChat,
 } from "@copilotkit/react-core";
@@ -127,10 +126,9 @@ const Chat = ({ onNotification }: { onNotification?: () => void }) => {
     }
   }, [isLoading, JSON.stringify(visibleMessages)]);
 
-  useCopilotAction({
+  useRenderToolCall({
     name: "send_message_to_a2a_agent",
     description: "Sends a message to an A2A agent",
-    available: "frontend",
     parameters: [
       {
         name: "agentName",

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx

@@ -2,7 +2,10 @@
 import React, { useState } from "react";
 import "@copilotkit/react-ui/styles.css";
 import "./style.css";
-import { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from "@copilotkit/react-core";
+import {
+  CopilotKit,
+  useFrontendTool,
+} from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-ui";
 
 interface AgenticChatProps {
@@ -29,7 +32,7 @@ const AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {
 const Chat = () => {
   const [background, setBackground] = useState<string>("--copilot-kit-background-color");
 
-  useCopilotAction({
+  useFrontendTool({
     name: "change_background",
     description:
       "Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.",

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat_reasoning/page.tsx

@@ -2,7 +2,13 @@
 import React, { useState } from "react";
 import "@copilotkit/react-ui/styles.css";
 import "./style.css";
-import { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from "@copilotkit/react-core";
+import {
+  CopilotKit,
+  useCoAgent,
+  useCopilotAction,
+  useCopilotChat,
+  useFrontendTool,
+} from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-ui";
 import { ChevronDown } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -56,7 +62,7 @@ const Chat = () => {
     setAgentState({ model });
   };
 
-  useCopilotAction({
+  useFrontendTool({
     name: "change_background",
     description:
       "Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.",

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/human_in_the_loop/page.tsx

@@ -2,7 +2,11 @@
 import React, { useState, useEffect } from "react";
 import "@copilotkit/react-ui/styles.css";
 import "./style.css";
-import { CopilotKit, useCopilotAction, useLangGraphInterrupt } from "@copilotkit/react-core";
+import {
+  CopilotKit,
+  useHumanInTheLoop,
+  useLangGraphInterrupt,
+} from "@copilotkit/react-core";
 import { CopilotChat } from "@copilotkit/react-ui";
 import { useTheme } from "next-themes";
 
@@ -329,7 +333,7 @@ const Chat = ({ integrationId }: { integrationId: string }) => {
   useLangGraphInterrupt({
     render: ({ event, resolve }) => <InterruptHumanInTheLoop event={event} resolve={resolve} />,
   });
-  useCopilotAction({
+  useHumanInTheLoop({
     name: "generate_task_steps",
     description: "Generates a list of steps for the user to perform",
     parameters: [
@@ -354,7 +358,7 @@ const Chat = ({ integrationId }: { integrationId: string }) => {
     available: ["langgraph", "langgraph-fastapi", "langgraph-typescript"].includes(integrationId)
       ? "disabled"
       : "enabled",
-    renderAndWaitForResponse: ({ args, respond, status }) => {
+    render: ({ args, respond, status }) => {
       return <StepsFeedback args={args} respond={respond} status={status} />;
     },
   });