CopilotKit

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

function App() {
  return (
    <CopilotKit runtimeUrl="/api/copilotkit">
      <CopilotSidebar>
        <TodoApp />
      </CopilotSidebar>
    </CopilotKit>
  );
}

function TodoApp() {
  const [todos, setTodos] = React.useState<string[]>([]);

  // Expose app state to the AI
  useCopilotReadable({
    description: "The current todo list",
    value: todos,
  });

  // Define an action the AI can take
  useCopilotAction({
    name: "addTodo",
    description: "Add a new todo item to the list",
    parameters: [
      { name: "todo", type: "string", description: "The todo text" },
    ],
    handler: async ({ todo }) => {
      setTodos((prev) => [...prev, todo]);
    },
  });

  return (
    <ul>
      {todos.map((t, i) => <li key={i}>{t}</li>)}
    </ul>
  );
}