feat: support copilotkit vnext

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

Author: tylerslaton

agent/poetry.lock

@@ -9,7 +9,7 @@ package-mode = false
 
 [tool.poetry.dependencies]
 python = ">=3.10,<3.13"
-copilotkit = "0.1.55"
+ag-ui-langgraph = "0.0.18a0"
 langchain = "0.3.26"
 langchain-openai = "0.3.28"
 langgraph = "0.4.10"

agent/pyproject.toml

@@ -5,26 +5,27 @@
 
 import os
 from dotenv import load_dotenv
-load_dotenv() # pylint: disable=wrong-import-position
 
 from fastapi import FastAPI
 import uvicorn
-from copilotkit import LangGraphAGUIAgent
 from sample_agent.agent import graph
-from ag_ui_langgraph import add_langgraph_fastapi_endpoint
+from ag_ui_langgraph import add_langgraph_fastapi_endpoint, LangGraphAgent
+
+_ = load_dotenv()  # pylint: disable=wrong-import-position
 
 app = FastAPI()
 
 add_langgraph_fastapi_endpoint(
     app=app,
-    agent=LangGraphAGUIAgent(
+    agent=LangGraphAgent(
         name="sample_agent",
         description="An example agent to use as a starting point for your own agent.",
-        graph=graph
+        graph=graph,
     ),
-    path="/"
+    path="/",
 )
 
+
 def main():
     """Run the uvicorn server."""
     port = int(os.getenv("PORT", "8123"))

agent/sample_agent/demo.py

@@ -13,11 +13,12 @@
     "install:agent": "cd agent && poetry install"
   },
   "dependencies": {
-    "@ag-ui/langgraph": "0.0.6",
-    "@ai-sdk/openai": "^1.3.22",
-    "@copilotkit/react-core": "1.9.2",
-    "@copilotkit/react-ui": "1.9.2",
-    "@copilotkit/runtime": "1.9.2",
+    "@ag-ui/core": "0.0.40-alpha.7",
+    "@ag-ui/langgraph": "0.0.19-alpha.1",
+    "@copilotkitnext/core": "0.0.19-threads-and-attachements.1",
+    "@copilotkitnext/react": "0.0.19-threads-and-attachements.1",
+    "@copilotkitnext/runtime": "0.0.19-threads-and-attachements.1",
+    "hono": "^4.10.1",
     "next": "15.3.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

package.json

@@ -0,0 +1,26 @@
+import { LangGraphHttpAgent } from "@ag-ui/langgraph";
+import {
+  CopilotRuntime,
+  createCopilotEndpoint,
+  AgentRunner,
+} from "@copilotkitnext/runtime";
+import { handle } from "hono/vercel";
+
+const runtime = new CopilotRuntime({
+  agents: {
+    default: new LangGraphHttpAgent({
+      url: process.env.AGENT_URL || "http://localhost:8123",
+    }),
+    foo: new LangGraphHttpAgent({
+      url: process.env.AGENT_URL || "http://localhost:8123",
+    }),
+  },
+});
+
+const app = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+export const GET = handle(app);
+export const POST = handle(app);

src/app/api/copilotkit/[...slug]/route.ts

@@ -0,0 +1,84 @@
+"use client";
+
+// Weather card component where the location and themeColor are based on what the agent
+// sets via tool calls.
+
+import { defineToolCallRenderer } from "@copilotkitnext/react";
+
+// @ts-ignore
+export const weatherToolRenderer = defineToolCallRenderer({
+  name: "get_weather",
+  render: ({ args }) => {
+    const { location } = args;
+    const themeColor = "blue";
+    return <WeatherCard location={location} themeColor={themeColor} />;
+  },
+});
+
+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>
+      </div>
+    </div>
+  );
+}
+
+// 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>
+  );
+}

src/app/api/copilotkit/route.ts

@@ -1,8 +1,9 @@
 import type { Metadata } from "next";
 
-import { CopilotKit } from "@copilotkit/react-core";
+import { CopilotKitProvider } from "@copilotkitnext/react";
 import "./globals.css";
-import "@copilotkit/react-ui/styles.css";
+import "@copilotkitnext/react/styles.css";
+import { weatherToolRenderer } from "./components/gen-ui/weather";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -17,9 +18,12 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={"antialiased"}>
-        <CopilotKit runtimeUrl="/api/copilotkit" agent="sample_agent">
+        <CopilotKitProvider
+          renderToolCalls={[weatherToolRenderer]}
+          runtimeUrl="/api/copilotkit"
+        >
           {children}
-        </CopilotKit>
+        </CopilotKitProvider>
       </body>
     </html>
   );