Web-based UI for Taskmaster task management system
npm install task-studioAI task management UI compatible with Task 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:
``bash`
npx task-studio@latest
Or install it as a dev dependency:
`bash`
pnpm add -D task-studio
pnpm task-studio
Navigate to http://localhost:5565
`bash`
npx task-studio --help # Show help
npx 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 URL
npx task-studio -d path/to/.taskmaster # Custom .taskmaster directory
npx 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
`bash``
pnpm dev # Start development server (port 5565) + WebSocket (port 5566)
pnpm build # Build for production
pnpm start # Start production server
pnpm lint # Run ESLint
pnpm 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