Task Hub
Human x AI
Collaboration Canvas
A canvas-based workspace where humans and AI agents collaborate,
branch ideas, and manage tasks together.
Alp Niksarli | DIG 345 Radical Software | Final Project Pitch
The Concept
A canvas-like collaboration tool where humans and AI agents work side by side. Users register agents onto the platform, assign them tasks, and manage everything through a week view and an infinite canvas. The canvas lets users branch out into different topics, placing their thoughts and notes, while agents perform research or agentic work within each branch.
Canvas Workspace
Agent Registry
Week View Tasks
Branching Ideas
Audience & User Story
Students & Researchers
People managing multi-topic projects who want AI to help with parallel research threads.
Solo Developers
Builders who use multiple AI tools and want one place to orchestrate agent work alongside their own notes.
Knowledge Workers
Anyone who thinks spatially and wants to organize tasks, notes, and AI outputs in a visual canvas.
USER STORY
"As a student working on a multi-part research project, I want to create a canvas where I can branch out into sub-topics, assign AI agents to gather sources and summarize findings for each branch, and view my week's tasks in a calendar so that I can manage the complexity of my project without losing track of any thread."
Identity & Style Guide
AI Task Hub
Human x AI Collaboration
COLOR PALETTE
Primary Blue
Cyan Accent
Background
Card Surface
Text White
Muted Text
TYPOGRAPHY
Georgia Serif
Headings & Brand
System Sans-Serif (Calibri)
Body, UI, Labels
DESIGN PRINCIPLES
Clean & Spatial
Node-based UI
Blue + Dark Mode
Minimal Chrome
Competition Scan
M
Miro + AI
miro.com
Infinite whiteboard with AI sidekick for brainstorming and diagramming.
OUR DIFFERENTIATOR
No agent registry, no task assignment to AI, no branching agent workflows.
N
Notion AI
notion.so
Document-based workspace with inline AI writing and Q&A features.
OUR DIFFERENTIATOR
Linear document model with no spatial canvas or multi-agent orchestration.
E
Excalidraw
excalidraw.com
Open-source canvas for sketching diagrams with a hand-drawn feel. Key inspiration for our canvas UX.
OUR DIFFERENTIATOR
Focused on drawing and diagramming. No AI agents, no task management, no branching workflows.
t
tldraw
tldraw.com
Canvas drawing tool with AI-powered shape-to-code generation (make-real).
OUR DIFFERENTIATOR
Focuses on drawing and prototyping, not ongoing task management or agent delegation.
User Flow
What the user sees at each step
Landing Page
Click anywhere
1
Canvas
Create notes
2
Branch Out
Split into sub-topics
3
Assign Agent
Set prompt per branch
4
Review Output
View results in branch
5
Users can branch ideas on the canvas into sub-topics, creating a workspace around each branch. Agents are assigned per branch and work within that context.
Data Flow
How data moves through the application
User Input
Notes, prompts, tasks
Agent Registry
Stored agent configs
(in progress)
Application State
Canvas nodes, connections, tasks, agents
Database
Persist canvas state
Webhook Trigger
Notifies agents on new items
LLM API
Agent executes the task
When a user creates or updates a canvas item, a webhook fires to notify the assigned agent so it can begin work automatically.
Screenshots
Landing page
Click anywhere to start
Canvas (Empty)
Blank infinite canvas. Click anywhere to create a note.
Canvas (Branched)
Notes connected by edges. Agents working on assigned branches with AI buttons and output in branched view
Technology
TECH STACK
Framework
Node.js
Styling
CSS
Canvas Engine
custom SVG canvas
State
Vanilla JavaScript variables
AI Integration
Anthropic Claude API via AWS Bedrock
Agent Triggers
Webhooks (on new canvas items)
Persistence
localStorage
Hosting
Vercel
DEMOS & LIBRARIES TO EXPLORE
React Flow | Excalidraw (canvas UX reference) | Zustand | Next.js API routes | Vercel AI SDK
Explored Questions
Connecting agents into the platform
How do I register and host AI agents so they can plug into the platform? What infrastructure is needed to manage multiple agents and their configurations?
Drag and drop on canvas
How to implement drag and drop for a wide range of actions on the canvas (moving notes, connecting nodes, rearranging branches)? What are the frontend challenges with making this feel smooth?
Rendering multimodal AI output
AI models can return text, code, images, and structured data. How do I render these different output types cleanly in the frontend within canvas nodes?
Webhooks for AI models
How do webhooks work in the context of triggering AI model calls? I need to learn more about setting up webhook-based workflows so agents are notified automatically when new items appear.
Data Sources
Most of the data in AI Task Hub is user-generated: notes, tasks, canvas layouts, agent configurations, and branch structures. LLM APIs are used to aggregate and process this data on the platform, powering the agent workflows that produce research summaries, task outputs, and other results within each canvas branch.
POTENTIAL DATA SOURCES
Anthropic Claude API
Primary LLM for agent task execution
anthropic.com
OpenAI API
Alternative or fallback LLM provider
openai.com
Web Search APIs
Agent research tasks
serper.dev / tavily.com
localStorage / IndexedDB
Client-side persistence for MVP
Browser native
Supabase / Firebase
Backend persistence for production
supabase.com
Project Timeline
Week 1
Proposal
Pitch deck, wireframes, identity, flowcharts
1
Week 2-3
Prototype
Canvas with draggable nodes + connections (proof of concept)
2
Week 4
Design
Figma iterations, moodboard, design system refinement
3
Week 5
Design + Prototype
Combine coded design with working prototype (95%)
4
Week 6
Final Deliverables
Polish, about page, screencast, documentation
5
Task Hub
Thanks!
Alp Niksarli | DIG 345 Radical Software | Final Project Pitch