AI Task List

AI chats 167

About

Agent plan checklist with nested subtasks and pending, running, done and failed states, each transitioning in place. Respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Task List to your project and fits it to your theme.

Code

How AI Task List is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Component from "@/components/ui/ai-task-list";

export default function DemoOne() {
  return (
    <div className="flex min-h-[440px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-lg rounded-2xl border bg-card p-6 shadow-sm">
        <Component
          label="Migrating the billing module"
          tasks={[
            {
              id: "read",
              label: "Read the current schema",
              note: "6 files",
              status: "done",
            },
            {
              id: "plan",
              label: "Plan the column moves",
              status: "done",
              children: [
                { id: "p1", label: "Map invoices.total", status: "done" },
                { id: "p2", label: "Map invoices.currency", status: "done" },
              ],
            },
            {
              id: "write",
              label: "Write the migration",
              note: "in progress",
              status: "running",
            },
            { id: "test", label: "Run the test suite", status: "pending" },
            {
              id: "deploy",
              label: "Deploy to staging",
              note: "blocked on tests",
              status: "failed",
            },
          ]}
        />
      </div>
    </div>
  );
}