quickstart-leftover.mdx

import GenerativeUiQuickstart from "@/snippets/generative-ui-quickstart.mdx"; import Link from "next/link";

Use CopilotKit

Copilot Readable State

You likely want to provide state knowledge to the copilot. You can achieve this by using the useCopilotReadable hook.

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

export function YourComponent() {
  const { employees } = useEmployees();

  // Define Copilot readable state
  useCopilotReadable({
    description: "List of available users",
    value: users,
  });

  return (
    <>...</>
  );
}

Let the Copilot take action

Aside from being aware of the state, you can make your copilots even more powerful by allowing them to take actions. You can achieve this by using the useCopilotAction hook.

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

export function YourComponent() {
  const { employees, selectEmployee } = useEmployees();

  // Define Copilot readable state
  useCopilotReadable({
    description: "List of available users",
    value: users,
  });

  // Define Copilot action
  useCopilotAction({
    name: "Select an employee",
    description: "Select an employee from the list",
    parameters: [
      {
        name: "employeeId",
        type: "string",
        description: "The ID of the employee to select",
        required: true,
      }
    ],
    handler: async ({ employeeId }) => selectEmployee(employeeId),
  });

  return (
    <>...</>
  );
}

Generative UI

Next Steps

We highly recommend checkout out our simple AI Todo List Copilot Tutorial to learn more about CopilotKit.

CoAgents (Early Access)

CopilotKit now offers CoAgents🪁🤖 infrastructure for deeply integrating LangGraph agents into applications.

Check out our new CoAgents beta