Improve Dojo examples

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": "1.8.14-next.4",
-    "@copilotkit/react-ui": "1.8.14-next.4",
-    "@copilotkit/runtime": "1.8.14-next.4",
-    "@copilotkit/runtime-client-gql": "1.8.14-next.4",
-    "@copilotkit/shared": "1.8.14-next.4",
+    "@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/agents.ts

@@ -135,6 +135,9 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         tool_based_generative_ui: new LangGraphHttpAgent({
           url: "http://localhost:8000/agent/tool_based_generative_ui",
         }),
+        agentic_chat_reasoning: new LangGraphHttpAgent({
+          url: "http://localhost:8000/agent/agentic_chat_reasoning",
+        }),
       };
     },
   },
@@ -145,6 +148,9 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         agentic_chat: new AgnoAgent({
           url: "http://localhost:8000/agui",
         }),
+        tool_based_generative_ui: new AgnoAgent({
+          url: "http://localhost:8000/agui",
+        }),
       };
     },
   },

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat_reasoning/README.mdx

@@ -0,0 +1,45 @@
+# 🤖 Agentic Chat with Reasoning
+
+## What This Demo Shows
+
+This demo showcases CopilotKit's **agentic chat** capabilities with **frontend
+tool integration**:
+
+1. **Natural Conversation**: Chat with your Copilot in a familiar chat interface
+2. **Frontend Tool Execution**: The Copilot can directly interacts with your UI
+   by calling frontend functions
+3. **Seamless Integration**: Tools defined in the frontend and automatically
+   discovered and made available to the agent
+
+## How to Interact
+
+Try asking your Copilot to:
+
+- "Can you change the background color to something more vibrant?"
+- "Make the background a blue to purple gradient"
+- "Set the background to a sunset-themed gradient"
+- "Change it back to a simple light color"
+
+You can also chat about other topics - the agent will respond conversationally
+while having the ability to use your UI tools when appropriate.
+
+## ✨ Frontend Tool Integration in Action
+
+**What's happening technically:**
+
+- The React component defines a frontend function using `useCopilotAction`
+- CopilotKit automatically exposes this function to the agent
+- When you make a request, the agent determines whether to use the tool
+- The agent calls the function with the appropriate parameters
+- The UI immediately updates in response
+
+**What you'll see in this demo:**
+
+- The Copilot understands requests to change the background
+- It generates CSS values for colors and gradients
+- When it calls the tool, the background changes instantly
+- The agent provides a conversational response about the changes it made
+
+This technique of exposing frontend functions to your Copilot can be extended to
+any UI manipulation you want to enable, from theme changes to data filtering,
+navigation, or complex UI state management!

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

@@ -0,0 +1,122 @@
+"use client";
+import React, { useState } from "react";
+import "@copilotkit/react-ui/styles.css";
+import "./style.css";
+import { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from "@copilotkit/react-core";
+import { CopilotChat } from "@copilotkit/react-ui";
+import { ChevronDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+interface AgenticChatProps {
+  params: Promise<{
+    integrationId: string;
+  }>;
+}
+
+const AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {
+  const { integrationId } = React.use(params);
+
+  return (
+    <CopilotKit
+      runtimeUrl={`/api/copilotkit/${integrationId}`}
+      showDevConsole={false}
+      // agent lock to the relevant agent
+      agent="agentic_chat_reasoning"
+    >
+      <Chat />
+    </CopilotKit>
+  );
+};
+
+interface AgentState {
+  model: string;
+}
+
+const Chat = () => {
+  const [background, setBackground] = useState<string>("--copilot-kit-background-color");
+  const { state: agentState, setState: setAgentState } = useCoAgent<AgentState>({
+    name: "agentic_chat_reasoning",
+    initialState: {
+      model: "OpenAI",
+    },
+  });
+
+  // Initialize model if not set
+  const selectedModel = agentState?.model || "OpenAI";
+
+  const handleModelChange = (model: string) => {
+    setAgentState({ model });
+  };
+
+  useCopilotAction({
+    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.",
+    parameters: [
+      {
+        name: "background",
+        type: "string",
+        description: "The background. Prefer gradients.",
+      },
+    ],
+    handler: ({ background }) => {
+      setBackground(background);
+    },
+  });
+
+  return (
+    <div className="flex flex-col h-full w-full" style={{ background }}>
+      {/* Reasoning Model Dropdown */}
+      <div className="h-[65px] border-b border-gray-200 dark:border-gray-700">
+        <div className="h-full flex items-center justify-center">
+          <div className="flex items-center gap-2">
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              Reasoning Model:
+            </span>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="w-[140px] justify-between">
+                  {selectedModel}
+                  <ChevronDown className="h-4 w-4 opacity-50" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-[140px]">
+                <DropdownMenuLabel>Select Model</DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onClick={() => handleModelChange("OpenAI")}>
+                  OpenAI
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleModelChange("Anthropic")}>
+                  Anthropic
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={() => handleModelChange("Gemini")}>
+                  Gemini
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+      </div>
+
+      {/* Chat Container */}
+      <div className="flex-1 flex justify-center items-center p-4">
+        <div className="w-8/10 h-full rounded-lg">
+          <CopilotChat
+            className="h-full rounded-2xl"
+            labels={{ initial: "Hi, I'm an agent. Want to chat?" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AgenticChat;

typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat_reasoning/style.css

@@ -0,0 +1,12 @@
+.copilotKitInput {
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+  border: 1px solid var(--copilot-kit-separator-color) !important;
+}
+
+.copilotKitChat {
+  background-color: #fff !important;
+}
+

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

@@ -1,5 +1,5 @@
 "use client";
-import { CopilotKit, useCopilotAction } from "@copilotkit/react-core";
+import { CopilotKit, useCopilotAction, useCopilotChat } from "@copilotkit/react-core";
 import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
 import { useState } from "react";
 import "@copilotkit/react-ui/styles.css";
@@ -22,15 +22,7 @@ export default function ToolBasedGenerativeUI({ params }: ToolBasedGenerativeUIP
       // agent lock to the relevant agent
       agent="tool_based_generative_ui"
     >
-      <div
-        className="min-h-full w-full flex items-center justify-center"
-        style={
-          {
-            // "--copilot-kit-primary-color": "#222",
-            // "--copilot-kit-separator-color": "#CCC",
-          } as CopilotKitCSSProperties
-        }
-      >
+      <div className="min-h-full w-full flex items-center justify-center">
         <Haiku />
         <CopilotSidebar
           defaultOpen={true}
@@ -56,6 +48,7 @@ function Haiku() {
 
   useCopilotAction({
     name: "generate_haiku",
+    available: "frontend",
     parameters: [
       {
         name: "japanese",
@@ -67,9 +60,6 @@ function Haiku() {
       },
     ],
     followUp: false,
-    handler: async () => {
-      return "Haiku generated.";
-    },
     render: ({ args: generatedHaiku, result, status }) => {
       return <HaikuApproval setHaiku={setHaiku} generatedHaiku={generatedHaiku} status={status} />;
     },

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

@@ -53,6 +53,12 @@ export const featureConfig: FeatureConfig[] = [
     description: "Use collaboration to edit a document in real time with your Copilot",
     tags: ["State", "Streaming", "Tools"],
   }),
+  createFeatureConfig({
+    id: "agentic_chat_reasoning",
+    name: "Agentic Chat Reasoning",
+    description: "Chat with a reasoning Copilot and call frontend tools",
+    tags: ["Chat", "Tools", "Streaming", "Reasoning"],
+  }),
 ];
 
 export default featureConfig;

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";
@@ -105,5 +106,31 @@ export const mastra = new Mastra({
         },
       }),
     }),
+    tool_based_generative_ui: new Agent({
+      name: "tool_based_generative_ui",
+      instructions: `
+        You are a helpful assistant for creating haikus.
+      `,
+      model: openai("gpt-4o"),
+      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.";
+          },
+        }),
+      },
+    }),
   },
 });

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

@@ -26,12 +26,12 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   {
     id: "mastra",
     name: "Mastra",
-    features: ["agentic_chat"],
+    features: ["agentic_chat", "tool_based_generative_ui"],
   },
   {
     id: "mastra-agent-local",
     name: "Mastra Agent (Local)",
-    features: ["agentic_chat", "shared_state"],
+    features: ["agentic_chat", "shared_state", "tool_based_generative_ui"],
   },
   {
     id: "vercel-ai-sdk",
@@ -60,12 +60,13 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
       "tool_based_generative_ui",
       "predictive_state_updates",
       "shared_state",
+      "agentic_chat_reasoning",
     ],
   },
   {
     id: "agno",
     name: "Agno",
-    features: ["agentic_chat"],
+    features: ["agentic_chat", "tool_based_generative_ui"],
   },
   {
     id: "llama-index",