feat: more clean-up, introduce new hooks, better default styling

Signed-off-by: Tyler Slaton <tyler@copilotkit.ai>

Author: tylerslaton

apps/agent/main.py

@@ -3,25 +3,25 @@
 It defines the workflow graph, state, tools, nodes and edges.
 """
 
-from langchain.agents import create_agent
 from copilotkit import CopilotKitMiddleware
+from langchain.agents import create_agent
 from langchain_openai import ChatOpenAI
+
 from src.query import query_data
-from src.todos import todo_tools, AgentState
-from src.middleware import DisableParallelToolCallsMiddleware
+from src.todos import AgentState, todo_tools
 
 agent = create_agent(
-    model=ChatOpenAI(model="gpt-4.1-mini"),
+    model=ChatOpenAI(model="gpt-5-mini", reasoning={"effort": "low", "summary": "concise"}),
     tools=[query_data, *todo_tools],
-    middleware=[DisableParallelToolCallsMiddleware(), CopilotKitMiddleware()],
+    middleware=[CopilotKitMiddleware()],
     state_schema=AgentState,
-    system_prompt=f"""
+    system_prompt="""
         You are a helpful assistant that helps users understand CopilotKit and LangGraph used together.
 
         Be brief in your explanations of CopilotKit and LangGraph, 1 to 2 sentences.
 
         When demonstrating charts, always call the query_data tool to fetch all data from the database first.
-    """
+    """,
 )
 
 graph = agent

apps/agent/src/middleware.py

@@ -5,9 +5,9 @@
 @tool
 def query_data(query: str):
     """
-    Query the database. Always call before showing a chart or graph.
+    Query the database, takes natural language. Always call before showing a chart or graph.
     """
     csv_path = Path(__file__).parent / "db.csv"
     with open(csv_path) as f:
         reader = csv.DictReader(f)
-        return list(reader)
+        return list(reader)

apps/agent/src/query.py

@@ -1,3 +1,4 @@
+from langchain.agents import AgentState as BaseAgentState
 from langchain.tools import ToolRuntime, tool
 from langchain.messages import ToolMessage
 from langgraph.types import Command
@@ -11,7 +12,7 @@ class Todo(TypedDict):
     emoji: str
     status: Literal["pending", "completed"]
 
-class AgentState(TypedDict):
+class AgentState(BaseAgentState):
     todos: list[Todo]
 
 @tool
@@ -45,4 +46,4 @@ def get_todos(runtime: ToolRuntime):
 todo_tools = [
     manage_todos,
     get_todos,
-]
+]

apps/agent/src/todos.py

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@ag-ui/mcp-apps-middleware": "^0.0.3",
-    "@copilotkit/react-core": "1.51.4",
-    "@copilotkit/react-ui": "1.51.4",
-    "@copilotkit/runtime": "1.51.4",
+    "@copilotkit/react-core": "1.52.0-next.6",
+    "@copilotkit/react-ui": "1.52.0-next.6",
+    "@copilotkit/runtime": "1.52.0-next.6",
     "next": "16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",

apps/app/package.json

@@ -15,7 +15,7 @@ const defaultAgent = new LangGraphAgent({
 });
 
 // 2. Bind in middleware to the agent. For A2UI and MCP Apps.
-defaultAgent.use(...aguiMiddleware)
+defaultAgent.use(...aguiMiddleware);
 
 // 3. Define the route and CopilotRuntime for the agent
 export const POST = async (req: NextRequest) => {

apps/app/src/app/api/copilotkit/route.ts

@@ -1,13 +1,21 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --chart-tooltip-bg: #ffffff;
+  --chart-tooltip-border: #e5e7eb;
+  --chart-axis: #6b7280;
 }
 
 :root.dark {
   --background: #0a0a0a;
   --foreground: #ededed;
+  --chart-tooltip-bg: #27272a;
+  --chart-tooltip-border: #3f3f46;
+  --chart-axis: #a1a1aa;
 }
 
 body {

apps/app/src/app/globals.css

@@ -3,41 +3,20 @@
 import "./globals.css";
 
 import { CopilotKit } from "@copilotkit/react-core";
-import "@copilotkit/react-ui/v2/styles.css";
-import { useEffect } from "react";
+import "@copilotkit/react-core/v2/styles.css";
+import { ThemeProvider } from "@/hooks/use-theme";
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  useEffect(() => {
-    // Detect system preference and apply dark mode
-    const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-    if (isDark) {
-      document.documentElement.classList.add('dark');
-    }
-
-    // Listen for system preference changes
-    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const handleChange = (e: MediaQueryListEvent) => {
-      if (e.matches) {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
-    };
-
-    mediaQuery.addEventListener('change', handleChange);
-    return () => mediaQuery.removeEventListener('change', handleChange);
-  }, []);
-
   return (
     <html lang="en">
       <body className={`antialiased`}>
-        <CopilotKit runtimeUrl="/api/copilotkit">
-          {children}
-        </CopilotKit>
+        <ThemeProvider>
+          <CopilotKit runtimeUrl="/api/copilotkit">{children}</CopilotKit>
+        </ThemeProvider>
       </body>
     </html>
   );

apps/app/src/app/layout.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ExampleLayout } from "@/components/example-layout";
-import { Canvas } from "@/components/canvas";
+import { ExampleCanvas } from "@/components/example-canvas";
 import { useGenerativeUIExamples, useExampleSuggestions } from "@/hooks";
 
 import { CopilotChat } from "@copilotkit/react-core/v2";
@@ -18,7 +18,7 @@ export default function HomePage() {
     <ExampleLayout
       chatContent={<CopilotChat />}
       // chatContent={<HeadlessChat />}
-      appContent={<Canvas />}
+      appContent={<ExampleCanvas />}
     />
   );
-}
+}