add reasoning example

Author: mme

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

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

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

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

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

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

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

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

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

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

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

@@ -60,6 +60,7 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
       "tool_based_generative_ui",
       "predictive_state_updates",
       "shared_state",
+      "agentic_chat_reasoning",
     ],
   },
   {

typescript-sdk/integrations/langgraph/python/ag_ui_langgraph/examples/agents/agentic_chat_reasoning.py

@@ -0,0 +1,87 @@
+"""
+A simple agentic chat flow using LangGraph instead of CrewAI.
+"""
+
+from typing import List, Any, Optional
+from langchain_core.runnables import RunnableConfig
+from langchain_core.messages import SystemMessage
+from langchain_openai import ChatOpenAI
+from langchain_anthropic import ChatAnthropic
+from langchain_google_genai import ChatGoogleGenerativeAI
+from langgraph.graph import StateGraph, END, START
+from langgraph.graph import MessagesState
+from langgraph.types import Command
+from langgraph.checkpoint.memory import MemorySaver
+
+class AgentState(MessagesState):
+    """
+    State of our graph.
+    """
+    tools: List[Any]
+    model: str
+
+async def chat_node(state: AgentState, config: Optional[RunnableConfig] = None):
+    """
+    Standard chat node based on the ReAct design pattern. It handles:
+    - The model to use (and binds in CopilotKit actions and the tools defined above)
+    - The system prompt
+    - Getting a response from the model
+    - Handling tool calls
+
+    For more about the ReAct design pattern, see: 
+    https://www.perplexity.ai/search/react-agents-NcXLQhreS0WDzpVaS4m9Cg
+    """
+
+
+    # 1. Define the model
+    model = ChatOpenAI(model="o3")
+    if state["model"] == "Anthropic":
+        model = ChatAnthropic(
+            model="claude-sonnet-4-20250514",
+            thinking={"type": "enabled", "budget_tokens": 2000}
+        )
+    elif state["model"] == "Gemini":
+        model = ChatGoogleGenerativeAI(model="gemini-2.5-pro", thinking_budget=1024)
+
+    # Define config for the model
+    if config is None:
+        config = RunnableConfig(recursion_limit=25)
+
+    # 2. Bind the tools to the model
+    model_with_tools = model.bind_tools(
+        [
+            *state["tools"],
+            # your_tool_here
+        ],
+    )
+
+    # 3. Define the system message by which the chat model will be run
+    system_message = SystemMessage(
+        content="You are a helpful assistant."
+    )
+
+    # 4. Run the model to generate a response
+    response = await model_with_tools.ainvoke([
+        system_message,
+        *state["messages"],
+    ], config)
+
+    # 6. We've handled all tool calls, so we can end the graph.
+    return Command(
+        goto=END,
+        update={
+            "messages": response
+        }
+    )
+
+# Define a new graph
+workflow = StateGraph(AgentState)
+workflow.add_node("chat_node", chat_node)
+workflow.set_entry_point("chat_node")
+
+# Add explicit edges, matching the pattern in other examples
+workflow.add_edge(START, "chat_node")
+workflow.add_edge("chat_node", END)
+
+# Compile the graph
+agentic_chat_reasoning_graph = workflow.compile(checkpointer=MemorySaver())

typescript-sdk/integrations/langgraph/python/ag_ui_langgraph/examples/agents/dojo.py

@@ -12,6 +12,7 @@
 from .tool_based_generative_ui import tool_based_generative_ui_graph
 from .agentic_chat import agentic_chat_graph
 from .agentic_generative_ui import graph
+from .agentic_chat_reasoning import agentic_chat_reasoning_graph
 
 app = FastAPI(title="LangGraph Dojo Example Server")
 
@@ -46,7 +47,12 @@
         name="predictive_state_updates",
         description="An example for a predictive state updates flow.",
         graph=predictive_state_updates_graph,
-    )
+    ),
+    "agentic_chat_reasoning": LangGraphAgent(
+        name="agentic_chat_reasoning",
+        description="An example for a reasoning chat.",
+        graph=agentic_chat_reasoning_graph,
+    ),
 }
 
 add_langgraph_fastapi_endpoint(
@@ -85,6 +91,12 @@
     path="/agent/predictive_state_updates"
 )
 
+add_langgraph_fastapi_endpoint(
+    app=app,
+    agent=agents["agentic_chat_reasoning"],
+    path="/agent/agentic_chat_reasoning"
+)
+
 def main():
     """Run the uvicorn server."""
     port = int(os.getenv("PORT", "8000"))