# AI Elements Task Demo

A comprehensive demonstration block showcasing the Task component from AI Elements with realistic development workflow examples. This block demonstrates how to build interactive task management interfaces using AI Elements components and the AI SDK.

## Features

- **Interactive Task Generation**: AI-powered generation of realistic development workflows
- **Task Component Showcase**: Demonstrates all features of the AI Elements Task component
- **File Type Icons**: Visual representation of different file types with appropriate icons
- **Collapsible Task Details**: Expandable content for task descriptions and progress
- **Multiple Workflow Types**: Various development scenarios (React, Full-Stack, API, Design)
- **Real-time AI Streaming**: Uses AI SDK's `experimental_generateObject` for live task generation
- **Type-Safe Schema**: Full TypeScript support with Zod validation

## Components Used

This block showcases the following AI Elements components:

- `Task` - Main task container with collapsible functionality
- `TaskTrigger` - Clickable header for expanding/collapsing task details
- `TaskContent` - Collapsible content area for task items
- `TaskItem` - Individual task items with text and file references
- `TaskItemFile` - Special styling for file references with icons

## Setup

1. Install dependencies:

   ```bash
   npm install @ai-sdk/react ai zod lucide-react @icons-pack/react-simple-icons
   ```

2. Set environment variables:

   ```env
   OPENAI_API_KEY=your_openai_api_key_here
   ```

3. The block will be available at `/registry/blocks/ai-elements-task-demo`

## Usage

The Task Demo provides an interactive interface for generating and displaying development workflows:

- **Multiple Workflow Types**: Choose from React Development, Full-Stack App, API Integration, or Design System
- **AI-Generated Tasks**: Each workflow generates realistic, structured task lists
- **Interactive Display**: Tasks are displayed as collapsible components with expandable details
- **File References**: Tasks include both text descriptions and file references with appropriate icons

### Key Features

- **Workflow Generation**: AI generates realistic development task workflows
- **Visual Task Management**: Clean, organized display of tasks with collapsible sections
- **File Type Recognition**: Automatic icon assignment based on file extensions
- **Progressive Disclosure**: First task opens by default, others can be expanded as needed
- **Real-time Updates**: Streaming responses from AI for immediate feedback

## Technical Details

- Built with Next.js 15 and React Server Components
- Uses AI SDK's `experimental_useObject` for structured AI responses
- Implements Zod schemas for type-safe task generation
- Uses React Simple Icons for file type representation
- Optimized for development workflow demonstration
- Includes comprehensive TypeScript definitions

## Customization

You can customize:

- Task generation prompts and scenarios
- File type icons and color schemes
- Task display layout and styling
- AI model selection (currently OpenAI GPT-4o)
- Additional workflow types and categories
- Task item formatting and structure

## Dependencies

- `@ai-sdk/react` - AI SDK React hooks with experimental object generation
- `ai` - AI SDK core functionality
- `zod` - Schema validation and type safety
- `lucide-react` - Icon components
- `@icons-pack/react-simple-icons` - Technology-specific icons

## Example Use Cases

- **Development Team Onboarding**: Show new developers typical workflow steps
- **Project Planning**: Generate task breakdowns for development projects
- **Educational Content**: Demonstrate task management best practices
- **Workflow Documentation**: Create visual representations of development processes
- **Project Management Tools**: Build task management interfaces
- **AI-Powered Planning**: Use AI to generate realistic project timelines

## Task Component Features

The Task component provides:

- **Visual Status Indicators**: Pending, in-progress, completed, and error states
- **Expandable Content**: Collapsible sections for task details
- **Progress Tracking**: Built-in progress counters
- **Custom Content Support**: Flexible content within task items
- **Accessibility**: Full keyboard navigation and screen reader support
- **Type Safety**: Comprehensive TypeScript definitions

## API Schema

The block uses a structured schema for task generation:

```typescript
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),
});
```

## Workflow Types

The demo supports multiple development scenarios:

1. **React Development**: Component creation, state management, testing
2. **Full-Stack Application**: Frontend, backend, database, deployment
3. **API Integration**: Authentication, endpoints, documentation, testing
4. **UI/UX Design System**: Components, tokens, documentation, accessibility

Each workflow generates realistic tasks with appropriate file references and progression states.