github-featured/copilotkit--copilotkit
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity

fix(examples): migrate integrations from v1 to v2 API surface

Browse Source 
Migrate 15 example integrations from the v1 compatibility facade to
native v2 CopilotKit APIs. The v1 surface delegates to v2 internally
so this is an API surface change, not a functional one.

Key changes per integration:
- Import paths: @copilotkit/react-core -> react-core/v2,
  @copilotkit/runtime -> runtime/v2
- Hook renames: useCoAgent -> useAgent, useCopilotAction ->
  useFrontendTool, useRenderToolCall -> useRenderTool
- UI: CopilotSidebar from react-ui -> react-core/v2
- Styles: react-ui/styles.css -> react-core/v2/styles.css
- Runtime: copilotRuntimeNextJSAppRouterEndpoint ->
  createCopilotEndpoint + hono/vercel
- Removed @copilotkit/react-ui and @copilotkit/shared deps

Integrations migrated (v1 -> v2):
  a2a-middleware, adk, agno, crewai-crews, crewai-flows,
  langgraph-js, llamaindex, mastra, ms-agent-framework-dotnet,
  ms-agent-framework-python, pydantic-ai, strands-python

Mixed integrations cleaned up (stale deps removed):
  agent-spec, agentcore, langgraph-fastapi, langgraph-python,
  langgraph-python-threads
This commit is contained in:
Jordan Ritter
2026-04-30 23:32:08 -07:00
parent a30be17798
commit 23af69041c
62 changed files with 478 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/integrations/a2a-middleware/app/api/copilotkit/route.ts → examples/integrations/a2a-middleware/app/api/copilotkit/[[...slug]]/route.ts
+22 -26
View File
@@ -1,25 +1,13 @@
/**
* CopilotKit API Route with A2A Middleware
*
* This connects the frontend to multiple agents using two protocols:
* - AG-UI Protocol: Frontend ↔ Orchestrator (via CopilotKit)
* - A2A Protocol: Orchestrator ↔ Specialized Agents (Research, Analysis)
*
* The A2A middleware injects send_message_to_a2a_agent tool into the orchestrator,
* enabling seamless agent-to-agent communication without the orchestrator needing
* to understand A2A Protocol directly.
*/
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { A2AMiddlewareAgent } from "@ag-ui/a2a-middleware";
import { NextRequest } from "next/server";
import { handle } from "hono/vercel";
export async function POST(request: NextRequest) {
export async function POST(request: Request) {
const researchAgentUrl =
process.env.RESEARCH_AGENT_URL || "http://localhost:9001";
const analysisAgentUrl =
@@ -27,13 +15,10 @@ export async function POST(request: NextRequest) {
const orchestratorUrl =
process.env.ORCHESTRATOR_URL || "http://localhost:9000";
// Connect to orchestrator via AG-UI Protocol
const orchestrationAgent = new HttpAgent({
url: orchestratorUrl,
});
// A2A Middleware: Wraps orchestrator and injects send_message_to_a2a_agent tool
// This allows orchestrator to communicate with A2A agents transparently
const a2aMiddlewareAgent = new A2AMiddlewareAgent({
description:
"Research assistant with 2 specialized agents: Research (LangGraph) and Analysis (ADK)",
@@ -68,18 +53,29 @@ export async function POST(request: NextRequest) {
`,
});
// CopilotKit runtime connects frontend to agent system
const runtime = new CopilotRuntime({
agents: {
a2a_chat: a2aMiddlewareAgent, // Must match agent prop in <CopilotKit agent="a2a_chat">
a2a_chat: a2aMiddlewareAgent,
},
runner: new InMemoryAgentRunner(),
});
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
const app = createCopilotEndpoint({
runtime,
serviceAdapter: new ExperimentalEmptyAdapter(),
endpoint: "/api/copilotkit",
basePath: "/api/copilotkit",
});
return handleRequest(request);
return handle(app)(request);
}
export async function GET(request: Request) {
const runtime = new CopilotRuntime({
agents: {},
runner: new InMemoryAgentRunner(),
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
return handle(app)(request);
}
examples/integrations/a2a-middleware/app/layout.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import type { Metadata } from "next";
import { Plus_Jakarta_Sans, Spline_Sans_Mono } from "next/font/google";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
const plusJakartaSans = Plus_Jakarta_Sans({
variable: "--font-plus-jakarta-sans",
examples/integrations/a2a-middleware/components/chat.tsx
+7 -6
View File
@@ -8,11 +8,12 @@
import React, { useEffect } from "react";
import {
CopilotKit,
useCopilotChat,
useCopilotAction,
} from "@copilotkit/react-core";
import { CopilotChat } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";
useFrontendTool,
CopilotChat,
} from "@copilotkit/react-core/v2";
// NOTE: useCopilotChat has no v2 equivalent; kept on v1 import path
import { useCopilotChat } from "@copilotkit/react-core";
import "@copilotkit/react-core/v2/styles.css";
import { MessageToA2A } from "./a2a/MessageToA2A";
import { MessageFromA2A } from "./a2a/MessageFromA2A";
@@ -84,7 +85,7 @@ const ChatInner = ({ onResearchUpdate, onAnalysisUpdate }: ChatProps) => {
}, [visibleMessages, onResearchUpdate, onAnalysisUpdate]);
// Register action to render A2A message flow visualization
useCopilotAction({
useFrontendTool({
name: "send_message_to_a2a_agent",
description: "Sends a message to an A2A agent",
available: "frontend",
examples/integrations/a2a-middleware/package.json
+1 -1
View File
@@ -18,8 +18,8 @@
"@ag-ui/a2a-middleware": "0.0.2",
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "latest",
"@copilotkit/react-ui": "latest",
"@copilotkit/runtime": "latest",
"hono": "^4",
"next": "15.5.15",
"react": "^19.0.0",
"react-dom": "^19.0.0"
examples/integrations/adk/package.json
+2 -1
View File
@@ -15,8 +15,9 @@
"dependencies": {
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "1.56.4",
"@copilotkit/react-ui": "1.56.4",
"@copilotkit/runtime": "1.56.4",
"@hono/node-server": "^1",
"hono": "^4",
"next": "16.1.1",
"react": "^19.2.1",
"react-dom": "^19.2.1",
examples/integrations/adk/src/app/api/copilotkit/[[...slug]]/route.ts
+24
View File
@@ -0,0 +1,24 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { handle } from "hono/vercel";
const runtime = new CopilotRuntime({
agents: {
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
runner: new InMemoryAgentRunner(),
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/adk/src/app/api/copilotkit/route.ts
-33
View File
@@ -1,33 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the AG-UI client
// to setup the connection with the ADK agent.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/adk/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/adk/src/app/page.tsx
+14 -19
View File
@@ -4,14 +4,14 @@ import { ProverbsCard } from "@/components/proverbs";
import { WeatherCard } from "@/components/weather";
import { AgentState } from "@/lib/types";
import {
useCoAgent,
useDefaultTool,
useAgent,
useDefaultRenderTool,
useFrontendTool,
useHumanInTheLoop,
useRenderToolCall,
} from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { useState } from "react";
useRenderTool,
CopilotSidebar,
} from "@copilotkit/react-core/v2";
import React, { useState } from "react";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
@@ -34,7 +34,7 @@ export default function CopilotKitPage() {
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as React.CSSProperties
}
>
<CopilotSidebar
@@ -77,23 +77,18 @@ export default function CopilotKitPage() {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/adk/shared-state
const { state, setState } = useCoAgent<AgentState>({
name: "my_agent",
initialState: {
proverbs: [
"CopilotKit may be new, but its the best thing since sliced bread.",
],
},
const { agent } = useAgent({
agentId: "my_agent",
});
const state = (agent.state ?? { proverbs: ["CopilotKit may be new, but its the best thing since sliced bread."] }) as AgentState;
const setState = (newState: AgentState) => agent.setState(newState);
//🪁 Generative UI: https://docs.copilotkit.ai/adk/generative-ui
useRenderToolCall(
useRenderTool(
{
name: "get_weather",
description: "Get the weather for a given location.",
parameters: [{ name: "location", type: "string", required: true }],
render: ({ args, result }) => {
return <WeatherCard location={args.location} themeColor={themeColor} />;
render: ({ parameters, result }) => {
return <WeatherCard location={(parameters as any)?.location} themeColor={themeColor} />;
},
},
[themeColor],
examples/integrations/agent-spec/package.json
-3
View File
@@ -23,10 +23,7 @@
"@ag-ui/proto": "^0.0.46",
"@copilotkit/a2ui-renderer": "1.57.1",
"@copilotkit/react-core": "1.57.1",
"@copilotkit/react-ui": "1.57.1",
"@copilotkit/runtime": "1.57.1",
"@copilotkit/runtime-client-gql": "1.57.1",
"@copilotkit/shared": "1.57.1",
"hono": "^4.11.4",
"next": "16.0.10",
"react": "^19.2.3",
examples/integrations/agentcore/frontend/package.json
-1
View File
@@ -13,7 +13,6 @@
},
"dependencies": {
"@copilotkit/react-core": "^1.54.0",
"@copilotkit/react-ui": "^1.54.0",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-progress": "^1.1.7",
examples/integrations/agno/package.json
+2 -1
View File
@@ -14,8 +14,9 @@
"dependencies": {
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"@hono/node-server": "^1",
"hono": "^4",
"next": "16.0.7",
"react": "^19.2.0",
"react-dom": "^19.2.0",
examples/integrations/agno/src/app/api/copilotkit/[[...slug]]/route.ts
+24
View File
@@ -0,0 +1,24 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { handle } from "hono/vercel";
const runtime = new CopilotRuntime({
agents: {
agno_agent: new HttpAgent({
url: (process.env.AGENT_URL || "http://localhost:8000") + "/agui",
}),
},
runner: new InMemoryAgentRunner(),
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/agno/src/app/api/copilotkit/route.ts
-34
View File
@@ -1,34 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the Agno AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
agno_agent: new HttpAgent({
url: (process.env.AGENT_URL || "http://localhost:8000") + "/agui",
}),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/agno/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/agno/src/app/page.tsx
+8 -15
View File
@@ -1,12 +1,12 @@
"use client";
import {
useDefaultTool,
useDefaultRenderTool,
useFrontendTool,
useRenderToolCall,
} from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { useState } from "react";
useRenderTool,
CopilotSidebar,
} from "@copilotkit/react-core/v2";
import React, { useState } from "react";
import { DefaultToolComponent } from "@/components/default-tool-ui";
import { WeatherCard } from "@/components/weather";
@@ -31,7 +31,7 @@ export default function CopilotKitPage() {
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as React.CSSProperties
}
>
<CopilotSidebar
@@ -95,23 +95,16 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
});
//🪁 Generative UI: https://docs.copilotkit.ai/agno/generative-ui/backend-tools
useRenderToolCall(
useRenderTool(
{
name: "get_weather",
parameters: [
{
name: "location",
description: "The location to get the weather for.",
required: true,
},
],
render: (props) => <WeatherCard themeColor={themeColor} {...props} />,
},
[themeColor],
);
//🪁 Default Generative UI: https://docs.copilotkit.ai/agno/generative-ui/backend-tools
useDefaultTool(
useDefaultRenderTool(
{
render: (props) => (
<DefaultToolComponent themeColor={themeColor} {...props} />
examples/integrations/agno/src/components/default-tool-ui.tsx
+8 -5
View File
@@ -1,13 +1,16 @@
import { CatchAllActionRenderProps } from "@copilotkit/react-core";
import { useState } from "react";
export type BackendToolsProps = CatchAllActionRenderProps & {
export type BackendToolsProps = {
name: string;
parameters: unknown;
status: "inProgress" | "executing" | "complete";
result: string | undefined;
themeColor: string;
};
export function DefaultToolComponent({
name,
args,
parameters,
status,
result,
themeColor,
@@ -85,7 +88,7 @@ export function DefaultToolComponent({
</div>
{/* Arguments */}
{args && Object.keys(args).length > 0 && (
{parameters && typeof parameters === "object" && Object.keys(parameters as Record<string, unknown>).length > 0 && (
<div className="mb-3">
<button
onClick={() => setShowArgs(!showArgs)}
@@ -108,7 +111,7 @@ export function DefaultToolComponent({
</button>
{showArgs && (
<div className="bg-black/20 rounded p-2 space-y-1">
{Object.entries(args).map(([key, value]) => (
{Object.entries(parameters as Record<string, unknown>).map(([key, value]) => (
<div key={key} className="flex gap-2">
<span className="text-white/50 text-xs">{key}:</span>
<span className="text-white/80 text-xs font-mono">
examples/integrations/crewai-crews/package.json
+1 -1
View File
@@ -15,8 +15,8 @@
"dependencies": {
"@ag-ui/crewai": "^0.0.2",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"hono": "^4",
"next": "^15.5.15",
"react": "^19.0.0",
"react-dom": "^19.0.0",
examples/integrations/crewai-crews/src/app/api/copilotkit/[[...slug]]/route.ts
+27
View File
@@ -0,0 +1,27 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { CrewAIAgent } from "@ag-ui/crewai";
import { handle } from "hono/vercel";
// 1. Create the CopilotRuntime instance and utilize the CrewAI AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
starterAgent: new CrewAIAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
runner: new InMemoryAgentRunner(),
});
// 2. Build a Hono app that handles the CopilotKit runtime requests.
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/crewai-crews/src/app/api/copilotkit/route.ts
-32
View File
@@ -1,32 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import { CrewAIAgent } from "@ag-ui/crewai";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the HttpAgent AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
starterAgent: new CrewAIAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/crewai-crews/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/crewai-crews/src/app/page.tsx
+7 -8
View File
@@ -1,15 +1,14 @@
"use client";
import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { use, useEffect, useState } from "react";
import { useAgent, CopilotSidebar } from "@copilotkit/react-core/v2";
import { CSSProperties, useEffect, useState } from "react";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as CSSProperties
}
>
<YourMainContent themeColor={themeColor} />
@@ -27,13 +26,13 @@ export default function CopilotKitPage() {
}
function YourMainContent({ themeColor }: { themeColor: string }) {
const { state, setState } = useCoAgent({
name: "starterAgent",
const { agent } = useAgent({
agentId: "starterAgent",
});
useEffect(() => {
console.log(state);
}, [state]);
console.log(agent.state);
}, [agent.state]);
return (
<div
examples/integrations/crewai-flows/package.json
+2 -1
View File
@@ -14,8 +14,9 @@
"dependencies": {
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"hono": "^4",
"zod": "^3.24.4",
"next": "16.0.8",
"react": "^19.2.1",
"react-dom": "^19.2.1"
examples/integrations/crewai-flows/src/app/api/copilotkit/[[...slug]]/route.ts
+25
View File
@@ -0,0 +1,25 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { handle } from "hono/vercel";
// 1. Create the CopilotRuntime instance and utilize the HttpAgent AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
sample_agent: new HttpAgent({ url: "http://localhost:8000/" }),
},
runner: new InMemoryAgentRunner(),
});
// 2. Build a Hono app that handles the CopilotKit runtime requests.
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/crewai-flows/src/app/api/copilotkit/route.ts
-30
View File
@@ -1,30 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import { HttpAgent } from "@ag-ui/client";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the HttpAgent AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
sample_agent: new HttpAgent({ url: "http://localhost:8000/" }),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/crewai-flows/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/crewai-flows/src/app/page.tsx
+52 -49
View File
@@ -1,23 +1,26 @@
"use client";
import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { useState } from "react";
import {
useAgent,
useFrontendTool,
useRenderTool,
CopilotSidebar,
} from "@copilotkit/react-core/v2";
import { CSSProperties, useState } from "react";
import { z } from "zod";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
// 🪁 Frontend Actions: https://docs.copilotkit.ai/guides/frontend-actions
useCopilotAction({
// 🪁 Frontend Tools: https://docs.copilotkit.ai/guides/frontend-actions
useFrontendTool({
name: "setThemeColor",
parameters: [
{
name: "themeColor",
description: "The theme color to set. Make sure to pick nice colors.",
required: true,
},
],
handler({ themeColor }) {
parameters: z.object({
themeColor: z
.string()
.describe("The theme color to set. Make sure to pick nice colors."),
}),
handler: async ({ themeColor }) => {
setThemeColor(themeColor);
},
});
@@ -25,7 +28,7 @@ export default function CopilotKitPage() {
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as CSSProperties
}
>
<CopilotSidebar
@@ -72,43 +75,41 @@ type AgentState = {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state
const { state, setState } = useCoAgent<AgentState>({
name: "sample_agent",
initialState: {
proverbs: [
"CopilotKit may be new, but its the best thing since sliced bread.",
],
},
const { agent } = useAgent({
agentId: "sample_agent",
});
// 🪁 Frontend Actions: https://docs.copilotkit.ai/coagents/frontend-actions
useCopilotAction({
name: "updateProverb",
parameters: [
{
name: "proverbs",
type: "string[]",
description:
"The proverbs to be committed into state. Make them witty, short and concise.",
required: true,
// 🪁 Frontend Tools: https://docs.copilotkit.ai/coagents/frontend-actions
useFrontendTool(
{
name: "updateProverb",
parameters: z.object({
proverbs: z
.array(z.string())
.describe(
"The proverbs to be committed into state. Make them witty, short and concise.",
),
}),
handler: async ({ proverbs }) => {
agent.setState({
...agent.state,
proverbs: [...proverbs],
});
},
],
handler: ({ proverbs }) => {
setState({
...state,
proverbs: [...proverbs],
});
},
});
[agent],
);
//🪁 Generative UI: https://docs.copilotkit.ai/coagents/generative-ui
useCopilotAction({
useRenderTool({
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} />;
parameters: z.object({
location: z.string(),
}),
render: ({ parameters }) => {
return (
<WeatherCard location={parameters.location} themeColor={themeColor} />
);
},
});
@@ -126,7 +127,7 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
</p>
<hr className="border-white/20 my-6" />
<div className="flex flex-col gap-3">
{state.proverbs?.map((proverb, index) => (
{agent.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"
@@ -134,9 +135,11 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
<p className="pr-8">{proverb}</p>
<button
onClick={() =>
setState({
...state,
proverbs: state.proverbs?.filter((_, i) => i !== index),
agent.setState({
...agent.state,
proverbs: agent.state?.proverbs?.filter(
(_: string, i: number) => i !== index,
),
})
}
className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 transition-opacity
@@ -147,7 +150,7 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
</div>
))}
</div>
{state.proverbs?.length === 0 && (
{agent.state?.proverbs?.length === 0 && (
<p className="text-center text-white/80 italic my-8">
No proverbs yet. Ask the assistant to add some!
</p>
examples/integrations/langgraph-fastapi/docker-route-override.ts
+15 -14
View File
@@ -6,11 +6,11 @@
*/
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
InMemoryAgentRunner,
createCopilotEndpoint,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import type { NextRequest } from "next/server";
import { handle } from "hono/vercel";
const agentUrl = process.env.AGENT_URL || "http://localhost:8123";
@@ -18,14 +18,15 @@ const defaultAgent = new HttpAgent({
url: `${agentUrl}/`,
});
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
endpoint: "/api/copilotkit",
serviceAdapter: new ExperimentalEmptyAdapter(),
runtime: new CopilotRuntime({
agents: { default: defaultAgent },
}),
});
const runtime = new CopilotRuntime({
agents: { default: defaultAgent },
runner: new InMemoryAgentRunner(),
});
return handleRequest(req);
};
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/langgraph-fastapi/package.json
-2
View File
@@ -15,9 +15,7 @@
"dependencies": {
"@copilotkit/a2ui-renderer": "1.56.5",
"@copilotkit/react-core": "1.56.5",
"@copilotkit/react-ui": "1.56.5",
"@copilotkit/runtime": "1.56.5",
"@copilotkit/shared": "1.56.5",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-separator": "^1.1.8",
examples/integrations/langgraph-js/app/api/copilotkit/[[...slug]]/route.ts
+32
View File
@@ -0,0 +1,32 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { LangGraphAgent } from "@copilotkit/runtime/langgraph";
import { handle } from "hono/vercel";
// 1. Create the CopilotRuntime instance and utilize the LangGraph AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
starterAgent: new LangGraphAgent({
deploymentUrl:
process.env.AGENT_URL ||
process.env.LANGGRAPH_DEPLOYMENT_URL ||
"http://localhost:8123",
graphId: "starterAgent",
langsmithApiKey: process.env.LANGSMITH_API_KEY || "",
}),
},
runner: new InMemoryAgentRunner(),
});
// 2. Build a Hono app that handles the CopilotKit runtime requests.
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/langgraph-js/package.json
-2
View File
@@ -16,9 +16,7 @@
"dependencies": {
"@copilotkit/a2ui-renderer": "1.56.5",
"@copilotkit/react-core": "1.56.5",
"@copilotkit/react-ui": "1.56.5",
"@copilotkit/runtime": "1.56.5",
"@copilotkit/shared": "1.56.5",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-separator": "^1.1.8",
examples/integrations/langgraph-python-threads/apps/app/package.json
-1
View File
@@ -11,7 +11,6 @@
"@ag-ui/client": "0.0.52",
"@copilotkit/a2ui-renderer": "1.57.0",
"@copilotkit/react-core": "1.57.0",
"@copilotkit/react-ui": "1.57.0",
"@hono/node-server": "^1.19.14",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-label": "^2.1.8",
examples/integrations/langgraph-python-threads/apps/app/src/components/example-layout/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { ReactNode, useState } from "react";
import { ModeToggle } from "./mode-toggle";
import { useFrontendTool } from "@copilotkit/react-core";
import { useFrontendTool } from "@copilotkit/react-core/v2";
interface ExampleLayoutProps {
chatContent: ReactNode;
examples/integrations/langgraph-python/docker-route-override.ts
+15 -14
View File
@@ -6,11 +6,11 @@
*/
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
InMemoryAgentRunner,
createCopilotEndpoint,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import type { NextRequest } from "next/server";
import { handle } from "hono/vercel";
const agentUrl = process.env.AGENT_URL || "http://localhost:8123";
@@ -18,14 +18,15 @@ const defaultAgent = new HttpAgent({
url: `${agentUrl}/`,
});
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
endpoint: "/api/copilotkit",
serviceAdapter: new ExperimentalEmptyAdapter(),
runtime: new CopilotRuntime({
agents: { default: defaultAgent },
}),
});
const runtime = new CopilotRuntime({
agents: { default: defaultAgent },
runner: new InMemoryAgentRunner(),
});
return handleRequest(req);
};
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/langgraph-python/package.json
-2
View File
@@ -15,9 +15,7 @@
"dependencies": {
"@copilotkit/a2ui-renderer": "1.56.5",
"@copilotkit/react-core": "1.56.5",
"@copilotkit/react-ui": "1.56.5",
"@copilotkit/runtime": "1.56.5",
"@copilotkit/shared": "1.56.5",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-separator": "^1.1.8",
examples/integrations/langgraph-python/src/components/example-layout/index.tsx
+1 -1
View File
@@ -3,7 +3,7 @@
import type { ReactNode } from "react";
import { useState } from "react";
import { ModeToggle } from "./mode-toggle";
import { useFrontendTool } from "@copilotkit/react-core";
import { useFrontendTool } from "@copilotkit/react-core/v2";
interface ExampleLayoutProps {
chatContent: ReactNode;
examples/integrations/llamaindex/package.json
+2 -1
View File
@@ -16,8 +16,9 @@
"dependencies": {
"@ag-ui/llamaindex": "0.1.5",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"@hono/node-server": "^1",
"hono": "^4",
"next": "16.0.8",
"react": "^19.2.1",
"react-dom": "^19.2.1",
examples/integrations/llamaindex/src/app/api/copilotkit/[[...slug]]/route.ts
+24
View File
@@ -0,0 +1,24 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { LlamaIndexAgent } from "@ag-ui/llamaindex";
import { handle } from "hono/vercel";
const runtime = new CopilotRuntime({
agents: {
sample_agent: new LlamaIndexAgent({
url: (process.env.AGENT_URL || "http://127.0.0.1:9000") + "/run",
}),
},
runner: new InMemoryAgentRunner(),
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/llamaindex/src/app/api/copilotkit/route.ts
-26
View File
@@ -1,26 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { LlamaIndexAgent } from "@ag-ui/llamaindex";
import { NextRequest } from "next/server";
export async function POST(request: NextRequest) {
const runtime = new CopilotRuntime({
agents: {
sample_agent: new LlamaIndexAgent({
url: (process.env.AGENT_URL || "http://127.0.0.1:9000") + "/run",
}),
},
});
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter: new ExperimentalEmptyAdapter(),
endpoint: `/api/copilotkit`,
});
return handleRequest(request);
}
examples/integrations/llamaindex/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/llamaindex/src/app/page.tsx
+6 -7
View File
@@ -3,14 +3,13 @@
import { useState } from "react";
import { WeatherCard } from "@/components/WeatherCard";
import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { useAgent, useFrontendTool, CopilotSidebar } from "@copilotkit/react-core/v2";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
// 🪁 Frontend Actions: https://docs.copilotkit.ai/guides/frontend-actions
useCopilotAction({
useFrontendTool({
name: "change_theme_color",
parameters: [
{
@@ -27,7 +26,7 @@ export default function CopilotKitPage() {
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as React.CSSProperties
}
>
<YourMainContent themeColor={themeColor} />
@@ -51,7 +50,7 @@ type AgentState = {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/coagents/shared-state
const { state, setState } = useCoAgent<AgentState>({
const { state, setState } = useAgent<AgentState>({
name: "sample_agent",
initialState: {
proverbs: [
@@ -61,7 +60,7 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
});
// 🪁 Frontend Actions: https://docs.copilotkit.ai/coagents/frontend-actions
useCopilotAction({
useFrontendTool({
name: "add_proverb",
parameters: [
{
@@ -79,7 +78,7 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
});
//🪁 Generative UI: https://docs.copilotkit.ai/coagents/generative-ui
useCopilotAction({
useFrontendTool({
name: "get_weather",
description: "Get the weather for a given location.",
available: "disabled",
examples/integrations/mastra/package.json
+1 -1
View File
@@ -15,8 +15,8 @@
"@ag-ui/mastra": "beta",
"@ai-sdk/openai": "^2.0.42",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"hono": "^4",
"@libsql/client": "^0.15.15",
"@mastra/client-js": "beta",
"@mastra/core": "beta",
examples/integrations/mastra/src/app/api/copilotkit/[[...slug]]/route.ts
+22
View File
@@ -0,0 +1,22 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { MastraAgent } from "@ag-ui/mastra";
import { mastra } from "@/mastra";
import { handle } from "hono/vercel";
const runtime = new CopilotRuntime({
// @ts-expect-error - ignore for now, typing error
agents: MastraAgent.getLocalAgents({ mastra }),
runner: new InMemoryAgentRunner(),
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/mastra/src/app/api/copilotkit/route.ts
-29
View File
@@ -1,29 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { MastraAgent } from "@ag-ui/mastra";
import { NextRequest } from "next/server";
import { mastra } from "@/mastra";
// 1. You can use any service adapter here for multi-agent support.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
// 3. Create the CopilotRuntime instance and utilize the Mastra AG-UI
// integration to get the remote agents. Cache this for performance.
const runtime = new CopilotRuntime({
// @ts-expect-error - ignore for now, typing error
agents: MastraAgent.getLocalAgents({ mastra }),
});
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/mastra/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
const geistSans = Geist({
variable: "--font-geist-sans",
examples/integrations/mastra/src/app/page.tsx
+7 -8
View File
@@ -4,15 +4,14 @@ import { ProverbsCard } from "@/components/proverbs";
import { WeatherCard } from "@/components/weather";
import { MoonCard } from "@/components/moon";
import { AgentState } from "@/lib/types";
import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import { useAgent, useFrontendTool, useHumanInTheLoop, CopilotSidebar } from "@copilotkit/react-core/v2";
import { useState } from "react";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
// 🪁 Frontend Actions: https://docs.copilotkit.ai/mastra/frontend-actions
useCopilotAction({
useFrontendTool({
name: "setThemeColor",
parameters: [
{
@@ -29,7 +28,7 @@ export default function CopilotKitPage() {
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as React.CSSProperties
}
>
<CopilotSidebar
@@ -75,7 +74,7 @@ export default function CopilotKitPage() {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/mastra/shared-state/in-app-agent-read
const { state, setState } = useCoAgent<AgentState>({
const { state, setState } = useAgent<AgentState>({
name: "weatherAgent",
initialState: {
proverbs: [
@@ -85,7 +84,7 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
});
//🪁 Generative UI: https://docs.copilotkit.ai/mastra/generative-ui/tool-based
useCopilotAction(
useFrontendTool(
{
name: "weatherTool",
description: "Get the weather for a given location.",
@@ -99,11 +98,11 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
);
// 🪁 Human In the Loop: https://docs.copilotkit.ai/mastra/human-in-the-loop
useCopilotAction(
useHumanInTheLoop(
{
name: "go_to_moon",
description: "Go to the moon on request.",
renderAndWaitForResponse: ({ respond, status }) => {
render: ({ respond, status }) => {
return (
<MoonCard themeColor={themeColor} status={status} respond={respond} />
);
examples/integrations/ms-agent-framework-dotnet/package.json
+1 -1
View File
@@ -16,8 +16,8 @@
"dependencies": {
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"hono": "^4",
"next": "16.0.8",
"react": "^19.2.1",
"react-dom": "^19.2.1",
examples/integrations/ms-agent-framework-dotnet/src/app/api/copilotkit/[[...slug]]/route.ts
+24
View File
@@ -0,0 +1,24 @@
import {
CopilotRuntime,
createCopilotEndpoint,
InMemoryAgentRunner,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { handle } from "hono/vercel";
const runtime = new CopilotRuntime({
agents: {
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
runner: new InMemoryAgentRunner(),
});
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/ms-agent-framework-dotnet/src/app/api/copilotkit/route.ts
-33
View File
@@ -1,33 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the Microsoft Agent Framework
// AG-UI integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/ms-agent-framework-dotnet/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/ms-agent-framework-dotnet/src/app/page.tsx
+7 -7
View File
@@ -4,12 +4,11 @@ import { ProverbsCard } from "@/components/proverbs";
import { WeatherCard } from "@/components/weather";
import { MoonCard } from "@/components/moon";
import {
useCoAgent,
useAgent,
useFrontendTool,
useHumanInTheLoop,
useRenderToolCall,
} from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
CopilotSidebar,
} from "@copilotkit/react-core/v2";
import { useState } from "react";
import { AgentState } from "@/lib/types";
@@ -36,7 +35,7 @@ export default function CopilotKitPage() {
return (
<main
style={
{ "--copilot-kit-primary-color": themeColor } as CopilotKitCSSProperties
{ "--copilot-kit-primary-color": themeColor } as React.CSSProperties
}
>
<CopilotSidebar
@@ -82,7 +81,7 @@ export default function CopilotKitPage() {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/pydantic-ai/shared-state
const { state, setState } = useCoAgent<AgentState>({
const { state, setState } = useAgent<AgentState>({
name: "my_agent",
initialState: {
proverbs: [
@@ -92,10 +91,11 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
});
//🪁 Generative UI: https://docs.copilotkit.ai/pydantic-ai/generative-ui
useRenderToolCall(
useFrontendTool(
{
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} />;
examples/integrations/ms-agent-framework-python/package.json
+1 -1
View File
@@ -16,8 +16,8 @@
"dependencies": {
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"hono": "^4.12.10",
"next": "16.0.8",
"react": "^19.2.1",
"react-dom": "^19.2.1",
examples/integrations/ms-agent-framework-python/src/app/api/copilotkit/[[...slug]]/route.ts
+28
View File
@@ -0,0 +1,28 @@
import {
CopilotRuntime,
InMemoryAgentRunner,
createCopilotEndpoint,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { handle } from "hono/vercel";
// 1. Create the CopilotRuntime instance and utilize the Microsoft Agent Framework
// AG-UI integration to set up the connection.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
runner: new InMemoryAgentRunner(),
});
// 2. Build a Next.js API route that handles the CopilotKit runtime requests.
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/ms-agent-framework-python/src/app/api/copilotkit/route.ts
-33
View File
@@ -1,33 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the Microsoft Agent Framework
// AG-UI integration to set up the connection.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/ms-agent-framework-python/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/ms-agent-framework-python/src/app/page.tsx
+13 -11
View File
@@ -4,15 +4,20 @@ import { ProverbsCard } from "@/components/proverbs";
import { WeatherCard } from "@/components/weather";
import { MoonCard } from "@/components/moon";
import { AgentState } from "@/lib/types";
import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
import {
useAgent,
useFrontendTool,
useRenderToolCall,
useHumanInTheLoop,
} from "@copilotkit/react-core/v2";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-core/v2";
import { useState } from "react";
export default function CopilotKitPage() {
const [themeColor, setThemeColor] = useState("#6366f1");
// 🪁 Frontend Actions: https://docs.copilotkit.ai/microsoft-agent-framework/frontend-actions
useCopilotAction({
useFrontendTool({
name: "setThemeColor",
parameters: [
{
@@ -75,7 +80,7 @@ export default function CopilotKitPage() {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/microsoft-agent-framework/shared-state
const { state, setState } = useCoAgent<AgentState>({
const { state, setState } = useAgent<AgentState>({
name: "my_agent",
initialState: {
proverbs: [
@@ -85,11 +90,10 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
});
//🪁 Generative UI: https://docs.copilotkit.ai/microsoft-agent-framework/generative-ui
useCopilotAction(
useRenderToolCall(
{
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} />;
@@ -99,13 +103,11 @@ function YourMainContent({ themeColor }: { themeColor: string }) {
);
// 🪁 Human In the Loop: https://docs.copilotkit.ai/microsoft-agent-framework/human-in-the-loop
useCopilotAction(
useHumanInTheLoop(
{
name: "go_to_moon",
description:
"Go to the moon on request. This action requires human approval and will render the MoonCard UI for confirmation.",
available: "disabled",
renderAndWaitForResponse: ({ respond, status }) => {
description: "Go to the moon on request.",
render: ({ respond, status }) => {
return (
<MoonCard themeColor={themeColor} status={status} respond={respond} />
);
examples/integrations/pydantic-ai/package.json
+1 -2
View File
@@ -15,9 +15,8 @@
"dependencies": {
"@ag-ui/client": "0.0.52",
"@copilotkit/react-core": "1.55.2",
"@copilotkit/react-ui": "1.55.2",
"@copilotkit/runtime": "1.55.2",
"@copilotkit/shared": "1.55.2",
"hono": "^4.12.10",
"next": "16.0.7",
"react": "^19.2.1",
"react-dom": "^19.2.1",
examples/integrations/pydantic-ai/src/app/api/copilotkit/[[...slug]]/route.ts
+28
View File
@@ -0,0 +1,28 @@
import {
CopilotRuntime,
InMemoryAgentRunner,
createCopilotEndpoint,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";
import { handle } from "hono/vercel";
// 1. Create the CopilotRuntime instance and utilize the PydanticAI AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
runner: new InMemoryAgentRunner(),
});
// 2. Build a Next.js API route that handles the CopilotKit runtime requests.
const app = createCopilotEndpoint({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handle(app);
export const POST = handle(app);
examples/integrations/pydantic-ai/src/app/api/copilotkit/route.ts
-33
View File
@@ -1,33 +0,0 @@
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { HttpAgent } from "@ag-ui/client";
import { NextRequest } from "next/server";
// 1. You can use any service adapter here for multi-agent support. We use
// the empty adapter since we're only using one agent.
const serviceAdapter = new ExperimentalEmptyAdapter();
// 2. Create the CopilotRuntime instance and utilize the PydanticAI AG-UI
// integration to setup the connection.
const runtime = new CopilotRuntime({
agents: {
// Our FastAPI endpoint URL
my_agent: new HttpAgent({
url: process.env.AGENT_URL || "http://localhost:8000/",
}),
},
});
// 3. Build a Next.js API route that handles the CopilotKit runtime requests.
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
examples/integrations/pydantic-ai/src/app/layout.tsx
+2 -2
View File
@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotKit } from "@copilotkit/react-core/v2";
import "./globals.css";
import "@copilotkit/react-ui/styles.css";
import "@copilotkit/react-core/v2/styles.css";
export const metadata: Metadata = {
title: "Create Next App",
examples/integrations/pydantic-ai/src/app/page.tsx
+4 -5
View File
@@ -5,13 +5,12 @@ import { WeatherCard } from "@/components/weather";
import { MoonCard } from "@/components/moon";
import { AgentState } from "@/lib/types";
import {
useCoAgent,
useDefaultTool,
useAgent,
useFrontendTool,
useHumanInTheLoop,
useRenderToolCall,
} from "@copilotkit/react-core";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
} from "@copilotkit/react-core/v2";
import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-core/v2";
import { useState } from "react";
export default function CopilotKitPage() {
@@ -81,7 +80,7 @@ export default function CopilotKitPage() {
function YourMainContent({ themeColor }: { themeColor: string }) {
// 🪁 Shared State: https://docs.copilotkit.ai/pydantic-ai/shared-state
const { state, setState } = useCoAgent<AgentState>({
const { state, setState } = useAgent<AgentState>({
name: "my_agent",
initialState: {
proverbs: [
examples/integrations/strands-python/package.json
-2
View File
@@ -16,9 +16,7 @@
"@ag-ui/client": "0.0.52",
"@copilotkit/a2ui-renderer": "1.56.5",
"@copilotkit/react-core": "1.56.5",
"@copilotkit/react-ui": "1.56.5",
"@copilotkit/runtime": "1.56.5",
"@copilotkit/shared": "1.56.5",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-label": "^2.1.8",
"@radix-ui/react-separator": "^1.1.8",