integrate vnext chat

Author: mme

apps/dojo/package.json

@@ -33,6 +33,8 @@
     "@copilotkit/runtime": "1.10.6",
     "@copilotkit/runtime-client-gql": "1.10.6",
     "@copilotkit/shared": "1.10.6",
+    "@copilotkitnext/react": "0.0.19-alpha.0",
+    "@copilotkitnext/runtime": "0.0.19-alpha.0",
     "@mastra/client-js": "^0.15.2",
     "@mastra/core": "^0.20.2",
     "@mastra/dynamodb": "^0.15.6",

apps/dojo/src/app/[integrationId]/feature/vnext_chat/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import React from "react";
+import "@copilotkitnext/react/styles.css";
+import { CopilotChat, CopilotKitProvider } from "@copilotkitnext/react";
+
+export const dynamic = "force-dynamic";
+
+interface PageProps {
+  params: Promise<{
+    integrationId: string;
+  }>;
+}
+
+export default function Page({ params }: PageProps) {
+  const { integrationId } = React.use(params);
+
+  return (
+    <CopilotKitProvider
+      runtimeUrl={`/api/copilotkitnext/${integrationId}`}
+      showDevConsole="auto"
+    >
+      <main
+        className="flex min-h-screen flex-1 flex-col overflow-hidden"
+        style={{ minHeight: "100dvh" }}
+      >
+        <Chat threadId={`${integrationId}-vnext_chat`} />
+      </main>
+    </CopilotKitProvider>
+  );
+}
+
+function Chat({ threadId }: { threadId: string }) {
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <CopilotChat style={{ flex: 1, minHeight: "100%" }} threadId={threadId} />
+    </div>
+  );
+}

apps/dojo/src/app/api/copilotkit/[integrationId]/route.ts

@@ -3,17 +3,18 @@ import {
   ExperimentalEmptyAdapter,
   copilotRuntimeNextJSAppRouterEndpoint,
 } from "@copilotkit/runtime";
-import { agentsIntegrations } from "@/agents";
-
 import { NextRequest } from "next/server";
 
+import { agentsIntegrations } from "@/agents";
+
 export async function POST(request: NextRequest) {
   const integrationId = request.url.split("/").pop();
 
   const integration = agentsIntegrations.find((i) => i.id === integrationId);
   if (!integration) {
     return new Response("Integration not found", { status: 404 });
   }
+
   const agents = await integration.agents();
   const runtime = new CopilotRuntime({
     // @ts-ignore for now
@@ -27,3 +28,4 @@ export async function POST(request: NextRequest) {
 
   return handleRequest(request);
 }
+

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

@@ -0,0 +1,22 @@
+import {
+  CopilotRuntime,
+  InMemoryAgentRunner,
+  createCopilotEndpoint,
+} from "@copilotkitnext/runtime";
+import { handle } from "hono/vercel";
+
+const runtime = new CopilotRuntime({
+  agents: {
+    default: null as any,
+  },
+  runner: new InMemoryAgentRunner(),
+});
+
+const app = createCopilotEndpoint({
+  runtime,
+  basePath: "/api/copilotkit",
+});
+
+export const GET = handle(app);
+export const POST = handle(app);
+

apps/dojo/src/app/api/copilotkitnext/[integrationId]/[[...slug]]/route.ts

@@ -0,0 +1,41 @@
+import {
+  CopilotRuntime,
+  InMemoryAgentRunner,
+  createCopilotEndpoint,
+} from "@copilotkitnext/runtime";
+import { handle } from "hono/vercel";
+import type { NextRequest } from "next/server";
+
+type RouteParams = {
+  params: {
+    integrationId: string;
+    slug?: string[];
+  };
+};
+
+function createHandler(integrationId: string) {
+  const runtime = new CopilotRuntime({
+    agents: {
+      default: null as any,
+    },
+    runner: new InMemoryAgentRunner(),
+  });
+
+  const app = createCopilotEndpoint({
+    runtime,
+    basePath: `/api/copilotkitnext/${integrationId}`,
+  });
+
+  return handle(app);
+}
+
+export function GET(request: NextRequest, context: RouteParams) {
+  const handler = createHandler(context.params.integrationId);
+  return handler(request);
+}
+
+export function POST(request: NextRequest, context: RouteParams) {
+  const handler = createHandler(context.params.integrationId);
+  return handler(request);
+}
+

apps/dojo/src/config.ts

@@ -32,13 +32,15 @@ export const featureConfig: FeatureConfig[] = [
   createFeatureConfig({
     id: "human_in_the_loop",
     name: "Human in the loop",
-    description: "Plan a task together and direct the Copilot to take the right steps",
+    description:
+      "Plan a task together and direct the Copilot to take the right steps",
     tags: ["HITL", "Interactivity"],
   }),
   createFeatureConfig({
     id: "agentic_generative_ui",
     name: "Agentic Generative UI",
-    description: "Assign a long running task to your Copilot and see how it performs!",
+    description:
+      "Assign a long running task to your Copilot and see how it performs!",
     tags: ["Generative ui (agent)", "Long running task"],
   }),
   createFeatureConfig({
@@ -56,7 +58,8 @@ export const featureConfig: FeatureConfig[] = [
   createFeatureConfig({
     id: "predictive_state_updates",
     name: "Predictive State Updates",
-    description: "Use collaboration to edit a document in real time with your Copilot",
+    description:
+      "Use collaboration to edit a document in real time with your Copilot",
     tags: ["State", "Streaming", "Tools"],
   }),
   createFeatureConfig({
@@ -68,7 +71,8 @@ export const featureConfig: FeatureConfig[] = [
   createFeatureConfig({
     id: "subgraphs",
     name: "Subgraphs",
-    description: "Have your tasks performed by multiple agents, working together",
+    description:
+      "Have your tasks performed by multiple agents, working together",
     tags: ["Chat", "Multi-agent architecture", "Streaming", "Subgraphs"],
   }),
   createFeatureConfig({
@@ -77,6 +81,12 @@ export const featureConfig: FeatureConfig[] = [
     description: "Chat with your Copilot and call frontend tools",
     tags: ["Chat", "Tools", "Streaming"],
   }),
+  createFeatureConfig({
+    id: "vnext_chat",
+    name: "VNext Chat",
+    description: "Chat based on CopilotKit vnext",
+    tags: ["Chat", "VNext", "Streaming"],
+  }),
 ];
 
 export default featureConfig;

apps/dojo/src/menu.ts

@@ -47,7 +47,11 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   {
     id: "mastra",
     name: "Mastra",
-    features: ["agentic_chat", "backend_tool_rendering", "tool_based_generative_ui"],
+    features: [
+      "agentic_chat",
+      "backend_tool_rendering",
+      "tool_based_generative_ui",
+    ],
   },
   {
     id: "mastra-agent-local",
@@ -60,15 +64,15 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
     ],
   },
   {
-    id: 'spring-ai',
-    name: 'Spring AI',
+    id: "spring-ai",
+    name: "Spring AI",
     features: [
-      'agentic_chat', 
-      'shared_state', 
-      'tool_based_generative_ui', 
-      'human_in_the_loop', 
-      'agentic_generative_ui'
-    ]
+      "agentic_chat",
+      "shared_state",
+      "tool_based_generative_ui",
+      "human_in_the_loop",
+      "agentic_generative_ui",
+    ],
   },
   {
     id: "pydantic-ai",
@@ -99,7 +103,11 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   {
     id: "agno",
     name: "Agno",
-    features: ["agentic_chat", "backend_tool_rendering", "tool_based_generative_ui"],
+    features: [
+      "agentic_chat",
+      "backend_tool_rendering",
+      "tool_based_generative_ui",
+    ],
   },
   {
     id: "llama-index",
@@ -128,7 +136,7 @@ export const menuIntegrations: MenuIntegrationConfig[] = [
   {
     id: "a2a-basic",
     name: "A2A (Direct)",
-    features: ["agentic_chat"],
+    features: ["vnext_chat"],
   },
   // Disabled until we can support Vercel AI SDK v5
   // {

apps/dojo/src/types/integration.ts

@@ -10,7 +10,8 @@ export type Feature =
   | "backend_tool_rendering"
   | "agentic_chat_reasoning"
   | "subgraphs"
-  | "a2a_chat";
+  | "a2a_chat"
+  | "vnext_chat";
 
 export interface MenuIntegrationConfig {
   id: string;