diff --git a/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts
index 74521ef2b..2918ef691 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/adkMiddlewareTests/agenticChatPage.spec.ts
@@ -42,7 +42,8 @@ test.describe("Agentic Chat Feature", () => {
       await chat.agentGreeting.waitFor({ state: "visible" });
 
       // Store initial background color
-      const initialBackground = await chat.getBackground();
+      const backgroundContainer = page.locator('[data-testid="background-container"]')
+      const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
       console.log("Initial background color:", initialBackground);
 
       // 1. Send message to change background to blue
@@ -52,8 +53,8 @@ test.describe("Agentic Chat Feature", () => {
       );
       await waitForAIResponse(page);
 
-      const backgroundBlue = await chat.getBackground();
-      expect(backgroundBlue).not.toBe(initialBackground);
+      await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+      const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
       // Check if background is blue (string color name or contains blue)
       expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -64,15 +65,10 @@ test.describe("Agentic Chat Feature", () => {
       );
       await waitForAIResponse(page);
 
-      const backgroundPink = await chat.getBackground();
-      expect(backgroundPink).not.toBe(backgroundBlue);
+      await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+      const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
       // Check if background is pink (string color name or contains pink)
       expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-      // 3. Reset to default
-      await chat.sendMessage("Reset the background color");
-      await chat.assertUserMessageVisible("Reset the background color");
-      await waitForAIResponse(page);
     });
   });
 
diff --git a/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts
index cb6820d30..8d61c511b 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/crewAITests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[CrewAI] Agentic Chat changes background on message and reset", async ({
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[CrewAI] Agentic Chat changes background on message and reset", async ({
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,15 +63,10 @@ test("[CrewAI] Agentic Chat changes background on message and reset", async ({
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-    // 3. Reset to default
-    await chat.sendMessage("Reset the background color");
-    await chat.assertUserMessageVisible("Reset the background color");
-    await waitForAIResponse(page);
   });
 });
 
diff --git a/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts
index 2ac0d2853..f637bb94b 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/langgraphFastAPITests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[LangGraph FastAPI] Agentic Chat changes background on message and reset",
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[LangGraph FastAPI] Agentic Chat changes background on message and reset",
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,15 +63,10 @@ test("[LangGraph FastAPI] Agentic Chat changes background on message and reset",
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-    // 3. Reset to default
-    await chat.sendMessage("Reset the background color");
-    await chat.assertUserMessageVisible("Reset the background color");
-    await waitForAIResponse(page);
   });
 });
 
diff --git a/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts
index c39e5a92e..5cd9f6f20 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/langgraphPythonTests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,8 +63,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
   });
diff --git a/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts
index 9ec869deb..ed6c315c0 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/langgraphTypescriptTests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,8 +63,8 @@ test("[LangGraph] Agentic Chat changes background on message and reset", async (
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
   });
diff --git a/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts
index 0a9a262c2..9ccacf22e 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/llamaIndexTests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[LlamaIndex] Agentic Chat changes background on message and reset", async
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[LlamaIndex] Agentic Chat changes background on message and reset", async
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,15 +63,10 @@ test("[LlamaIndex] Agentic Chat changes background on message and reset", async
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-    // 3. Reset to default
-    await chat.sendMessage("Reset the background color to default");
-    await chat.assertUserMessageVisible("Reset the background color to default");
-    await waitForAIResponse(page);
   });
 });
 
diff --git a/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts
index 2c3c2ac35..ed813c166 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/mastraAgentLocalTests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[MastraAgentLocal] Agentic Chat changes background on message and reset",
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[MastraAgentLocal] Agentic Chat changes background on message and reset",
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,15 +63,10 @@ test("[MastraAgentLocal] Agentic Chat changes background on message and reset",
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-    // 3. Reset to default
-    await chat.sendMessage("Reset the background color to default");
-    await chat.assertUserMessageVisible("Reset the background color to default");
-    await waitForAIResponse(page);
   });
 });
 
diff --git a/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts
index df8ab753f..c8da22d0c 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/pydanticAITests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[PydanticAI] Agentic Chat changes background on message and reset", async
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[PydanticAI] Agentic Chat changes background on message and reset", async
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,15 +63,10 @@ test("[PydanticAI] Agentic Chat changes background on message and reset", async
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-    // 3. Reset to default
-    await chat.sendMessage("Reset the background color");
-    await chat.assertUserMessageVisible("Reset the background color");
-    await waitForAIResponse(page);
   });
 });
 
diff --git a/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts b/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts
index 640fb9f9f..1e03e1e58 100644
--- a/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts
+++ b/typescript-sdk/apps/dojo/e2e/tests/vercelAISdkTests/agenticChatPage.spec.ts
@@ -40,7 +40,8 @@ test("[Vercel AI SDK] Agentic Chat changes background on message and reset", asy
     await chat.agentGreeting.waitFor({ state: "visible" });
 
     // Store initial background color
-    const initialBackground = await chat.getBackground();
+    const backgroundContainer = page.locator('[data-testid="background-container"]')
+    const initialBackground = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     console.log("Initial background color:", initialBackground);
 
     // 1. Send message to change background to blue
@@ -50,8 +51,8 @@ test("[Vercel AI SDK] Agentic Chat changes background on message and reset", asy
     );
     await waitForAIResponse(page);
 
-    const backgroundBlue = await chat.getBackground();
-    expect(backgroundBlue).not.toBe(initialBackground);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', initialBackground, { timeout: 7000 });
+    const backgroundBlue = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is blue (string color name or contains blue)
     expect(backgroundBlue.toLowerCase()).toMatch(/blue|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
 
@@ -62,15 +63,10 @@ test("[Vercel AI SDK] Agentic Chat changes background on message and reset", asy
     );
     await waitForAIResponse(page);
 
-    const backgroundPink = await chat.getBackground();
-    expect(backgroundPink).not.toBe(backgroundBlue);
+    await expect(backgroundContainer).not.toHaveCSS('background-color', backgroundBlue, { timeout: 7000 });
+    const backgroundPink = await backgroundContainer.evaluate(el => getComputedStyle(el).backgroundColor);
     // Check if background is pink (string color name or contains pink)
     expect(backgroundPink.toLowerCase()).toMatch(/pink|rgb\(.*,.*,.*\)|#[0-9a-f]{6}/);
-
-    // 3. Reset to default
-    await chat.sendMessage("Reset the background color to default");
-    await chat.assertUserMessageVisible("Reset the background color to default");
-    await waitForAIResponse(page);
   });
 });
 
diff --git a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx
index f635969aa..84c458ebc 100644
--- a/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx
+++ b/typescript-sdk/apps/dojo/src/app/[integrationId]/feature/agentic_chat/page.tsx
@@ -50,7 +50,7 @@ const Chat = () => {
   });
 
   return (
-    <div className="flex justify-center items-center h-full w-full" style={{ background }}>
+    <div className="flex justify-center items-center h-full w-full" data-testid="background-container" style={{ background }}>
       <div className="h-full w-full md:w-8/10 md:h-8/10 rounded-lg">
         <CopilotChat
           className="h-full rounded-2xl"
diff --git a/typescript-sdk/apps/dojo/src/files.json b/typescript-sdk/apps/dojo/src/files.json
index 754c74e4d..3d7e582d3 100644
--- a/typescript-sdk/apps/dojo/src/files.json
+++ b/typescript-sdk/apps/dojo/src/files.json
@@ -2,7 +2,7 @@
   "middleware-starter::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -28,7 +28,7 @@
   "pydantic-ai::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -158,7 +158,7 @@
   "server-starter::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -184,7 +184,7 @@
   "adk-middleware::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -288,7 +288,7 @@
   "server-starter-all-features::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -444,7 +444,7 @@
   "vercel-ai-sdk::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -470,7 +470,7 @@
   "langgraph::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -721,7 +721,7 @@
   "langgraph-fastapi::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -929,7 +929,7 @@
   "langgraph-typescript::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1153,7 +1153,7 @@
   "agno::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1193,7 +1193,7 @@
   "llama-index::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },
@@ -1297,7 +1297,7 @@
   "crewai::agentic_chat": [
     {
       "name": "page.tsx",
-      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
+      "content": "\"use client\";\nimport React, { useState } from \"react\";\nimport \"@copilotkit/react-ui/styles.css\";\nimport \"./style.css\";\nimport { CopilotKit, useCoAgent, useCopilotAction, useCopilotChat } from \"@copilotkit/react-core\";\nimport { CopilotChat } from \"@copilotkit/react-ui\";\n\ninterface AgenticChatProps {\n  params: Promise<{\n    integrationId: string;\n  }>;\n}\n\nconst AgenticChat: React.FC<AgenticChatProps> = ({ params }) => {\n  const { integrationId } = React.use(params);\n\n  return (\n    <CopilotKit\n      runtimeUrl={`/api/copilotkit/${integrationId}`}\n      showDevConsole={false}\n      // agent lock to the relevant agent\n      agent=\"agentic_chat\"\n    >\n      <Chat />\n    </CopilotKit>\n  );\n};\n\nconst Chat = () => {\n  const [background, setBackground] = useState<string>(\"--copilot-kit-background-color\");\n\n  useCopilotAction({\n    name: \"change_background\",\n    description:\n      \"Change the background color of the chat. Can be anything that the CSS background attribute accepts. Regular colors, linear of radial gradients etc.\",\n    parameters: [\n      {\n        name: \"background\",\n        type: \"string\",\n        description: \"The background. Prefer gradients.\",\n      },\n    ],\n    handler: ({ background }) => {\n      setBackground(background);\n      return {\n        status: \"success\",\n        message: `Background changed to ${background}`,\n      };\n    },\n  });\n\n  return (\n    <div className=\"flex justify-center items-center h-full w-full\" data-testid=\"background-container\" style={{ background }}>\n      <div className=\"h-full w-full md:w-8/10 md:h-8/10 rounded-lg\">\n        <CopilotChat\n          className=\"h-full rounded-2xl\"\n          labels={{ initial: \"Hi, I'm an agent. Want to chat?\" }}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default AgenticChat;\n",
       "language": "typescript",
       "type": "file"
     },