// 3 steps to ship

Simple by design.
Powerful by default.

Run the tool. Annotate your UI. Point your AI agent at the task list. That's the entire workflow.

// requirements

What you need

Required
Node.js 22+
Vibeflow runs on Node.js. Install from nodejs.org or via your package manager. Run node --version to verify.
Recommended
React in dev mode, or sourcemaps enabled
For React apps, run in NODE_ENV=development (the default for next dev). Dev mode exposes component names, source files, and line numbers — giving your agent precise context for every annotation.
1Add overlay
Inject onto any page
Three ways to add the Vibeflow overlay — pick what fits your workflow:

Option A — npx (quickest)
Serve a local folder and the overlay is injected automatically:
$ npx vibeflow serve ./my-app
Opens localhost:3700 with the overlay ready.
Option B — script tag
Add before </body> in your HTML while the CLI server runs:
<script src="http://localhost:3700/vibeflow-overlay.js"
        data-vibeflow-overlay></script>
Option C — bookmarklet
Drag the link below to your bookmarks bar, then click it on any tab:
⚡ Vibeflow annotate
⚠ Drag to bookmarks bar — do not click here. Needs CSP-friendly app or Chrome extension.
2Annotate
Click. Type. Done.
Open localhost:3700 in your browser. Click any element, write a note, set priority. Tasks go straight to .vibeflow/ — versioned in git, live in the Kanban board.
# open kanban board
$ npx vibeflow kanban
or press Alt+A in the browser overlay to toggle annotation mode
3Tell the agent
Ship it.
Tell your AI agent to check the CLI for todo tasks. It reads the list, implements each one, and marks them done — all through the same CLI.
# agent reads todo tasks
$ npx vibeflow tasks --status todo
agents update status, add comments, and link commits automatically

The magic prompt for your agent

Drop this into Copilot, Claude, or Cursor. Your agent discovers all open tasks, implements them, and reports back.

// paste into your agent "Get new tasks from the `npx vibeflow tasks --status todo`
and implement them."
// cli reference

All commands, at a glance

Everything you need. Nothing you don't.

Command Description
Serving
npx vibeflow serve [target]
Serve an HTML folder or proxy a running URL with the annotation overlay injected.
npx vibeflow kanban
Start the server and open the Kanban board in your browser.
Tasks
npx vibeflow tasks
List all tasks. Filter with --status todo, --type Bug, --user email.
npx vibeflow tasks --get <id>
Full task detail: comments, file attachments, and linked commits.
npx vibeflow tasks --add
Create a task from the CLI with --title and --description.
npx vibeflow tasks --edit <id>
Edit a task: set status (--set-status review), add a comment (--comment), link a commit (--commit-message).
Auth & SaaS
npx vibeflow login
Authenticate the CLI against the SaaS backend. Device-flow — no password needed.
npx vibeflow push
Push all local tasks to the SaaS Kanban board.
npx vibeflow status
Show login status, connected workspace, and task statistics.