add multi-agent support with model selector (#1498)

examples/coagents-research-canvas/ui/src/app/api/copilotkit/route.ts

@@ -2,60 +2,49 @@ import {
   CopilotRuntime,
   OpenAIAdapter,
   copilotRuntimeNextJSAppRouterEndpoint,
-  langGraphPlatformEndpoint, copilotKitEndpoint,
+  langGraphPlatformEndpoint,
+  copilotKitEndpoint,
 } from "@copilotkit/runtime";
 import OpenAI from "openai";
 import { NextRequest } from "next/server";
 
 const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
 const llmAdapter = new OpenAIAdapter({ openai } as any);
-const langsmithApiKey = process.env.LANGSMITH_API_KEY as string
+const langsmithApiKey = process.env.LANGSMITH_API_KEY as string;
 
 export const POST = async (req: NextRequest) => {
-  const searchParams = req.nextUrl.searchParams
-  const deploymentUrl = searchParams.get('lgcDeploymentUrl') || process.env.LGC_DEPLOYMENT_URL;
+  const searchParams = req.nextUrl.searchParams;
+  const deploymentUrl =
+    searchParams.get("lgcDeploymentUrl") || process.env.LGC_DEPLOYMENT_URL;
 
-  // If you are running the agent-js uncomment line 20-34 and comment out line 35-55
+  const isCrewAi = searchParams.get("coAgentsModel") === "crewai";
 
-//const runtime = new CopilotRuntime({
- // remoteEndpoints: [
-    // Uncomment this if you want to use LangGraph JS, make sure to
-    // remove the remote action url below too.
-    //
-    // langGraphPlatformEndpoint({
-    //   deploymentUrl: "http://localhost:8123",
-    //   langsmithApiKey: process.env.LANGSMITH_API_KEY || "", // only used in LangGraph Platform deployments
-    //   agents: [{
-    //       name: "research_agentt",
-    //       description: "Research agent"
-    //   }]
-    // }),
- // ],
-//});
-  
-  const remoteEndpoint = deploymentUrl ? langGraphPlatformEndpoint({
-    deploymentUrl,
-    langsmithApiKey,
-    agents: [
-      {
-        name: "research_agent",
-        description: "Research agent",
-      },
-      {
-        name: "research_agent_google_genai",
-        description: "Research agent",
-        assistantId: "9dc0ca3b-1aa6-547d-93f0-e21597d2011c",
-      },
-    ],
-  }) : copilotKitEndpoint({
-    url: process.env.REMOTE_ACTION_URL || "http://localhost:8000/copilotkit",
-  })
+  const remoteEndpoint =
+    deploymentUrl && !isCrewAi
+      ? langGraphPlatformEndpoint({
+          deploymentUrl,
+          langsmithApiKey,
+          agents: [
+            {
+              name: "research_agent",
+              description: "Research agent",
+            },
+            {
+              name: "research_agent_google_genai",
+              description: "Research agent",
+              assistantId: "9dc0ca3b-1aa6-547d-93f0-e21597d2011c",
+            },
+          ],
+        })
+      : copilotKitEndpoint({
+          url:
+            process.env.REMOTE_ACTION_URL || "http://localhost:8000/copilotkit",
+        });
 
   const runtime = new CopilotRuntime({
     remoteEndpoints: [remoteEndpoint],
   });
 
-
   const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
     runtime,
     serviceAdapter: llmAdapter,

examples/coagents-research-canvas/ui/src/app/page.tsx

@@ -20,9 +20,13 @@ export default function ModelSelectorWrapper() {
 function Home() {
   const { agent, lgcDeploymentUrl } = useModelSelectorContext();
 
+  // This logic is implemented to demonstrate multi-agent frameworks in this demo project.
+  // There are cleaner ways to handle this in a production environment.
   const runtimeUrl = lgcDeploymentUrl
     ? `/api/copilotkit?lgcDeploymentUrl=${lgcDeploymentUrl}`
-    : "/api/copilotkit";
+    : `/api/copilotkit${
+        agent.includes("crewai") ? "?coAgentsModel=crewai" : ""
+      }`;
 
   return (
     <CopilotKit runtimeUrl={runtimeUrl} showDevConsole={false} agent={agent}>