Add @ag-ui/mastra to /integrations (#46)

* copy existing mastra code

* add example

* make mastra work in the monorepo

* Refactor MastraAgent to use provided resourceId instead of generating a random UUID

* Add Vercel AI SDK integration to agents and menu configurations

Author: mme

docs/quickstart/connect.mdx

@@ -82,25 +82,38 @@ export class OpenAIAgent extends AbstractAgent {}
 ```
 
 Finally, introduce your integration to the dojo by adding it to
-`apps/dojo/src/integrations.ts`:
+`apps/dojo/src/menu.ts`:
 
 ```ts
 // ...
-import { OpenAIAgent } from "@ag-ui/openai"
-
-export const integrations = [
+export const menuIntegrations: MenuIntegrationConfig[] = [
   // ...
 
   configureIntegration({
     id: "openai",
     name: "OpenAI",
     features: ["agentic_chat"],
+  }),
+]
+```
+
+And `apps/dojo/src/agents.ts`:
+
+```ts
+// ...
+import { OpenAIAgent } from "@ag-ui/openai"
+
+export const agentsIntegrations: AgentIntegrationConfig[] = [
+  // ...
+
+  {
+    id: "openai",
     agents: async () => {
       return {
         agentic_chat: new OpenAIAgent(),
       }
     },
-  }),
+  },
 ]
 ```
 

typescript-sdk/.vscode/cspell.json

@@ -1,7 +1,7 @@
 {
   "version": "0.2",
   "language": "en",
-  "words": ["ag-ui", "uuidv4", "untruncate"],
+  "words": ["ag-ui", "uuidv4", "untruncate", "mastra", "agui", "agentic"],
   "ignorePaths": ["node_modules/**", "dist/**", "build/**", ".git/**", "coverage/**"],
   "allowCompoundWords": true,
   "ignoreRegExpList": ["\\([^)]*\\)", "`[^`]*`", "'[^']*'", "\"[^\"]*\""]

typescript-sdk/apps/dojo/package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@ag-ui/mastra": "workspace:*",
     "@ag-ui/starter": "workspace:*",
     "@ag-ui/vercel-ai-sdk": "workspace:*",
     "@ai-sdk/openai": "^1.3.22",
@@ -17,6 +18,7 @@
     "@copilotkit/runtime": "1.8.12",
     "@copilotkit/runtime-client-gql": "1.8.12",
     "@copilotkit/shared": "1.8.12",
+    "@mastra/client-js": "^0.10.1",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/react": "^3.1.0",

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

@@ -0,0 +1,37 @@
+import { AgentIntegrationConfig } from "./types/integration";
+import { StarterAgent } from "@ag-ui/starter";
+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";
+
+export const agentsIntegrations: AgentIntegrationConfig[] = [
+  {
+    id: "starter",
+    agents: async () => {
+      return {
+        agentic_chat: new StarterAgent(),
+      };
+    },
+  },
+  {
+    id: "mastra",
+    agents: async () => {
+      const mastraClient = new MastraClient({
+        baseUrl: "http://localhost:4111",
+      });
+
+      return MastraAgent.getRemoteAgents({
+        mastraClient,
+      });
+    },
+  },
+  {
+    id: "vercel-ai-sdk",
+    agents: async () => {
+      return {
+        agentic_chat: new VercelAISDKAgent({ model: openai("gpt-4o") }),
+      };
+    },
+  },
+];

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

@@ -41,7 +41,6 @@ const Chat = () => {
       },
     ],
     handler: ({ background }) => {
-      console.log("Changing background to", background);
       setBackground(background);
     },
     followUp: false,

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

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { integrations } from "@/integrations";
+import { menuIntegrations } from "@/menu";
 import { notFound } from "next/navigation";
 
 interface IntegrationPageProps {
@@ -14,7 +14,7 @@ export default function IntegrationPage({ params }: IntegrationPageProps) {
   const { integrationId } = React.use(params);
 
   // Find the integration by ID
-  const integration = integrations.find((integration) => integration.id === integrationId);
+  const integration = menuIntegrations.find((integration) => integration.id === integrationId);
 
   // If integration not found, show 404
   if (!integration) {

typescript-sdk/apps/dojo/src/app/api/copilotkit/[integrationId]/route.ts

@@ -3,14 +3,14 @@ import {
   ExperimentalEmptyAdapter,
   copilotRuntimeNextJSAppRouterEndpoint,
 } from "@copilotkit/runtime";
-import { integrations } from "@/integrations";
+import { agentsIntegrations } from "@/agents";
 
 import { NextRequest } from "next/server";
 
 export async function POST(request: NextRequest) {
   const integrationId = request.url.split("/").pop();
 
-  const integration = integrations.find((i) => i.id === integrationId);
+  const integration = agentsIntegrations.find((i) => i.id === integrationId);
   if (!integration) {
     return new Response("Integration not found", { status: 404 });
   }

typescript-sdk/apps/dojo/src/components/sidebar/sidebar.tsx

@@ -16,7 +16,7 @@ import {
   DropdownMenuSeparator,
 } from "../ui/dropdown-menu";
 import { Button } from "../ui/button";
-import { integrations } from "@/integrations";
+import { menuIntegrations } from "@/menu";
 
 interface SidebarProps {
   activeTab?: string;
@@ -37,7 +37,7 @@ export function Sidebar({ activeTab = "preview", onTabChange, readmeContent }: S
   // Find the current integration (only if we have a valid integration ID)
   const currentIntegration =
     currentIntegrationId && currentIntegrationId !== ""
-      ? integrations.find((integration) => integration.id === currentIntegrationId)
+      ? menuIntegrations.find((integration) => integration.id === currentIntegrationId)
       : null;
 
   // Filter demos based on current integration's features
@@ -112,7 +112,7 @@ export function Sidebar({ activeTab = "preview", onTabChange, readmeContent }: S
               </Button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56">
-              {integrations.map((integration) => (
+              {menuIntegrations.map((integration) => (
                 <DropdownMenuItem
                   key={integration.id}
                   onClick={() => {

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

@@ -0,0 +1,19 @@
+import { MenuIntegrationConfig } from "./types/integration";
+
+export const menuIntegrations: MenuIntegrationConfig[] = [
+  {
+    id: "starter",
+    name: "Starter",
+    features: ["agentic_chat"],
+  },
+  {
+    id: "mastra",
+    name: "Mastra",
+    features: ["agentic_chat"],
+  },
+  {
+    id: "vercel-ai-sdk",
+    name: "Vercel AI SDK",
+    features: ["agentic_chat"],
+  },
+];