feat: upgrade versions, add better UI, improve UX, use copilotkit sdk

Signed-off-by: Tyler Slaton <[email protected]>

Author: tylerslaton

agent/main.py

@@ -3,28 +3,20 @@
 It defines the workflow graph, state, tools, nodes and edges.
 """
 
-from typing import Any, List
+from typing import List
 
+from copilotkit import CopilotKitState
 from langchain.tools import tool
 from langchain_core.messages import BaseMessage, SystemMessage
 from langchain_core.runnables import RunnableConfig
 from langchain_openai import ChatOpenAI
-from langgraph.graph import END, MessagesState, StateGraph
+from langgraph.graph import END, StateGraph
 from langgraph.prebuilt import ToolNode
 from langgraph.types import Command
 
 
-class AgentState(MessagesState):
-    """
-    Here we define the state of the agent
-
-    In this instance, we're inheriting from CopilotKitState, which will bring in
-    the CopilotKitState fields. We're also adding a custom field, `language`,
-    which will be used to set the language of the agent.
-    """
-
+class AgentState(CopilotKitState):
     proverbs: List[str]
-    tools: List[Any]
     # your_custom_agent_state: str = ""
 
 
@@ -36,46 +28,21 @@ def get_weather(location: str):
     return f"The weather for {location} is 70 degrees."
 
 
-# @tool
-# def your_tool_here(your_arg: str):
-#     """Your tool description here."""
-#     print(f"Your tool logic here")
-#     return "Your tool response here."
-
-backend_tools = [
-    get_weather
-    # your_tool_here
-]
-
 # Extract tool names from backend_tools for comparison
+backend_tools = [get_weather]
 backend_tool_names = [tool.name for tool in backend_tools]
 
 
 async def chat_node(state: AgentState, config: RunnableConfig) -> Command[str]:
-    """
-    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="gpt-5-mini")
+    model = ChatOpenAI(model="gpt-4.1-mini")
 
     # 2. Bind the tools to the model
     model_with_tools = model.bind_tools(
         [
-            *state.get("tools", []),  # bind tools defined by ag-ui
+            *state.get("copilotkit", {}).get("actions", []),
             *backend_tools,
-            # your_tool_here
         ],
-        # 2.1 Disable parallel tool calls to avoid race conditions,
-        #     enable this for faster performance if you want to manage
-        #     the complexity of running tool calls in parallel.
         parallel_tool_calls=False,
     )
 

agent/pyproject.toml

@@ -4,13 +4,15 @@ version = "0.1.0"
 description = "A LangGraph agent"
 requires-python = ">=3.12"
 dependencies = [
-    "langchain==1.1.0",
-    "langgraph==1.0.4",
+    "langchain==1.2.0",
+    "langgraph==1.0.5",
     "langsmith>=0.4.49",
     "openai>=1.68.2,<2.0.0",
     "fastapi>=0.115.5,<1.0.0",
     "uvicorn>=0.29.0,<1.0.0",
     "python-dotenv>=1.0.0,<2.0.0",
-    "langgraph-cli[inmem]>=0.4.7",
+    "langgraph-cli[inmem]>=0.4.11",
     "langchain-openai>=1.1.0",
+    "copilotkit>=0.1.74",
+    "langgraph-api>=0.6.0",
 ]

agent/uv.lock

@@ -14,13 +14,12 @@
     "postinstall": "npm run install:agent"
   },
   "dependencies": {
-    "@copilotkit/react-core": "1.50.0",
-    "@copilotkit/react-ui": "1.50.0",
-    "@copilotkit/runtime": "1.50.0",
-    "next": "16.0.8",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "zod": "^3.24.4"
+    "@copilotkit/react-core": "1.50.1",
+    "@copilotkit/react-ui": "1.50.1",
+    "@copilotkit/runtime": "1.50.1",
+    "next": "16.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -31,7 +30,7 @@
     "@types/react-dom": "^19",
     "concurrently": "^9.1.2",
     "eslint": "^9",
-    "eslint-config-next": "16.0.7",
+    "eslint-config-next": "16.1.1",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

package.json

@@ -1,171 +1,146 @@
 "use client";
 
-import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
+import { ProverbsCard } from "@/components/proverbs";
+import { WeatherCard } from "@/components/weather";
+import { MoonCard } from "@/components/moon";
+import { AgentState } from "@/lib/types";
+import {
+  useCoAgent,
+  useFrontendTool,
+  useHumanInTheLoop,
+  useRenderToolCall,
+} from "@copilotkit/react-core";
 import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
 import { useState } from "react";
 
 export default function CopilotKitPage() {
   const [themeColor, setThemeColor] = useState("#6366f1");
 
-  // 🪁 Frontend Actions: https://docs.copilotkit.ai/guides/frontend-actions
-  useCopilotAction({
+  // 🪁 Frontend Actions: https://docs.copilotkit.ai/pydantic-ai/frontend-actions
+  useFrontendTool({
     name: "setThemeColor",
-    parameters: [{
-      name: "themeColor",
-      description: "The theme color to set. Make sure to pick nice colors.",
-      required: true, 
-    }],
+    parameters: [
+      {
+        name: "themeColor",
+        description: "The theme color to set. Make sure to pick nice colors.",
+        required: true,
+      },
+    ],
     handler({ themeColor }) {
       setThemeColor(themeColor);
     },
   });
 
   return (
-    <main style={{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties}>
-      <YourMainContent themeColor={themeColor} />
+    <main
+      style={
+        { "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
+      }
+    >
       <CopilotSidebar
+        disableSystemMessage={true}
         clickOutsideToClose={false}
-        defaultOpen={true}
         labels={{
           title: "Popup Assistant",
-          initial: "👋 Hi, there! You're chatting with an agent. This agent comes with a few tools to get you started.\n\nFor example you can try:\n- **Frontend Tools**: \"Set the theme to orange\"\n- **Shared State**: \"Write a proverb about AI\"\n- **Generative UI**: \"Get the weather in SF\"\n\nAs you interact with the agent, you'll see the UI update in real-time to reflect the agent's **state**, **tool calls**, and **progress**."
+          initial: "👋 Hi, there! You're chatting with an agent.",
         }}
-      />
+        suggestions={[
+          {
+            title: "Generative UI",
+            message: "Get the weather in San Francisco.",
+          },
+          {
+            title: "Frontend Tools",
+            message: "Set the theme to green.",
+          },
+          {
+            title: "Human In the Loop",
+            message: "Please go to the moon.",
+          },
+          {
+            title: "Write Agent State",
+            message: "Add a proverb about AI.",
+          },
+          {
+            title: "Update Agent State",
+            message:
+              "Please remove 1 random proverb from the list if there are any.",
+          },
+          {
+            title: "Read Agent State",
+            message: "What are the proverbs?",
+          },
+        ]}
+      >
+        <YourMainContent themeColor={themeColor} />
+      </CopilotSidebar>
     </main>
   );
 }
 
-// State of the agent, make sure this aligns with your agent's state.
-type AgentState = {
-  proverbs: string[];
-}
-
 function YourMainContent({ themeColor }: { themeColor: string }) {
-  // 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state
+  // 🪁 Shared State: https://docs.copilotkit.ai/pydantic-ai/shared-state
   const { state, setState } = useCoAgent<AgentState>({
     name: "sample_agent",
     initialState: {
       proverbs: [
         "CopilotKit may be new, but its the best thing since sliced bread.",
       ],
     },
-  })
+  });
 
   // 🪁 Frontend Actions: https://docs.copilotkit.ai/coagents/frontend-actions
-  useCopilotAction({
-    name: "addProverb",
-    parameters: [{
-      name: "proverb",
-      description: "The proverb to add. Make it witty, short and concise.",
-      required: true,
-    }],
-    handler: ({ proverb }) => {
+  useFrontendTool({
+    name: "updateProverbs",
+    parameters: [
+      {
+        name: "proverbs",
+        description: "What the current list of proverbs should be updated to",
+        type: "string[]",
+        required: true,
+      },
+    ],
+    handler: ({ proverbs }) => {
       setState({
         ...state,
-        proverbs: [...(state.proverbs || []), proverb],
+        proverbs: proverbs,
       });
     },
   });
 
-  //🪁 Generative UI: https://docs.copilotkit.ai/coagents/generative-ui
-  useCopilotAction({
-    name: "get_weather",
-    description: "Get the weather for a given location.",
-    available: "disabled",
-    parameters: [
-      { name: "location", type: "string", required: true },
-    ],
-    render: ({ args }) => {
-      return <WeatherCard location={args.location} themeColor={themeColor} />
+  //🪁 Generative UI: https://docs.copilotkit.ai/pydantic-ai/generative-ui
+  useRenderToolCall(
+    {
+      name: "get_weather",
+      description: "Get the weather for a given location.",
+      parameters: [{ name: "location", type: "string", required: true }],
+      render: ({ args }) => {
+        return <WeatherCard location={args.location} themeColor={themeColor} />;
+      },
     },
-  });
-
-  return (
-    <div
-      style={{ backgroundColor: themeColor }}
-      className="h-screen w-screen flex justify-center items-center flex-col transition-colors duration-300"
-    >
-      <div className="bg-white/20 backdrop-blur-md p-8 rounded-2xl shadow-xl max-w-2xl w-full">
-        <h1 className="text-4xl font-bold text-white mb-2 text-center">Proverbs</h1>
-        <p className="text-gray-200 text-center italic mb-6">This is a demonstrative page, but it could be anything you want! 🪁</p>
-        <hr className="border-white/20 my-6" />
-        <div className="flex flex-col gap-3">
-          {state.proverbs?.map((proverb, index) => (
-            <div 
-              key={index} 
-              className="bg-white/15 p-4 rounded-xl text-white relative group hover:bg-white/20 transition-all"
-            >
-              <p className="pr-8">{proverb}</p>
-              <button 
-                onClick={() => setState({
-                  ...state,
-                  proverbs: (state.proverbs || []).filter((_, i) => i !== index),
-                })}
-                className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity 
-                  bg-red-500 hover:bg-red-600 text-white rounded-full h-6 w-6 flex items-center justify-center"
-              >
-                ✕
-              </button>
-            </div>
-          ))}
-        </div>
-        {state.proverbs?.length === 0 && <p className="text-center text-white/80 italic my-8">
-          No proverbs yet. Ask the assistant to add some!
-        </p>}
-      </div>
-    </div>
+    [themeColor],
   );
-}
 
-// Simple sun icon for the weather card
-function SunIcon() {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-14 h-14 text-yellow-200">
-      <circle cx="12" cy="12" r="5" />
-      <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" strokeWidth="2" stroke="currentColor" />
-    </svg>
+  // 🪁 Human In the Loop: https://docs.copilotkit.ai/pydantic-ai/human-in-the-loop
+  useHumanInTheLoop(
+    {
+      name: "go_to_moon",
+      description: "Go to the moon on request.",
+      render: ({ respond, status }) => {
+        return (
+          <MoonCard themeColor={themeColor} status={status} respond={respond} />
+        );
+      },
+    },
+    [themeColor],
   );
-}
 
-// Weather card component where the location and themeColor are based on what the agent
-// sets via tool calls.
-function WeatherCard({ location, themeColor }: { location?: string, themeColor: string }) {
   return (
     <div
-    style={{ backgroundColor: themeColor }}
-    className="rounded-xl shadow-xl mt-6 mb-4 max-w-md w-full"
-  >
-    <div className="bg-white/20 p-4 w-full">
-      <div className="flex items-center justify-between">
-        <div>
-          <h3 className="text-xl font-bold text-white capitalize">{location}</h3>
-          <p className="text-white">Current Weather</p>
-        </div>
-        <SunIcon />
-      </div>
-      
-      <div className="mt-4 flex items-end justify-between">
-        <div className="text-3xl font-bold text-white">70°</div>
-        <div className="text-sm text-white">Clear skies</div>
-      </div>
-      
-      <div className="mt-4 pt-4 border-t border-white">
-        <div className="grid grid-cols-3 gap-2 text-center">
-          <div>
-            <p className="text-white text-xs">Humidity</p>
-            <p className="text-white font-medium">45%</p>
-          </div>
-          <div>
-            <p className="text-white text-xs">Wind</p>
-            <p className="text-white font-medium">5 mph</p>
-          </div>
-          <div>
-            <p className="text-white text-xs">Feels Like</p>
-            <p className="text-white font-medium">72°</p>
-          </div>
-        </div>
-      </div>
+      style={{ backgroundColor: themeColor }}
+      className="h-screen flex justify-center items-center flex-col transition-colors duration-300"
+    >
+      <ProverbsCard state={state} setState={setState} />
     </div>
-  </div>
   );
 }