Day Canvas: Building a Planner Shared with AI

What inspired it

Day Canvas began with a simple frustration: planning tools and AI assistants often live in separate places. You might describe a change in a chat, then manually reproduce it in a calendar or task list. I wanted to make that handoff disappear.

The idea was to create a shared workspace where a person and an AI can plan the same day together. Instead of receiving a text-only confirmation, the user can watch the canvas change as the AI adds, moves, prioritizes, or removes work. The result is a planning experience that feels collaborative, visible, and grounded in the actual schedule.

What I built

Day Canvas is a visual daily planner with a timed calendar, a task inbox, priority controls, and day/week/month/year views. Users can add blocks, drag them to reschedule, manage unscheduled tasks, and see overlapping events arranged clearly in separate lanes.

The defining feature is browser-native WebMCP integration. An AI agent can use tools to inspect the schedule, find open time, add or move calendar events, triage inbox tasks, and delete items. Those tool calls operate on the exact same actions as the user interface, so the canvas stays in sync and changes animate live. AI actions also have their own feedback, including activity toasts, a moving cursor for reschedules, and a deletion animation.

How I built it

I built the interface with Next.js, React, TypeScript, and a custom client-side store. The planner canvas renders a vertical time grid, while reusable components handle event cards, calendar views, inbox tasks, theme controls, and agent activity.

The core architectural decision was a single source of truth for task and calendar mutations. Both drag-and-drop interactions and WebMCP tool handlers call the shared functions in lib/taskActions.ts. This keeps UI actions and AI actions consistent: there is one set of validation rules, one state update path, and one way to announce changes.

WebMCP tools are registered in the browser after the app mounts through document.modelContext.registerTool. The AI can therefore reason about the open day using functions such as calendar summary and free-time search, then make a targeted update without a separate MCP server.

For scheduling, the free-time logic treats each event as an occupied interval. If an event begins at (s_i) and lasts (d_i) minutes, its occupied range is

[ [s_i,\; s_i + d_i). ]

After sorting events by start time, the app finds gaps between these ranges and returns the first gap that can fit a requested duration. That makes suggestions practical rather than merely descriptive.

Challenges I faced

The hardest challenge was ensuring that AI edits felt trustworthy. An AI must not be a separate, hidden layer that happens to modify data; its changes need to be understandable to the person looking at the plan. I addressed this by routing agent actions through the same shared action layer as user interactions and by giving those actions visible motion and feedback.

Calendar layout was another challenge. Events can overlap, have very short durations, recur across dates, or belong in different views. I added collision-aware lanes for simultaneous events and compact card layouts for 15- and 30-minute blocks so the calendar remains readable instead of becoming visually crowded.

Finally, browser-native AI integration required careful boundaries. Tool inputs are defined with schemas, calendar updates validate time formats and durations, recurring events require an end date, and free-time calculations distinguish scheduled calendar events from independent inbox tasks. These constraints help the agent make useful changes without creating impossible or ambiguous schedules.

What I learned

This project taught me that AI features are strongest when they are embedded directly in a familiar workflow. The most valuable interaction is not simply asking an AI for advice; it is seeing that advice become an understandable, reversible action in the tool already being used.

I also learned the value of designing state and interaction models before adding intelligence. Because Day Canvas has shared task actions and explicit scheduling rules, the UI and the AI can work together without drifting into separate versions of the truth. Good AI UX depends as much on clear product feedback and reliable state management as it does on the model itself.

Where it can go next

The current project lays the groundwork for authenticated, persistent planning with Clerk and Supabase. Next steps include resilient offline syncing, per-user timezones, production deployment, and richer scheduling assistance that respects priorities, deadlines, and personal working patterns.

Built With

• codex
• nextjs
• supabase