+ );
+}
+
+// Simple sun icon for the weather card
+function SunIcon() {
+ return (
+
+ );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3c6a56d..f470f76 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -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 (
-
+
{children}
-
+
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index cfd777a..28e56e4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,171 +1,58 @@
"use client";
-import { useCoAgent, useCopilotAction } from "@copilotkit/react-core";
-import { CopilotKitCSSProperties, CopilotSidebar } from "@copilotkit/react-ui";
-import { useState } from "react";
+import {
+ useFrontendTool,
+ useAgent,
+ CopilotChat,
+ CopilotThreadList,
+ CopilotChatConfigurationProvider,
+} from "@copilotkitnext/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 (
-
-
-
-
- );
-}
-
-// 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({
- 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
- },
- });
+ const { agent } = useAgent();
+
+ // example implementation using file-uploads
+ const handleAddFile = () => {
+ const input = document.createElement("input");
+ input.type = "file";
+ input.accept = "image/*";
+ input.onchange = (e: Event) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (!file?.type.startsWith("image/")) return;
+
+ const reader = new FileReader();
+ reader.onload = () => {
+ agent?.addMessage({
+ role: "user",
+ id: crypto.randomUUID(),
+ content: [
+ {
+ type: "binary",
+ mimeType: file.type,
+ url: reader.result as string,
+ },
+ ],
+ });
+ agent?.runAgent();
+ };
+ reader.readAsDataURL(file);
+ };
+ input.click();
+ };
return (
-
-
-
Proverbs
-
This is a demonstrative page, but it could be anything you want! 🪁
-
-
- {state.proverbs?.map((proverb, index) => (
-
-
{proverb}
-
-
- ))}
+
+
+
+
+
- {state.proverbs?.length === 0 &&
- No proverbs yet. Ask the assistant to add some!
-
}
-
-
- );
-}
-
-// Simple sun icon for the weather card
-function SunIcon() {
- return (
-
- );
-}
-
-// 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 (
-