feat: add better data, suggestions and use smaller model for speed

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

Author: tylerslaton

apps/agent/main.py

@@ -3,34 +3,24 @@
 It defines the workflow graph, state, tools, nodes and edges.
 """
 
-import asyncio
 from langchain.agents import create_agent
 from copilotkit import CopilotKitMiddleware
-from langchain_mcp_adapters.client import MultiServerMCPClient
+from langchain_openai import ChatOpenAI
 from src.query import query_data
 from src.todos import todo_tools, AgentState
-
-client = MultiServerMCPClient({
-    "copilotkit": {
-        "transport": "http",
-        "url": "https://mcp.copilotkit.ai",
-    }
-})
-
-mcp_tools = asyncio.run(client.get_tools())
+from src.middleware import DisableParallelToolCallsMiddleware
 
 agent = create_agent(
-    model="gpt-5.2",
-    tools=[query_data, *mcp_tools, *todo_tools],
-    middleware=[CopilotKitMiddleware()],
+    model=ChatOpenAI(model="gpt-4.1-mini"),
+    tools=[query_data, *todo_tools],
+    middleware=[DisableParallelToolCallsMiddleware(), CopilotKitMiddleware()],
     state_schema=AgentState,
     system_prompt=f"""
         You are a helpful assistant that helps users understand CopilotKit and LangGraph used together.
 
-        When asked about generative UI:
-        1. Ground yourself in relevant information from the CopilotKit documentation.
-        2. Use one of the relevant tools to demonstrate that piece of generative UI.
-        3. Explain the concept to the user with a brief summary.
+        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.
     """
 )
 

apps/agent/src/db.csv

@@ -1,16 +1,41 @@
-date,category,subcategory,amount,type
-2026-01-01,Revenue,Subscriptions,45000,income
-2026-01-01,Revenue,One-time Sales,12000,income
-2026-01-01,Expenses,Salaries,30000,expense
-2026-01-01,Expenses,Infrastructure,5000,expense
-2026-01-01,Expenses,Marketing,8000,expense
-2026-02-01,Revenue,Subscriptions,48000,income
-2026-02-01,Revenue,One-time Sales,15000,income
-2026-02-01,Expenses,Salaries,30000,expense
-2026-02-01,Expenses,Infrastructure,5500,expense
-2026-02-01,Expenses,Marketing,10000,expense
-2026-03-01,Revenue,Subscriptions,52000,income
-2026-03-01,Revenue,One-time Sales,18000,income
-2026-03-01,Expenses,Salaries,32000,expense
-2026-03-01,Expenses,Infrastructure,6000,expense
-2026-03-01,Expenses,Marketing,12000,expense
+date,category,subcategory,amount,type,notes
+2026-01-05,Revenue,Enterprise Subscriptions,45000,income,3 new enterprise customers (Acme Corp, TechFlow, DataViz Inc)
+2026-01-05,Revenue,Pro Tier Upgrades,12000,income,24 users upgraded from free to pro
+2026-01-08,Revenue,API Usage Overages,3500,income,High API usage from top 5 customers
+2026-01-10,Expenses,Engineering Salaries,42000,expense,7 engineers + 2 contractors
+2026-01-10,Expenses,Product Team,18000,expense,PM and 2 designers
+2026-01-12,Expenses,AWS Infrastructure,8200,expense,Increased compute for new AI features
+2026-01-15,Expenses,Marketing - Paid Ads,12000,expense,Google Ads and LinkedIn campaigns
+2026-01-18,Revenue,Consulting Services,8500,income,Custom integration for Acme Corp
+2026-01-20,Expenses,Customer Success,15000,expense,3 CSMs + support tools (Intercom)
+2026-01-22,Expenses,AI Model Costs,4200,expense,OpenAI API usage for product features
+2026-01-25,Revenue,Marketplace Sales,6800,income,Template and plugin sales
+2026-01-28,Expenses,Office & Equipment,3500,expense,New laptops and coworking spaces
+2026-02-03,Revenue,Enterprise Subscriptions,51000,income,2 new customers + expansion from TechFlow
+2026-02-03,Revenue,Pro Tier Upgrades,15500,income,31 upgrades + reduced churn
+2026-02-05,Revenue,API Usage Overages,4800,income,DataViz Inc heavy API usage spike
+2026-02-07,Expenses,Engineering Salaries,42000,expense,Same headcount as January
+2026-02-07,Expenses,Product Team,18000,expense,No changes to product team
+2026-02-10,Expenses,AWS Infrastructure,9500,expense,Traffic spike from viral social post
+2026-02-12,Expenses,Marketing - Paid Ads,15000,expense,Increased ad spend for Q1 push
+2026-02-14,Revenue,Consulting Services,12000,income,2 custom projects (TechFlow + new client)
+2026-02-18,Expenses,Customer Success,16500,expense,Hired 1 additional CSM
+2026-02-20,Expenses,AI Model Costs,5800,expense,Increased usage from new AI features launch
+2026-02-22,Revenue,Marketplace Sales,8200,income,Top template hit featured list
+2026-02-25,Expenses,Conference & Travel,4500,expense,Team attended SaaS Conference 2026
+2026-02-27,Revenue,Partnership Revenue,5500,income,Referral fees from integration partners
+2026-03-02,Revenue,Enterprise Subscriptions,58000,income,Major win: Fortune 500 customer signed
+2026-03-02,Revenue,Pro Tier Upgrades,19000,income,42 upgrades - best month yet
+2026-03-05,Revenue,API Usage Overages,6200,income,Consistent high usage across top tier
+2026-03-08,Expenses,Engineering Salaries,48000,expense,Hired 1 senior engineer for AI team
+2026-03-08,Expenses,Product Team,21000,expense,Promoted designer to senior level
+2026-03-10,Expenses,AWS Infrastructure,11000,expense,Scaled infrastructure for enterprise client
+2026-03-12,Expenses,Marketing - Paid Ads,18000,expense,Doubled down on successful campaigns
+2026-03-14,Revenue,Consulting Services,15500,income,Fortune 500 onboarding + 2 other projects
+2026-03-16,Expenses,Customer Success,19500,expense,Hired dedicated enterprise CSM
+2026-03-18,Expenses,AI Model Costs,7200,expense,Fortune 500 client heavy AI usage
+2026-03-20,Revenue,Marketplace Sales,9800,income,3 new templates in top 10
+2026-03-22,Expenses,Sales & BD,12000,expense,Hired first sales rep for enterprise
+2026-03-24,Revenue,Partnership Revenue,8200,income,New integration partnerships launched
+2026-03-26,Expenses,Security & Compliance,6500,expense,SOC 2 audit and security tools
+2026-03-28,Revenue,Training & Workshops,4200,income,Conducted 2 customer training sessions

apps/agent/src/middleware.py

@@ -0,0 +1,11 @@
+from langchain.agents.middleware import AgentMiddleware
+
+# Note: This disables parallel tool calling. For smaller models, this helps improve reliability.
+class DisableParallelToolCallsMiddleware(AgentMiddleware):
+    def wrap_model_call(self, request, handler):
+        request.model_settings["parallel_tool_calls"] = False
+        return handler(request)
+    
+    async def awrap_model_call(self, request, handler):
+        request.model_settings["parallel_tool_calls"] = False
+        return await handler(request)

apps/app/src/app/globals.css

@@ -5,11 +5,9 @@
   --foreground: #171717;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+:root.dark {
+  --background: #0a0a0a;
+  --foreground: #ededed;
 }
 
 body {

apps/app/src/app/layout.tsx

@@ -4,12 +4,34 @@ import "./globals.css";
 
 import { CopilotKit } from "@copilotkit/react-core";
 import "@copilotkit/react-ui/v2/styles.css";
+import { useEffect } from "react";
 
 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`}>

apps/app/src/components/canvas/index.tsx

@@ -7,7 +7,7 @@ export function Canvas() {
   const { agent } = useAgent();
 
   return (
-    <div className="h-full p-8 bg-gray-50">
+    <div className="h-full p-8 bg-gray-50 dark:bg-black">
       <TodoList
         // read state from agent
         todos={agent.state?.todos || []} 

apps/app/src/components/canvas/todo-card.tsx

@@ -59,18 +59,18 @@ export function TodoCard({
 
   return (
     <div
-      className="group bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-all duration-200 shadow-sm"
+      className="group bg-white dark:bg-zinc-800 rounded-lg border border-gray-200 dark:border-zinc-700 p-4 hover:shadow-md transition-all duration-200 shadow-sm"
     >
       <div className="flex items-start gap-3">
         {/* Checkbox toggle */}
         <button
           onClick={() => onToggleStatus(todo)}
-          className="flex-shrink-0 w-5 h-5 rounded-full border-2 border-gray-300 hover:border-gray-600 transition-colors flex items-center justify-center mt-0.5 cursor-pointer"
+          className="flex-shrink-0 w-5 h-5 rounded-full border-2 border-gray-300 dark:border-zinc-600 hover:border-gray-600 dark:hover:border-zinc-400 transition-colors flex items-center justify-center mt-0.5 cursor-pointer"
           aria-label={isCompleted ? "Mark as incomplete" : "Mark as complete"}
           title={isCompleted ? "Mark as incomplete" : "Mark as complete"}
         >
           {isCompleted && (
-            <svg className="w-3 h-3 text-gray-700" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5">
+            <svg className="w-3 h-3 text-gray-700 dark:text-zinc-300" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.5">
               <polyline points="2,6 5,9 10,3" />
             </svg>
           )}
@@ -93,15 +93,15 @@ export function TodoCard({
                     if (e.key === "Enter") saveEdit("title");
                     if (e.key === "Escape") cancelEdit();
                   }}
-                  className="w-full px-2 py-1 text-base font-semibold border-b-2 border-gray-400 focus:outline-none"
+                  className="w-full px-2 py-1 text-base font-semibold border-b-2 border-gray-400 dark:border-zinc-500 focus:outline-none bg-transparent dark:text-white"
                   autoFocus
                   aria-label="Edit todo title"
                 />
               ) : (
                 <div
                   onClick={() => startEdit("title")}
                   className={`text-base font-semibold cursor-text break-words ${
-                    isCompleted ? "line-through text-gray-400" : "text-gray-900"
+                    isCompleted ? "line-through text-gray-400 dark:text-zinc-500" : "text-gray-900 dark:text-zinc-100"
                   }`}
                 >
                   {todo.title}
@@ -120,7 +120,7 @@ export function TodoCard({
                 onKeyDown={(e) => {
                   if (e.key === "Escape") cancelEdit();
                 }}
-                className="w-full px-2 py-1 text-sm text-gray-600 border border-gray-400 rounded focus:outline-none resize-none"
+                className="w-full px-2 py-1 text-sm text-gray-600 dark:text-zinc-300 border border-gray-400 dark:border-zinc-500 rounded focus:outline-none resize-none bg-transparent"
                 rows={3}
                 autoFocus
                 aria-label="Edit todo description"
@@ -129,7 +129,7 @@ export function TodoCard({
               <p
                 onClick={() => startEdit("description")}
                 className={`text-sm cursor-text ${
-                  isCompleted ? "line-through text-gray-300" : "text-gray-600"
+                  isCompleted ? "line-through text-gray-300 dark:text-zinc-600" : "text-gray-600 dark:text-zinc-300"
                 }`}
               >
                 {truncatedDescription}
@@ -141,7 +141,7 @@ export function TodoCard({
         {/* Delete button (visible on hover) */}
         <button
           onClick={() => onDelete(todo)}
-          className="flex-shrink-0 opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-600 transition-all text-lg cursor-pointer"
+          className="flex-shrink-0 opacity-0 group-hover:opacity-100 text-gray-400 dark:text-zinc-500 hover:text-red-600 dark:hover:text-red-500 transition-all text-lg cursor-pointer"
           aria-label="Delete todo"
           title="Delete todo"
         >

apps/app/src/components/canvas/todo-column.tsx

@@ -39,15 +39,15 @@ export function TodoColumn({
     <section aria-label={`${title} column`} className="flex-1 min-w-0">
       <div className="mb-6 flex items-center justify-between">
         <div>
-          <h2 className="text-xl font-bold text-gray-900">{title}</h2>
-          <p className="text-sm text-gray-500 mt-1">
+          <h2 className="text-xl font-bold text-gray-900 dark:text-zinc-100">{title}</h2>
+          <p className="text-sm text-gray-500 dark:text-zinc-400 mt-1">
             {todos.length} {todos.length === 1 ? 'task' : 'tasks'}
           </p>
         </div>
         {showAddButton && onAddTodo && (
           <button
             onClick={onAddTodo}
-            className="px-2.5 py-0.5 text-black text-xl border bg-white font-medium rounded-lg hover:border-gray-500 hover:border hover:shadow-md transition-all cursor-pointer"
+            className="px-2.5 py-0.5 text-black dark:text-white text-xl border dark:border-zinc-600 bg-white dark:bg-zinc-800 font-medium rounded-lg hover:border-gray-500 dark:hover:border-zinc-400 hover:border hover:shadow-md transition-all cursor-pointer"
             aria-label="Add new todo"
             disabled={isAgentRunning}
           >
@@ -57,7 +57,7 @@ export function TodoColumn({
       </div>
       <div className="space-y-6">
         {todos.length === 0 ? (
-          <div role="status" className="text-center py-12 text-gray-400 text-sm">
+          <div role="status" className="text-center py-12 text-gray-400 dark:text-zinc-500 text-sm">
             {emptyMessage}
           </div>
         ) : (

apps/app/src/components/canvas/todo-list.tsx

@@ -66,7 +66,7 @@ export function TodoList({ todos, onUpdate, isAgentRunning }: TodoListProps) {
       <div className="flex items-center justify-center h-full">
         <button
           onClick={addTodo}
-          className="px-6 py-3 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-900 shadow-md hover:shadow-lg transition-all cursor-pointer"
+          className="px-6 py-3 bg-gray-800 dark:bg-zinc-700 text-white font-medium rounded-lg hover:bg-gray-900 dark:hover:bg-gray-600 shadow-md hover:shadow-lg transition-all cursor-pointer"
           aria-label="Add your first todo task"
           disabled={isAgentRunning}
         >

apps/app/src/components/example-layout/index.tsx

@@ -51,7 +51,7 @@ export function ExampleLayout({
       <div
         className={`h-full overflow-hidden ${
           mode === 'app'
-            ? 'w-2/3 max-lg:w-full border-l max-lg:border-l-0' // Full width on mobile
+            ? 'w-2/3 max-lg:w-full border-l dark:border-zinc-700 max-lg:border-l-0' // Full width on mobile
             : 'w-0 border-l-0'
         }`}
       >