copilotkit

// app/layout.tsx — Wrap app with CopilotKit
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      {children}
      <CopilotSidebar
        labels={{ title: "Project Assistant", initial: "How can I help with your project?" }}
      />
    </CopilotKit>
  );
}

// app/api/copilotkit/route.ts — Backend endpoint
import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime";

export async function POST(req: Request) {
  const runtime = new CopilotRuntime();
  const adapter = new OpenAIAdapter({ model: "gpt-4o" });
  return runtime.response(req, adapter);
}

import { useCopilotReadable, useCopilotAction } from "@copilotkit/react-core";

function ProjectDashboard({ project }: { project: Project }) {
  // Make app state readable by the AI
  useCopilotReadable({
    description: "Current project details",
    value: {
      name: project.name,
      tasks: project.tasks.map(t => ({ title: t.title, status: t.status, assignee: t.assignee })),
      dueDate: project.dueDate,
      completionRate: project.tasks.filter(t => t.status === "done").length / project.tasks.length,
    },
  });

  // Define actions the AI can take
  useCopilotAction({
    name: "createTask",
    description: "Create a new task in the current project",
    parameters: [
      { name: "title", type: "string", description: "Task title", required: true },
      { name: "assignee", type: "string", description: "Who to assign the task to" },
      { name: "priority", type: "string", enum: ["low", "medium", "high"] },
    ],
    handler: async ({ title, assignee, priority }) => {
      await api.tasks.create({ projectId: project.id, title, assignee, priority });
      revalidate();
      return `Created task: ${title}`;
    },
  });

  useCopilotAction({
    name: "generateReport",
    description: "Generate a project status report",
    parameters: [{ name: "format", type: "string", enum: ["summary", "detailed"] }],
    handler: async ({ format }) => {
      const report = await api.reports.generate({ projectId: project.id, format });
      return report.content;
    },
  });

  return <div>{/* Dashboard UI */}</div>;
}

import { CopilotTextarea } from "@copilotkit/react-textarea";

function DocumentEditor() {
  const [content, setContent] = useState("");

  return (
    <CopilotTextarea
      value={content}
      onValueChange={setContent}
      placeholder="Start writing..."
      autosuggestionsConfig={{
        textareaPurpose: "A project update document for stakeholders",
        chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { model: "gpt-4o-mini" } } },
      }}
      className="w-full h-96 p-4 border rounded-lg"
    />
  );
  // AI autocompletes as you type, context-aware
}

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/runtime