ag-ui-protocol · maxkorp · Aug 6, 2025 · Jul 16, 2025 · Jul 17, 2025 · Jul 17, 2025
@@ -45,7 +45,7 @@ const serverStarterAllFeatures = {
 
 // Agno
 const agno = {
-  command: 'uv venv --allow-existing && uv pip install -r requirements.txt',
+  command: 'uv sync',
   name: 'Agno',
   cwd: path.join(integrationsRoot, 'agno/examples'),
 }

@@ -45,7 +45,7 @@ const serverStarterAllFeatures = {
 
 // Agno
 const agno = {
-  command: 'uv run agent.py',
+  command: 'uv run dev',
   name: 'Agno',
   cwd: path.join(integrationsRoot, 'agno/examples'),
   env: {PORT: 8002},

@@ -163,6 +163,9 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         tool_based_generative_ui: new LangGraphHttpAgent({
           url: `${envVars.langgraphFastApiUrl}/agent/tool_based_generative_ui`,
         }),
+        agentic_chat_reasoning: new LangGraphHttpAgent({
+          url: "http://localhost:8000/agent/agentic_chat_reasoning",
+        }),
       };
     },
   },
@@ -171,7 +174,10 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
     agents: async () => {
       return {
         agentic_chat: new AgnoAgent({
-          url: `${envVars.agnoUrl}/agui`,
+          url: `${envVars.agnoUrl}/agentic_chat/agui`,
+        }),
+        tool_based_generative_ui: new AgnoAgent({
+          url: `${envVars.agnoUrl}/tool_based_generative_ui/agui`,
         }),
       };
     },

@@ -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!
@@ -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;
@@ -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;
+}
+
@@ -291,6 +291,7 @@ function Haiku() {
 
   useCopilotAction({
     name: "generate_haiku",
+    available: "frontend",
     parameters: [
       {
         name: "japanese",

@@ -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;
@@ -5,6 +5,7 @@ import { LibSQLStore } from "@mastra/libsql";
 import { DynamoDBStore } from "@mastra/dynamodb";
 
 import { Mastra } from "@mastra/core";
+import { createTool } from "@mastra/core";
 import { z } from "zod";
 
 
@@ -118,5 +119,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.";
+          },
+        }),
+      },
+    }),
   },
 });
@@ -38,12 +38,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",
@@ -72,12 +72,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",

@@ -6,7 +6,8 @@ export type Feature =
   | "human_in_the_loop"
   | "predictive_state_updates"
   | "shared_state"
-  | "tool_based_generative_ui";
+  | "tool_based_generative_ui"
+  | "agentic_chat_reasoning";
 
 export interface MenuIntegrationConfig {
   id: string;