Break-it-Down turns a goal into a visual task plan. The project combines AI generation with a canvas-style interface for exploring the resulting subtasks.
Implementation focus#
My focus is the contract between generated content and the interface that consumes it. Next.js and TypeScript support the application, with the AI SDK, Gemini, and Zod defining a structured generation path.
The source schema and generation route provide concrete evidence of that boundary. They establish the output shape rather than relying on the model to produce arbitrary prose that the interface must interpret.
Define the plan before rendering it#
The plan schema contains a goal title, an emoji, and a task array. Each subtask has an ID, title, description, and a difficulty chosen from Easy, Medium, or Hard.
The generation route passes that schema to streamed object generation and returns the text stream response. The interface can therefore be designed around known fields while generation progresses.
Separate format from quality#
A valid object can still contain an impractical task or a weak ordering. The schema constrains structure; it does not prove that the proposed plan will achieve the goal.
The ID field is a string. A description requesting unique IDs is different from a schema refinement that enforces uniqueness across the task array. That is a concrete review point for generated lists.
Result and remaining evidence#
The source demonstrates a typed generation contract and an interactive task-plan concept. It does not establish measured planning quality or completed user outcomes. The deployed preview's generic browser title is an identified follow-up in the owning project, separate from this portfolio implementation.
The companion article examines the Zod contract for streamed task plans.