A browser canvas for product flows, wireframes, and planning sketches.
WireFlow is a Next.js canvas app with shapes, frames, components, layers, documentation panels, export flows, and an MCP bridge for agent-assisted planning.
The live WireFlow canvas for sketching frames, flow elements, components, and planning artifacts.
Problem
Product sketches often live in separate tools or throwaway screenshots, making it harder for agents and implementers to connect the plan to the build.
Story
What I built
A planning and wireframing canvas built with Next.js and React.
The source includes shape tools, frames, component groups, layers, documentation panels, image export, keyboard shortcuts, persistence, and an MCP bridge.
How it works
Open the canvas, create frames, place shapes/text/arrows, group reusable components, annotate elements, and export or persist the workspace.
What it proves
The output is a structured visual plan that can be reviewed by humans and potentially driven or inspected by agents.
