add mastra tool based gen ui

Author: mme

typescript-sdk/apps/dojo/package.json

@@ -20,11 +20,11 @@
     "@ag-ui/server-starter-all-features": "workspace:*",
     "@ag-ui/vercel-ai-sdk": "workspace:*",
     "@ai-sdk/openai": "^1.3.22",
-    "@copilotkit/react-core": "0.0.0-mme-fix-remote-results-20250717113906",
-    "@copilotkit/react-ui": "0.0.0-mme-fix-remote-results-20250717113906",
-    "@copilotkit/runtime": "0.0.0-mme-fix-remote-results-20250717113906",
-    "@copilotkit/runtime-client-gql": "0.0.0-mme-fix-remote-results-20250717113906",
-    "@copilotkit/shared": "0.0.0-mme-fix-remote-results-20250717113906",
+    "@copilotkit/react-core": "0.0.0-mme-fix-remote-results-20250717143107",
+    "@copilotkit/react-ui": "0.0.0-mme-fix-remote-results-20250717143107",
+    "@copilotkit/runtime": "0.0.0-mme-fix-remote-results-20250717143107",
+    "@copilotkit/runtime-client-gql": "0.0.0-mme-fix-remote-results-20250717143107",
+    "@copilotkit/shared": "0.0.0-mme-fix-remote-results-20250717143107",
     "@mastra/client-js": "^0.10.9",
     "@mastra/core": "^0.10.10",
     "@mastra/libsql": "^0.11.0",

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

@@ -48,7 +48,7 @@ function Haiku() {
 
   useCopilotAction({
     name: "generate_haiku",
-    available: "remote",
+    available: "frontend",
     parameters: [
       {
         name: "japanese",

typescript-sdk/apps/dojo/src/mastra/index.ts

@@ -3,6 +3,7 @@ import { Agent } from "@mastra/core/agent";
 import { Memory } from "@mastra/memory";
 import { LibSQLStore } from "@mastra/libsql";
 import { Mastra } from "@mastra/core";
+import { createTool } from "@mastra/core";
 import { z } from "zod";
 
 // import { weatherTool } from "../tools/weather-tool";
@@ -112,14 +113,23 @@ export const mastra = new Mastra({
       `,
       model: openai("gpt-4o"),
       tools: {
-        generate_haiku: {
-          description: "Generate a haiku",
-          parameters: z.object({
-            japanese: z.string().describe("The japanese haiku"),
-            english: z.string().describe("The english haiku"),
-            image_names: z.array(z.string()).describe("The names of the images"),
+        generate_haiku: createTool({
+          id: "generate_haiku",
+          description:
+            "Generate a haiku in Japanese and its English translation. Also select exactly 3 relevant images from the provided list based on the haiku's theme.",
+          inputSchema: z.object({
+            japanese: z
+              .array(z.string())
+              .describe("An array of three lines of the haiku in Japanese"),
+            english: z
+              .array(z.string())
+              .describe("An array of three lines of the haiku in English"),
           }),
-        },
+          outputSchema: z.string(),
+          execute: async ({ context }) => {
+            return "Haiku generated.";
+          },
+        }),
       },
     }),
   },

typescript-sdk/apps/dojo/src/menu.ts

@@ -26,7 +26,7 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   {
     id: "mastra",
     name: "Mastra",
-    features: ["agentic_chat"],
+    features: ["agentic_chat", "tool_based_generative_ui"],
   },
   {
     id: "mastra-agent-local",

typescript-sdk/integrations/mastra/example/src/mastra/agents/weather-agent.ts renamed to typescript-sdk/integrations/mastra/example/src/mastra/agents/agentic-chat.ts

@@ -0,0 +1,34 @@
+import { openai } from "@ai-sdk/openai";
+import { Agent } from "@mastra/core/agent";
+import { Memory } from "@mastra/memory";
+import { LibSQLStore } from "@mastra/libsql";
+import { createTool } from "@mastra/core";
+import z from "zod";
+
+export const toolBasedGenerativeUIAgent = new Agent({
+  name: "Haiku Agent",
+  instructions: `
+      You are a helpful haiku assistant that provides the user with a haiku.
+`,
+  model: openai("gpt-4o-mini"),
+  tools: {
+    generate_haiku: createTool({
+      id: "generate_haiku",
+      description:
+        "Generate a haiku in Japanese and its English translation. Also select exactly 3 relevant images from the provided list based on the haiku's theme.",
+      inputSchema: z.object({
+        japanese: z.array(z.string()).describe("An array of three lines of the haiku in Japanese"),
+        english: z.array(z.string()).describe("An array of three lines of the haiku in English"),
+      }),
+      outputSchema: z.string(),
+      execute: async ({ context }) => {
+        return "Haiku generated.";
+      },
+    }),
+  },
+  memory: new Memory({
+    storage: new LibSQLStore({
+      url: "file:../mastra.db", // path is relative to the .mastra/output directory
+    }),
+  }),
+});

typescript-sdk/integrations/mastra/example/src/mastra/agents/tool-based-generative-ui.ts

@@ -2,10 +2,11 @@ import { Mastra } from "@mastra/core/mastra";
 import { PinoLogger } from "@mastra/loggers";
 import { LibSQLStore } from "@mastra/libsql";
 
-import { agenticChatAgent } from "./agents/weather-agent";
+import { agenticChatAgent } from "./agents/agentic-chat";
+import { toolBasedGenerativeUIAgent } from "./agents/tool-based-generative-ui";
 
 export const mastra = new Mastra({
-  agents: { agentic_chat: agenticChatAgent },
+  agents: { agentic_chat: agenticChatAgent, tool_based_generative_ui: toolBasedGenerativeUIAgent },
   storage: new LibSQLStore({
     // stores telemetry, evals, ... into memory storage, if it needs to persist, change to file:../mastra.db
     url: ":memory:",