Merge branch 'ag-ui-protocol:main' into adk-middleware

Author: contextablemark

typescript-sdk/apps/dojo/e2e2/tests/langgraph-fastapi-agentic-chat.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('renders initial message', async ({ page }) => {
+  await page.goto('http://localhost:9999/langgraph-fastapi/feature/agentic_chat');
+
+  await expect(page.getByText('Hi, I\'m an agent. Want to chat?')).toBeVisible();
+});
+
+test('responds to user message', async ({ page }) => {
+  await page.goto('http://localhost:9999/langgraph-fastapi/feature/agentic_chat');
+
+  const textarea = page.getByPlaceholder('Type a message...');
+  textarea.fill('How many sides are in a square? Please answer in one word. Do not use any punctuation, just the number in word form.');
+  await page.keyboard.press('Enter');
+
+  page.locator('.copilotKitInputControls button.copilotKitInputControlButton').click();
+
+  await expect(page.locator('.copilotKitMessage')).toHaveCount(3);
+  await expect(page.locator('.copilotKitMessage.copilotKitAssistantMessage')).toHaveCount(2);
+  await expect(page.locator('.copilotKitMessage.copilotKitUserMessage')).toHaveCount(1);
+  await expect(page.locator('.copilotKitMessage.copilotKitAssistantMessage').last()).toHaveText('four', { ignoreCase: true });
+});

typescript-sdk/apps/dojo/e2e2/tests/langgraph-typescript-agentic-chat.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+
+test('renders initial message', async ({ page }) => {
+  await page.goto('http://localhost:9999/langgraph-typescript/feature/agentic_chat');
+
+  await expect(page.getByText('Hi, I\'m an agent. Want to chat?')).toBeVisible();
+});
+
+test('responds to user message', async ({ page }) => {
+  await page.goto('http://localhost:9999/langgraph-typescript/feature/agentic_chat');
+
+  const textarea = page.getByPlaceholder('Type a message...');
+  textarea.fill('How many sides are in a square? Please answer in one word. Do not use any punctuation, just the number in word form.');
+  await page.keyboard.press('Enter');
+
+  page.locator('.copilotKitInputControls button.copilotKitInputControlButton').click();
+
+  await expect(page.locator('.copilotKitMessage')).toHaveCount(3);
+  await expect(page.locator('.copilotKitMessage.copilotKitAssistantMessage')).toHaveCount(2);
+  await expect(page.locator('.copilotKitMessage.copilotKitUserMessage')).toHaveCount(1);
+  await expect(page.locator('.copilotKitMessage.copilotKitAssistantMessage').last()).toHaveText('four', { ignoreCase: true });
+});

typescript-sdk/apps/dojo/scripts/generate-content-json.ts

@@ -5,27 +5,27 @@ import path from "path";
 function parseAgentsFile(): Array<{id: string, agentKeys: string[]}> {
   const agentsFilePath = path.join(__dirname, '../src/agents.ts');
   const agentsContent = fs.readFileSync(agentsFilePath, 'utf8');
-  
+
   const agentConfigs: Array<{id: string, agentKeys: string[]}> = [];
-  
+
   // Split the content to process each agent configuration individually
   const agentBlocks = agentsContent.split(/(?=\s*{\s*id:\s*["'])/);
-  
+
   for (const block of agentBlocks) {
     // Extract the ID
     const idMatch = block.match(/id:\s*["']([^"']+)["']/);
     if (!idMatch) continue;
-    
+
     const id = idMatch[1];
-    
+
     // Find the return object by looking for the pattern and then manually parsing balanced braces
     const returnMatch = block.match(/agents:\s*async\s*\(\)\s*=>\s*{\s*return\s*{/);
     if (!returnMatch) continue;
-    
+
     const startIndex = returnMatch.index! + returnMatch[0].length;
     const returnObjectContent = extractBalancedBraces(block, startIndex);
-    
-    
+
+
     // Extract keys from the return object - only capture keys that are followed by a colon and then 'new'
     // This ensures we only get the top-level keys like "agentic_chat: new ..." not nested keys like "url: ..."
     const keyRegex = /^\s*(\w+):\s*new\s+\w+/gm;
@@ -34,18 +34,18 @@ function parseAgentsFile(): Array<{id: string, agentKeys: string[]}> {
     while ((keyMatch = keyRegex.exec(returnObjectContent)) !== null) {
       keys.push(keyMatch[1]);
     }
-    
+
     agentConfigs.push({ id, agentKeys: keys });
   }
-  
+
   return agentConfigs;
 }
 
 // Helper function to extract content between balanced braces
 function extractBalancedBraces(text: string, startIndex: number): string {
   let braceCount = 0;
   let i = startIndex;
-  
+
   while (i < text.length) {
     if (text[i] === '{') {
       braceCount++;
@@ -58,7 +58,7 @@ function extractBalancedBraces(text: string, startIndex: number): string {
     }
     i++;
   }
-  
+
   return '';
 }
 
@@ -71,23 +71,23 @@ async function getFile(_filePath: string | undefined, _fileName?: string) {
     console.warn(`File path is undefined, skipping.`);
     return {}
   }
-  
+
   const fileName = _fileName ?? _filePath.split('/').pop() ?? ''
   const filePath = _fileName ? path.join(_filePath, fileName) : _filePath;
-  
+
   // Check if it's a remote URL
   const isRemoteUrl = _filePath.startsWith('http://') || _filePath.startsWith('https://');
-  
+
   let content: string;
-  
+
   try {
     if (isRemoteUrl) {
       // Convert GitHub URLs to raw URLs for direct file access
       let fetchUrl = _filePath;
       if (_filePath.includes('github.com') && _filePath.includes('/blob/')) {
         fetchUrl = _filePath.replace('github.com', 'raw.githubusercontent.com').replace('/blob/', '/');
       }
-      
+
       // Fetch remote file content
       console.log(`Fetching remote file: ${fetchUrl}`);
       const response = await fetch(fetchUrl);
@@ -177,6 +177,15 @@ const agentFilesMapper: Record<string, (agentKeys: string[]) => Record<string, s
       ]
     }), {})
   },
+  'langgraph-typescript': (agentKeys: string[]) => {
+    return agentKeys.reduce((acc, agentId) => ({
+      ...acc,
+      [agentId]: [
+        path.join(__dirname, integrationsFolderPath, `/langgraph/examples/python/agents/${agentId}/agent.py`),
+        path.join(__dirname, integrationsFolderPath, `/langgraph/examples/typescript/src/agents/${agentId}/agent.ts`)
+      ]
+    }), {})
+  },
   'langgraph-fastapi': (agentKeys: string[]) => {
     return agentKeys.reduce((acc, agentId) => ({
       ...acc,
@@ -234,6 +243,6 @@ async function runGenerateContent() {
       path.join(__dirname, "../src/files.json"),
       JSON.stringify(result, null, 2)
   );
-  
+
   console.log("Successfully generated src/files.json");
 })();

typescript-sdk/apps/dojo/scripts/prep-dojo-everything.js

@@ -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'),
 }
@@ -61,7 +61,10 @@ const crewai = {
 const langgraphFastapi = {
   command: 'poetry install',
   name: 'LG FastAPI',
-  cwd: path.join(integrationsRoot, 'langgraph/python/ag_ui_langgraph/examples'),
+  cwd: path.join(integrationsRoot, 'langgraph/examples/python'),
+  env: {
+    POETRY_VIRTUALENVS_IN_PROJECT: "false"
+  }
 }
 
 // Langgraph (Platorm {typescript})
@@ -115,7 +118,7 @@ async function main() {
     serverStarterAllFeatures,
     agno,
     crewai,
-    // langgraphFastapi, // Disabled until build fixes
+    langgraphFastapi,
     langgraphPlatformTypescript,
     llamaIndex,
     mastra,

typescript-sdk/apps/dojo/scripts/run-dojo-everything.js

@@ -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},
@@ -63,8 +63,11 @@ const crewai = {
 const langgraphFastapi = {
   command: 'poetry run dev',
   name: 'LG FastAPI',
-  cwd: path.join(integrationsRoot, 'langgraph/python/ag_ui_langgraph/examples'),
-  env: {PORT: 8004},
+  cwd: path.join(integrationsRoot, 'langgraph/examples/python'),
+  env: {
+    PORT: 8004,
+    POETRY_VIRTUALENVS_IN_PROJECT: "false"
+  },
 }
 
 // Langgraph (Platform {python})
@@ -119,10 +122,8 @@ const dojo = {
     AGNO_URL: 'http://localhost:8002',
     CREW_AI_URL: 'http://localhost:8003',
     LANGGRAPH_FAST_API_URL: 'http://localhost:8004',
-    // TODO: Move this to run 2 platforms for testing.
-    LANGGRAPH_URL: 'http://localhost:8005',
-    // LANGGRAPH_PLATFORM_PYTHON_URL: 'http://localhost:8005',
-    // LANGGRAPH_PLATFORM_TYPESCRIPT_URL: 'http://localhost:8006',
+    LANGGRAPH_PYTHON_URL: 'http://localhost:8005',
+    LANGGRAPH_TYPESCRIPT_URL: 'http://localhost:8006',
     LLAMA_INDEX_URL: 'http://localhost:8007',
     MASTRA_URL: 'http://localhost:8008',
     PYDANTIC_AI_URL: 'http://localhost:8009',
@@ -135,9 +136,8 @@ const procs = [
   serverStarterAllFeatures,
   agno,
   crewai,
-  // langgraphFastapi, // Disabled until it runs
+  langgraphFastapi,
   langgraphPlatformPython,
-  // TODO: Also run the typescript version of langgraph.
   langgraphPlatformTypescript,
   llamaIndex,
   mastra,

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

@@ -127,29 +127,32 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
     agents: async () => {
       return {
         agentic_chat: new LangGraphAgent({
-          deploymentUrl: envVars.langgraphUrl,
+          deploymentUrl: envVars.langgraphPythonUrl,
           graphId: "agentic_chat",
         }),
         agentic_generative_ui: new LangGraphAgent({
-          deploymentUrl: envVars.langgraphUrl,
+          deploymentUrl: envVars.langgraphPythonUrl,
           graphId: "agentic_generative_ui",
         }),
         human_in_the_loop: new LangGraphAgent({
-          deploymentUrl: envVars.langgraphUrl,
+          deploymentUrl: envVars.langgraphPythonUrl,
           graphId: "human_in_the_loop",
         }),
         predictive_state_updates: new LangGraphAgent({
-          deploymentUrl: envVars.langgraphUrl,
+          deploymentUrl: envVars.langgraphPythonUrl,
           graphId: "predictive_state_updates",
         }),
         shared_state: new LangGraphAgent({
-          deploymentUrl: envVars.langgraphUrl,
+          deploymentUrl: envVars.langgraphPythonUrl,
           graphId: "shared_state",
         }),
         tool_based_generative_ui: new LangGraphAgent({
-          deploymentUrl: envVars.langgraphUrl,
+          deploymentUrl: envVars.langgraphPythonUrl,
           graphId: "tool_based_generative_ui",
         }),
+        agentic_chat_reasoning: new LangGraphHttpAgent({
+          url: `${envVars.langgraphPythonUrl}/agent/agentic_chat_reasoning`,
+        }),
       };
     },
   },
@@ -175,6 +178,40 @@ export const agentsIntegrations: AgentIntegrationConfig[] = [
         tool_based_generative_ui: new LangGraphHttpAgent({
           url: `${envVars.langgraphFastApiUrl}/agent/tool_based_generative_ui`,
         }),
+        agentic_chat_reasoning: new LangGraphHttpAgent({
+          url: `${envVars.langgraphFastApiUrl}/agent/agentic_chat_reasoning`,
+        }),
+      };
+    },
+  },
+  {
+    id: "langgraph-typescript",
+    agents: async () => {
+      return {
+        agentic_chat: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "agentic_chat",
+        }),
+        agentic_generative_ui: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "agentic_generative_ui",
+        }),
+        human_in_the_loop: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "human_in_the_loop",
+        }),
+        predictive_state_updates: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "predictive_state_updates",
+        }),
+        shared_state: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "shared_state",
+        }),
+        tool_based_generative_ui: new LangGraphAgent({
+          deploymentUrl: envVars.langgraphTypescriptUrl,
+          graphId: "tool_based_generative_ui",
+        })
       };
     },
   },
@@ -183,7 +220,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`,
         }),
       };
     },

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!