chore: Update Mastra integration in the Dojo

MikeRyanDev · MikeRyanDev · commit 4795943ce333 · 2025-11-04T15:29:29.000-08:00
diff --git a/apps/dojo/package.json b/apps/dojo/package.json
@@ -33,10 +33,10 @@
     "@copilotkit/shared": "0.0.0-feat-cpk-1-5-20251104211725",
     "@copilotkitnext/runtime": "0.0.20",
     "@copilotkitnext/react": "0.0.20",
-    "@mastra/client-js": "^0.15.2",
-    "@mastra/core": "^0.20.2",
+    "@mastra/client-js": "^0.16.8",
+    "@mastra/core": "^0.23.3",
     "@mastra/dynamodb": "^0.15.9",
-    "@mastra/libsql": "^0.15.2",
+    "@mastra/libsql": "^0.16.1 ",
     "@mastra/loggers": "^0.10.18",
     "@mastra/memory": "^0.15.10",
     "@mdx-js/loader": "^3.1.1",
diff --git a/apps/dojo/src/agents.ts b/apps/dojo/src/agents.ts
@@ -4,16 +4,16 @@ import { AgentIntegrationConfig } from "./types/integration";
 import { MiddlewareStarterAgent } from "@ag-ui/middleware-starter";
 import { ServerStarterAgent } from "@ag-ui/server-starter";
 import { ServerStarterAllFeaturesAgent } from "@ag-ui/server-starter-all-features";
-// import { MastraClient } from "@mastra/client-js";
-// import { MastraAgent } from "@ag-ui/mastra";
-// import { VercelAISDKAgent } from "@ag-ui/vercel-ai-sdk";
-// import { openai } from "@ai-sdk/openai";
+import { MastraClient } from "@mastra/client-js";
+import { MastraAgent } from "@ag-ui/mastra";
+import { VercelAISDKAgent } from "@ag-ui/vercel-ai-sdk";
+import { openai } from "@ai-sdk/openai";
 import { LangGraphAgent, LangGraphHttpAgent } from "@ag-ui/langgraph";
 import { AgnoAgent } from "@ag-ui/agno";
 import { LlamaIndexAgent } from "@ag-ui/llamaindex";
 import { CrewAIAgent } from "@ag-ui/crewai";
 import getEnvVars from "./env";
-// import { mastra } from "./mastra";
+import { mastra } from "./mastra";
 import { PydanticAIAgent } from "@ag-ui/pydantic-ai";
 import { ADKAgent } from "@ag-ui/adk";
 import { SpringAiAgent } from "@ag-ui/spring-ai";
@@ -116,34 +116,32 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
       };
     },
   },
-  // Disable until we can support Vercel AI SDK v5
-  // {
-  //   id: "mastra",
-  //   agents: async () => {
-  //     const mastraClient = new MastraClient({
-  //       baseUrl: envVars.mastraUrl,
-  //     });
+  {
+    id: "mastra",
+    agents: async () => {
+      const mastraClient = new MastraClient({
+        baseUrl: envVars.mastraUrl,
+      });
 
-  //     return MastraAgent.getRemoteAgents({
-  //       mastraClient,
-  //     });
-  //   },
-  // },
-  // {
-  //   id: "mastra-agent-local",
-  //   agents: async () => {
-  //     return MastraAgent.getLocalAgents({ mastra });
-  //   },
-  // },
-  // Disabled until we can support Vercel AI SDK v5
-  // {
-  //   id: "vercel-ai-sdk",
-  //   agents: async () => {
-  //     return {
-  //       agentic_chat: new VercelAISDKAgent({ model: openai("gpt-4o") }),
-  //     };
-  //   },
-  // },
+      return MastraAgent.getRemoteAgents({
+        mastraClient,
+      });
+    },
+  },
+  {
+    id: "mastra-agent-local",
+    agents: async () => {
+      return MastraAgent.getLocalAgents({ mastra });
+    },
+  },
+  {
+    id: "vercel-ai-sdk",
+    agents: async () => {
+      return {
+        agentic_chat: new VercelAISDKAgent({ model: openai("gpt-4o") }),
+      };
+    },
+  },
   {
     id: "langgraph",
     agents: async () => {
diff --git a/apps/dojo/src/files.json b/apps/dojo/src/files.json
@@ -519,6 +519,27 @@
       "type": "file"
     }
   ],
+  "vercel-ai-sdk::agentic_chat": [
+    {
+      "name": "page.tsx",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport {\n  CopilotKit,\n  useFrontendTool,\n} from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useFrontendTool({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients. Only use when asked.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div\n      className=\"flex justify-center items-center h-full w-full\"\n      data-testid=\"background-container\"\n      style={{ background }}\n    >\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl max-w-6xl mx-auto\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n          suggestions={[\n            {\n              title: \"Change background\",\n              message: \"Change the background to something new.\",\n            },\n            {\n              title: \"Generate sonnet\",\n              message: \"Write a short sonnet about AI.\",\n            },\n          ]}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "language": "typescript",
+      "type": "file"
+    },
+    {
+      "name": "style.css",
+      "content": ".copilotKitInput {\n  border-bottom-left-radius: 0.75rem;\n  border-bottom-right-radius: 0.75rem;\n  border-top-left-radius: 0.75rem;\n  border-top-right-radius: 0.75rem;\n  border: 1px solid var(--copilot-kit-separator-color) !important;\n}\n  \n.copilotKitChat {\n  background-color: #fff !important;\n}\n  ",
+      "language": "css",
+      "type": "file"
+    },
+    {
+      "name": "README.mdx",
+      "content": "# 🤖 Agentic Chat with Frontend Tools\n\n## What This Demo Shows\n\nThis demo showcases CopilotKit's **agentic chat** capabilities with **frontend\ntool integration**:\n\n1. **Natural Conversation**: Chat with your Copilot in a familiar chat interface\n2. **Frontend Tool Execution**: The Copilot can directly interacts with your UI\n   by calling frontend functions\n3. **Seamless Integration**: Tools defined in the frontend and automatically\n   discovered and made available to the agent\n\n## How to Interact\n\nTry asking your Copilot to:\n\n- \"Can you change the background color to something more vibrant?\"\n- \"Make the background a blue to purple gradient\"\n- \"Set the background to a sunset-themed gradient\"\n- \"Change it back to a simple light color\"\n\nYou can also chat about other topics - the agent will respond conversationally\nwhile having the ability to use your UI tools when appropriate.\n\n## ✨ Frontend Tool Integration in Action\n\n**What's happening technically:**\n\n- The React component defines a frontend function using `useCopilotAction`\n- CopilotKit automatically exposes this function to the agent\n- When you make a request, the agent determines whether to use the tool\n- The agent calls the function with the appropriate parameters\n- The UI immediately updates in response\n\n**What you'll see in this demo:**\n\n- The Copilot understands requests to change the background\n- It generates CSS values for colors and gradients\n- When it calls the tool, the background changes instantly\n- The agent provides a conversational response about the changes it made\n\nThis technique of exposing frontend functions to your Copilot can be extended to\nany UI manipulation you want to enable, from theme changes to data filtering,\nnavigation, or complex UI state management!\n",
+      "language": "markdown",
+      "type": "file"
+    },
+    {}
+  ],
   "langgraph::agentic_chat": [
     {
       "name": "page.tsx",
diff --git a/apps/dojo/src/mastra/index.ts b/apps/dojo/src/mastra/index.ts
@@ -57,7 +57,7 @@ export const mastra = new Mastra({
 
           Your primary function is to help users get weather details for specific locations. When responding:
           - Always ask for a location if none is provided
-          - If the location name isn’t in English, please translate it
+          - If the location name isn't in English, please translate it
           - If giving a location with multiple parts (e.g. "New York, NY"), use the most relevant part (e.g. "New York")
           - Include relevant details like humidity, wind conditions, and precipitation
           - Keep responses concise but informative
@@ -105,7 +105,7 @@ export const mastra = new Mastra({
                       "One-Pot Meal",
                       "Vegetarian",
                       "Vegan",
-                    ]),
+                    ])
                   )
                   .describe("A list of special preferences for the recipe"),
                 cooking_time: z
@@ -117,21 +117,25 @@ export const mastra = new Mastra({
                       icon: z
                         .string()
                         .describe(
-                          "The icon emoji (not emoji code like '\x1f35e', but the actual emoji like 🥕) of the ingredient",
+                          "The icon emoji (not emoji code like '\x1f35e', but the actual emoji like 🥕) of the ingredient"
                         ),
                       name: z.string().describe("The name of the ingredient"),
-                      amount: z.string().describe("The amount of the ingredient"),
-                    }),
+                      amount: z
+                        .string()
+                        .describe("The amount of the ingredient"),
+                    })
                   )
                   .describe(
-                    "Entire list of ingredients for the recipe, including the new ingredients and the ones that are already in the recipe",
+                    "Entire list of ingredients for the recipe, including the new ingredients and the ones that are already in the recipe"
                   ),
                 instructions: z
                   .array(z.string())
                   .describe(
-                    "Entire list of instructions for the recipe, including the new instructions and the ones that are already there",
+                    "Entire list of instructions for the recipe, including the new instructions and the ones that are already there"
                   ),
-                changes: z.string().describe("A description of the changes made to the recipe"),
+                changes: z
+                  .string()
+                  .describe("A description of the changes made to the recipe"),
               }),
             }),
           },
diff --git a/integrations/mastra/typescript/package.json b/integrations/mastra/typescript/package.json
@@ -58,7 +58,7 @@
   },
   "dependencies": {
     "@ai-sdk/ui-utils": "^1.2.11",
-    "@mastra/client-js": "^0.15.2",
+    "@mastra/client-js": "^0.16.8",
     "rxjs": "7.8.1"
   },
   "peerDependencies": {
@@ -71,7 +71,7 @@
   "devDependencies": {
     "@ag-ui/client": "workspace:*",
     "@ag-ui/core": "workspace:*",
-    "@mastra/core": "^0.23.2",
+    "@mastra/core": "^0.23.3",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.19.24",
     "jest": "^29.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
