Repository files navigation

AI task management UI compatible withTask Master.

A local web interface for visualizing and managing AI-generated development tasks.

• Built for AI workflows - Visualize tasks created by LLMs
• Real-time updates - Changes to.taskmaster files reflect instantly
• Tagged task organization - Visual separation of different feature contexts
• Kanban board view - Drag and drop tasks between status columns
• Task dependencies - See task relationships and subtasks clearly

Run Task Studio:

npx task-studio@latest

Or install it as a dev dependency:

pnpm add -D task-studiopnpm task-studio

Navigate tohttp://localhost:5565

npx task-studio --help# Show helpnpx task-studio -p 3000# Use custom port (default: 5565)npx task-studio --ws-port 3001# Use custom WebSocket port (default: 5566)npx task-studio --ws-url ws://example.com:8080# Use external WebSocket URLnpx task-studio -d path/to/.taskmaster# Custom .taskmaster directorynpx task-studio --no-open# Don't open browser automatically

Task UI watches your.taskmaster/tasks/tasks.json file and displays:

• AI-generated tasks across different tags
• Current tag context from.taskmaster/state.json
• Task status, priority, and dependencies
• Subtask hierarchies
• Real-time updates as you modify task files

• List view - Compact task list with inline status controls
• Board view - Kanban-style columns for visual task management
• Tag filtering - Switch between different feature contexts
• Search - Find tasks by title or description
• Filters - By status, priority, assignee, or labels

Click any task to see:

• Full description and implementation details
• Test strategy
• Subtasks and dependencies
• Priority and status
• Quick actions for task management

The UI uses WebSocket and file watchers to detect changes to:

• .taskmaster/tasks/tasks.json - Task data
• .taskmaster/state.json - Current tag context
• .taskmaster/config.json - Configuration
• .taskmaster/reports/**/*.json - Analysis reports

• Framework:Next.js 15
• Language:TypeScript
• UI Components:shadcn/ui
• Styling:Tailwind CSS
• State Management:Zustand,Tanstack Query
• Icons:Lucide

pnpm dev# Start development server (port 5565) + WebSocket (port 5566)pnpm build# Build for productionpnpm start# Start production serverpnpm lint# Run ESLintpnpm typecheck# Run TypeScript type checking

• Write operations
• Bulk operations

Contributions welcome! This is an early project focused on making AI tasks more visual and accessible.

• Circle - The beautiful UI template this project is based on
• Task Master - The JSON schema standard for task management

MIT