โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ ๐ shadcn/directory/ai-elements/task โ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
A collapsible task list component for displaying AI workflow progress, with status indicators and optional descriptions. [x] Copy Markdown Open
The Task component provides a structured way to display task lists or workflow progress with collapsible details, status indicators, and progress tracking. It consists of a main Task container with TaskTrigger for the clickable header and TaskContent for the collapsible content area.
[ ] Found project files Searching "app/page.tsx, components structure" Read page.tsx Scanning 52 files Scanning 2 files Reading files layout.tsx
ai-elements shadow manual
npx ai-elements@latest add task
Build a mock async programming agent using experimental generateObject
Add the following component to your frontend:
app/page.tsx
'use client';
import { experimental_useObject as useObject } from '@ai-sdk/react'; import { Task, TaskItem, TaskItemFile, TaskTrigger, TaskContent, } from '@/components/ai-elements/task'; import { Button } from '@/components/ui/button'; import { tasksSchema } from '@/app/api/task/route'; import { SiReact, SiTypescript, SiJavascript, SiCss, SiHtml5, SiJson, SiMarkdown, } from '@icons-pack/react-simple-icons';
const iconMap = { react: { component: SiReact, color: '#149ECA' }, typescript: { component: SiTypescript, color: '#3178C6' }, javascript: { component: SiJavascript, color: '#F7DF1E' }, css: { component: SiCss, color: '#1572B6' }, html: { component: SiHtml5, color: '#E34F26' }, json: { component: SiJson, color: '#000000' }, markdown: { component: SiMarkdown, color: '#000000' }, };
Add the following route to your backend:
TS app/api/agent.ts
[ ] 0
import streamObject } from 'ai'; import {z} from "zod';
export const taskItemSchema = z.object({ type: z.enum(['text', 'file']). text: z.string(). file: z .object({ name: z.string(). icon: z.string(), color: z.string().optional(). }) .optional(). });
export const taskSchema z.object({ title: z.string(). items: z.array(taskItemSchema), status: z.enum(['pending', 'in progress', 'completed']). });
export const tasksSchema z.object({ tasks: z.array(taskSchema), });
// Allow streaming responses up to 30 seconds export const maxDuration 30;
export async function POST(req: Request) { const { prompt } = await req.json();
const result streamObject(
| โข Visual icons for pending, in-progress, completed, and error states | |-| | โข Expandable content for task descriptions and additional information | | โข Built-in progress counter showing completed vs total tasks | | โข Optional progressive reveal of tasks with customizable timing | | โข Support for custom content within task items | | Full type safety with proper TypeScript definitions | | โข Keyboard navigation and screen reader support |
โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ