web
This commit is contained in:
35
web/src/app/api/copilotkit/route.ts
Normal file
35
web/src/app/api/copilotkit/route.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import {
|
||||
CopilotRuntime,
|
||||
ExperimentalEmptyAdapter,
|
||||
copilotRuntimeNextJSAppRouterEndpoint,
|
||||
} from "@copilotkit/runtime";
|
||||
|
||||
import { LangGraphAgent } from "@ag-ui/langgraph"
|
||||
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 LangGraph AG-UI
|
||||
// integration to setup the connection.
|
||||
const runtime = new CopilotRuntime({
|
||||
agents: {
|
||||
"sample_agent": new LangGraphAgent({
|
||||
deploymentUrl: process.env.LANGGRAPH_DEPLOYMENT_URL || "http://localhost:8123",
|
||||
graphId: "sample_agent",
|
||||
langsmithApiKey: process.env.LANGSMITH_API_KEY || "",
|
||||
}),
|
||||
}
|
||||
});
|
||||
|
||||
// 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);
|
||||
};
|
||||
BIN
web/src/app/favicon.ico
Normal file
BIN
web/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
24
web/src/app/globals.css
Normal file
24
web/src/app/globals.css
Normal file
@@ -0,0 +1,24 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
26
web/src/app/layout.tsx
Normal file
26
web/src/app/layout.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import type { Metadata } from "next";
|
||||
|
||||
import { CopilotKit } from "@copilotkit/react-core";
|
||||
import "./globals.css";
|
||||
import "@copilotkit/react-ui/styles.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={"antialiased"}>
|
||||
<CopilotKit runtimeUrl="/api/copilotkit" agent="sample_agent">
|
||||
{children}
|
||||
</CopilotKit>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
171
web/src/app/page.tsx
Normal file
171
web/src/app/page.tsx
Normal file
@@ -0,0 +1,171 @@
|
||||
"use client";
|
||||
|
||||
import { useCoAgent, useCopilotAction } 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({
|
||||
name: "setThemeColor",
|
||||
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} />
|
||||
<CopilotSidebar
|
||||
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**."
|
||||
}}
|
||||
/>
|
||||
</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
|
||||
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 }) => {
|
||||
setState({
|
||||
...state,
|
||||
proverbs: [...(state.proverbs || []), proverb],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
//🪁 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} />
|
||||
},
|
||||
});
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
// 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>
|
||||
);
|
||||
}
|
||||
|
||||
// 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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user