React AI Task

Collapsible task lists with file references and progress tracking. Build transparent AI workflows with React, Next.js, and TypeScript, featuring expandable details and visual status indicators for shadcn/ui applications.

AI Elements

Radix UI

Simple Icons

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Collapsible task lists for AI workflows with file references and progress tracking. Because when your AI says "analyzing codebase" for 30 seconds, users want to see what files it's actually reading, not just watch a spinner. This free open source React component provides transparent workflow visualization for your Next.js AI applications using Vercel AI SDK in JavaScript frameworks.

Expandable task workflow

Collapsible task list with file references:

Loading component...

'use client';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { cn } from '@/lib/utils';import { ChevronDownIcon, SearchIcon } from 'lucide-react';import type { ComponentProps } from 'react';export type TaskItemFileProps = ComponentProps<'div'>;export const TaskItemFile = ({  children,  className,  ...props}: TaskItemFileProps) => (  <div    className={cn(      'inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs',      className    )}    {...props}  >    {children}  </div>);export type TaskItemProps = ComponentProps<'div'>;export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (  <div className={cn('text-muted-foreground text-sm', className)} {...props}>    {children}  </div>);export type TaskProps = ComponentProps<typeof Collapsible>;export const Task = ({  defaultOpen = true,  className,  ...props}: TaskProps) => (  <Collapsible    className={cn(      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in',      className    )}    defaultOpen={defaultOpen}    {...props}  />);export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {  title: string;};export const TaskTrigger = ({  children,  className,  title,  ...props}: TaskTriggerProps) => (  <CollapsibleTrigger asChild className={cn('group', className)} {...props}>    {children ?? (      <div className="flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground">        <SearchIcon className="size-4" />        <p className="text-sm">{title}</p>        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />      </div>    )}  </CollapsibleTrigger>);export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;export const TaskContent = ({  children,  className,  ...props}: TaskContentProps) => (  <CollapsibleContent    className={cn(      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',      className    )}    {...props}  >    <div className="mt-4 space-y-2 border-muted border-l-2 pl-4">      {children}    </div>  </CollapsibleContent>);

The React component provides expandable task containers, file references with icons, and progress tracking through items. Built with TypeScript for type safety and designed for seamless integration in your JavaScript projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import {
  Task,
  TaskTrigger,
  TaskContent,
  TaskItem,
  TaskItemFile,
} from "@/components/ai/task";

<Task>
  <TaskTrigger title="Analyzing project structure" />
  <TaskContent>
    <TaskItem>Scanning workspace for configuration files</TaskItem>
    <TaskItem>
      Found <TaskItemFile>package.json</TaskItemFile>
    </TaskItem>
    <TaskItem>
      Reading <TaskItemFile>tsconfig.json</TaskItemFile>
    </TaskItem>
  </TaskContent>
</Task>;

Why show the process?

AI agents do complex work behind the scenes—reading files, making API calls, running analysis in React applications. Users get nervous when nothing happens for 20+ seconds during AI operations.

Showing task lists builds confidence in your conversational AI. "Reading package.json", "Scanning TypeScript files", "Generating suggestions" tells users the AI is working, not frozen in Next.js projects. Plus developers actually want to see what files got touched during AI chat applications in JavaScript implementations.

Usage with AI SDK

Stream task progress with structured generation in React applications:

"use client";

import {
  Task,
  TaskTrigger,
  TaskContent,
  TaskItem,
  TaskItemFile,
} from "@/components/ai/task";
import { experimental_useObject as useObject } from "@ai-sdk/react";
import { useState } from "react";
import { z } from "zod";

const taskSchema = z.object({
  title: z.string(),
  items: z.array(
    z.object({
      type: z.enum(["text", "file"]),
      text: z.string(),
      file: z
        .object({
          name: z.string(),
          icon: z.string(),
        })
        .optional(),
    })
  ),
  status: z.enum(["pending", "in_progress", "completed"]),
});

const tasksSchema = z.object({
  tasks: z.array(taskSchema),
});

export default function TaskWorkflow() {
  const [prompt, setPrompt] = useState("");

  const { object, submit, isLoading } = useObject({
    api: "/api/task",
    schema: tasksSchema,
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (prompt.trim()) {
      submit({ prompt });
      setPrompt("");
    }
  };

  return (
    <div className="space-y-4 max-w-2xl mx-auto p-6">
      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Describe a task..."
          className="flex-1 px-3 py-2 border rounded-lg"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg"
        >
          Generate Tasks
        </button>
      </form>

      {isLoading && !object && (
        <p className="text-muted-foreground">Generating workflow...</p>
      )}

      <div className="space-y-3">
        {object?.tasks?.map((task, index) => (
          <Task key={index} defaultOpen={index === 0}>
            <TaskTrigger title={task.title} />
            <TaskContent>
              {task.items?.map((item, i) => (
                <TaskItem key={i}>
                  {item.type === "file" && item.file ? (
                    <span>
                      {item.text} <TaskItemFile>{item.file.name}</TaskItemFile>
                    </span>
                  ) : (
                    item.text
                  )}
                </TaskItem>
              ))}
            </TaskContent>
          </Task>
        ))}
      </div>
    </div>
  );
}

Backend route for task generation:

// app/api/task/route.ts
import { streamObject } from "ai";
import { z } from "zod";

const taskSchema = z.object({
  title: z.string(),
  items: z.array(
    z.object({
      type: z.enum(["text", "file"]),
      text: z.string(),
      file: z
        .object({
          name: z.string(),
          icon: z.string(),
        })
        .optional(),
    })
  ),
  status: z.enum(["pending", "in_progress", "completed"]),
});

export const tasksSchema = z.object({
  tasks: z.array(taskSchema),
});

export async function POST(req: Request) {
  const { prompt } = await req.json();

  const result = streamObject({
    model: "openai/gpt-4o",
    schema: tasksSchema,
    prompt: `Generate a realistic task workflow for: ${prompt}
    
    Include file operations, scanning steps, and progress indicators.
    Make it feel like a real development workflow.`,
  });

  return result.toTextStreamResponse();
}

Examples

Progressive task reveal

Tasks appearing one by one with timing:

Loading component...

'use client';import {  Task,  TaskContent,  TaskItem,  TaskItemFile,  TaskTrigger,} from '@/components/ui/shadcn-io/ai/task';import { SiTypescript, SiReact, SiJson } from '@icons-pack/react-simple-icons';import { useState, useEffect } from 'react';const Example = () => {  const [visibleTasks, setVisibleTasks] = useState<number>(0);  const [visibleItems, setVisibleItems] = useState<{ [key: number]: number }>({});  const tasks = [    {      title: "Setting up project",      items: [        { text: "Initializing workspace..." },        { text: "Installing dependencies from", file: "package.json", icon: SiJson, color: "#000000" },        { text: "Configuring TypeScript from", file: "tsconfig.json", icon: SiTypescript, color: "#3178C6" },        { text: "Setup complete" },      ]    },    {      title: "Analyzing components",      items: [        { text: "Scanning component directory..." },        { text: "Found", file: "Button.tsx", icon: SiReact, color: "#149ECA" },        { text: "Found", file: "Card.tsx", icon: SiReact, color: "#149ECA" },        { text: "Found", file: "Dialog.tsx", icon: SiReact, color: "#149ECA" },        { text: "Analysis complete: 3 components" },      ]    },    {      title: "Building project",      items: [        { text: "Compiling TypeScript..." },        { text: "Bundling modules..." },        { text: "Optimizing for production..." },        { text: "Build successful" },      ]    },  ];  useEffect(() => {    // Reveal tasks one by one    const taskTimer = setInterval(() => {      setVisibleTasks((prev) => {        if (prev < tasks.length) {          return prev + 1;        } else {          clearInterval(taskTimer);          return prev;        }      });    }, 1000);    return () => clearInterval(taskTimer);  }, []);  useEffect(() => {    // Reveal items within each task    if (visibleTasks > 0) {      const currentTaskIndex = visibleTasks - 1;      const currentTask = tasks[currentTaskIndex];            if (currentTask && (!visibleItems[currentTaskIndex] || visibleItems[currentTaskIndex] < currentTask.items.length)) {        const itemTimer = setTimeout(() => {          setVisibleItems((prev) => ({            ...prev,            [currentTaskIndex]: (prev[currentTaskIndex] || 0) + 1,          }));        }, 300);        return () => clearTimeout(itemTimer);      }    }  }, [visibleTasks, visibleItems]);  return (    <div className="p-8 w-full space-y-3">      {tasks.slice(0, visibleTasks).map((task, taskIndex) => (        <Task key={taskIndex} defaultOpen={true}>          <TaskTrigger title={task.title} />          <TaskContent>            {task.items.slice(0, visibleItems[taskIndex] || 0).map((item, itemIndex) => {              const IconComponent = item.icon;              return (                <TaskItem key={itemIndex}>                  {item.file ? (                    <span className="inline-flex items-center gap-1">                      {item.text}                      <TaskItemFile>                        {IconComponent && (                          <IconComponent className="size-4" color={item.color} />                        )}                        <span>{item.file}</span>                      </TaskItemFile>                    </span>                  ) : (                    item.text                  )}                </TaskItem>              );            })}          </TaskContent>        </Task>      ))}            {visibleTasks === 0 && (        <p className="text-sm text-muted-foreground animate-pulse">          Starting workflow...        </p>      )}    </div>  );};export default Example;

'use client';import {  Collapsible,  CollapsibleContent,  CollapsibleTrigger,} from '@/components/ui/collapsible';import { cn } from '@/lib/utils';import { ChevronDownIcon, SearchIcon } from 'lucide-react';import type { ComponentProps } from 'react';export type TaskItemFileProps = ComponentProps<'div'>;export const TaskItemFile = ({  children,  className,  ...props}: TaskItemFileProps) => (  <div    className={cn(      'inline-flex items-center gap-1 rounded-md border bg-secondary px-1.5 py-0.5 text-foreground text-xs',      className    )}    {...props}  >    {children}  </div>);export type TaskItemProps = ComponentProps<'div'>;export const TaskItem = ({ children, className, ...props }: TaskItemProps) => (  <div className={cn('text-muted-foreground text-sm', className)} {...props}>    {children}  </div>);export type TaskProps = ComponentProps<typeof Collapsible>;export const Task = ({  defaultOpen = true,  className,  ...props}: TaskProps) => (  <Collapsible    className={cn(      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 data-[state=closed]:animate-out data-[state=open]:animate-in',      className    )}    defaultOpen={defaultOpen}    {...props}  />);export type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {  title: string;};export const TaskTrigger = ({  children,  className,  title,  ...props}: TaskTriggerProps) => (  <CollapsibleTrigger asChild className={cn('group', className)} {...props}>    {children ?? (      <div className="flex cursor-pointer items-center gap-2 text-muted-foreground hover:text-foreground">        <SearchIcon className="size-4" />        <p className="text-sm">{title}</p>        <ChevronDownIcon className="size-4 transition-transform group-data-[state=open]:rotate-180" />      </div>    )}  </CollapsibleTrigger>);export type TaskContentProps = ComponentProps<typeof CollapsibleContent>;export const TaskContent = ({  children,  className,  ...props}: TaskContentProps) => (  <CollapsibleContent    className={cn(      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2 data-[state=open]:slide-in-from-top-2 text-popover-foreground outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',      className    )}    {...props}  >    <div className="mt-4 space-y-2 border-muted border-l-2 pl-4">      {children}    </div>  </CollapsibleContent>);

Features

Collapsible task containers with smooth animations in React applications
File reference badges with icon support for TypeScript components
Progress tracking through task items in JavaScript frameworks
Status indicators (pending, in-progress, completed) for Next.js projects
Nested task support for complex workflows
Keyboard navigation with proper focus management
Screen reader accessible with semantic HTML
Responsive design adapting to different screens
Perfect for AI agents, AI chat applications, and conversational AI workflow visualization
Free open source component built for Next.js with shadcn/ui design system and AI Elements
Optimized for Vercel AI SDK streaming and structured generation

API Reference

Task

Container component managing collapsible state.

Prop	Type	Default	Description
`defaultOpen`	`boolean`	`false`	Initial expanded state
`className`	`string`	-	Additional CSS classes
`...props`	`ComponentProps<typeof Collapsible>`	-	Collapsible component props

TaskTrigger

Clickable header showing task title.

Prop	Type	Description
`title`	`string`	Required - Task title to display
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof CollapsibleTrigger>`	Trigger component props

TaskContent

Container for task items with animations.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`...props`	`ComponentProps<typeof CollapsibleContent>`	Content component props

TaskItem

Individual task item with progress indicator.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`children`	`ReactNode`	Task item content
`...props`	`ComponentProps<'div'>`	Standard div attributes

TaskItemFile

File reference badge with optional icon.

Prop	Type	Description
`className`	`string`	Additional CSS classes
`children`	`ReactNode`	File name and optional icon
`...props`	`ComponentProps<'div'>`	Standard div attributes

Keyboard interactions

Key	Description
`Space` / `Enter`	Toggle task expansion
`Tab`	Navigate between tasks
`Escape`	Close expanded task

Production tips

Keep task titles descriptive. Users should understand what's happening from the title alone in React applications.

Show real progress. Update task items as operations complete, don't just dump everything at once in TypeScript components.

File references need context. Show why a file is being accessed: "Reading config from package.json" in JavaScript implementations.

Status indicators help. Consider adding visual indicators for pending/completed states in Next.js projects.

Limit nesting depth. Too many nested tasks become hard to follow in React applications. Keep it shallow.

Performance with many tasks. Consider virtualization for very long task lists in TypeScript frameworks.

Integration with other components

Task works seamlessly with Loader for pending states in React applications. Use alongside Response for task results in Next.js projects. Combine with Reasoning for decision explanations. This free open source component integrates seamlessly with modern JavaScript frameworks.