CopilotKit: Next.js で AI パワード To-Do アプリを構築する

// src/app/copilotkit/page.tsx
"use client";

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

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export default function Home() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState("");

  // Expose current todos so Copilot can read them
  useCopilotReadable({
    description: "The user's current to-do items with their completion status.",
    value: todos,
  });

  useCopilotAction({
    name: "manage_todos",
    description: "Manage the to-do list.",
    parameters: [
      {
        name: "action",
        type: "string",
        description: "The action to perform: 'add', 'remove', or 'toggle'.",
        enum: ["add", "remove", "toggle"],
      },
      {
        name: "todo",
        type: "string",
        description: "The to-do item to manage.",
      },
    ],
    handler: ({ action, todo }) => {
      if (action === "add") {
        setTodos((prev) => [
          ...prev,
          { id: Date.now(), text: todo, completed: false },
        ]);
      } else if (action === "remove") {
        setTodos((prev) => prev.filter((t) => t.text !== todo));
      } else if (action === "toggle") {
        setTodos((prev) =>
          prev.map((t) =>
            t.text === todo ? { ...t, completed: !t.completed } : t
          )
        );
      }
    },
  });

  const handleAddTodo = () => {
    if (newTodo.trim() !== "") {
      setTodos([...todos, { id: Date.now(), text: newTodo, completed: false }]);
      setNewTodo("");
    }
  };

  return (
    <CopilotSidebar>
      <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4">
        <div className="w-full max-w-md p-6 bg-white rounded-lg shadow-md">
          <h1 className="text-2xl font-bold mb-4">My To-Do List</h1>
          <div className="flex mb-4">
            <input
              type="text"
              value={newTodo}
              onChange={(e) => setNewTodo(e.target.value)}
              className="flex-grow p-2 border rounded-l-md"
              placeholder="Add a new to-do"
            />
            <button onClick={handleAddTodo} className="p-2 bg-blue-500 text-white rounded-r-md">
              Add
            </button>
          </div>
          <ul>
            {todos.map((todo) => (
              <li
                key={todo.id}
                className={`flex items-center justify-between p-2 mb-2 rounded-md ${
                  todo.completed ? "bg-green-200" : ""
                }`}
              >
                <span className={todo.completed ? "line-through" : ""}>
                  {todo.text}
                </span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </CopilotSidebar>
  );
}