Free forever · No credit card

Feedback that
becomes code.

Annotate anything in the browser, hand it to your AI agent, ship. No Slack threads. No tickets nobody reads. No switching context.

Download CLI — it's free See how it works

Works with any framework · Best results with React · npx @vibeflow-tools/cli kanban · or vf kanban once installed

Vibeflow — localhost:3700
1
$ npx @vibeflow-tools/cli tasks --next
 
[in-progress] Fix button alignment on mobile
id: a3f2e1b8
selector: #auth > button.submit
component: SignupForm
file: src/auth/SignupForm.tsx
line: 42
priority: High
 
▶ Status moved to in-progress. Implement this now.
 
$
// the problem

The gap between your browser
and your AI agent.

You review the agent's work in the browser. You spot issues. Then the hard part: re-explaining every little thing in plain text, hoping the agent understands where to look and what's wrong.

🤖
"The agent changed it, but it's still not right"
Reviewing coding agent output is the hidden cost no one talks about. You open the browser, spot the issue, then go back to your editor and spend minutes describing where the problem is, what it looks like, and what needs to change — in words. The context lives in the browser. Your description is lossy.
💬
"Just sent you a Slack message about it"
Context-switching costs 23 minutes to recover. The fix takes 2 minutes. That ratio is broken.
📸
"Here's a screenshot, the thing on the left"
Screenshots without structure become detective work. Your agent needs selector, text, coordinates — not a JPEG.
📋
"Let me write a ticket for this"
Tickets add ceremony. For a solo dev on a deadline, ceremony is the enemy of shipping.
🔄
"I described it to the AI but it got confused"
Prose descriptions lose precision. Your AI agent works best with structured, reproducible context — not guesswork.
↓
// how it works

Three steps.
Zero ceremony.

One command starts a local server that injects an annotation layer into any HTML file or live app. The rest is just clicking.

1Add overlay
Inject onto any page.
Start the Vibeflow server with one command. Then inject the overlay onto any page — bookmarklet, script tag, or the built-in file server. No browser extension needed.
# drag to bookmarks bar — runs on any tab
keep CLI server running on localhost:3700
# add before </body> while server is running
<script src="http://localhost:3700/vibeflow-overlay.js" data-vibeflow-overlay></script>
# fastest setup for local HTML projects
$ npx @vibeflow-tools/cli serve ./my-app
opens localhost:3700 with overlay enabled
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-tools/cli kanban
or press Alt+A in the browser overlay to toggle annotation mode
 
3Tell the agent
Ship it.
Give your AI agent one command. It claims the next task, implements it, and marks it for review — automatically. Tasks include CSS selector, file, line number, and your note.
 
Get next tasks and implement them:
npx @vibeflow-tools/cli tasks --next
 
// features

Everything a solo dev needs.
Nothing more.

LOCAL-FIRST
Zero cloud required
Runs entirely on your machine. Tasks live in .vibeflow/ in your project — committed to git, readable by any tool.
AGENT-READY
Plug & play with any AI tool
Works with GitHub Copilot, Claude, Cursor, Windsurf — any tool that accepts a prompt. No API keys. No vendor lock-in. Just structured context.
COLLABORATION
SaaS mode for teams
Connect to Vibeflow Cloud for real-time collaboration. Multiple users, shared boards, live cursors. Currently free for early adopters while we build it out.
KANBAN BOARD
Built-in sprint planning
Not just annotations — a full task manager with backlog, in-progress, review, done. View it in the browser or drive it entirely from the CLI.
SCREENSHOTS
Screenshots that attach themselves
Paste a screenshot anywhere in the panel — it attaches to the task. Or let the tool capture it automatically when you annotate an element.
FAST ITERATION
From idea to task in <10 seconds
Open the overlay, click the element, write one sentence. That's it. Your agent has everything it needs. No forms, no categories, no required fields.
// the toolkit

Two packages.
One workflow.

Vibeflow ships as two focused packages — use one or both, depending on your workflow.

@vibeflow-tools/cli
Annotation overlay & task CLI
Inject an annotation layer into any page, capture tasks with CSS selectors and source locations, and drive your AI agent from the command line. Works with any framework, any browser.
npx @vibeflow-tools/cli kanban
Get started → GitHub npm
@vibeflow-tools/prototyping
In-app React variant switching
Companion React library for switching UI variants directly in your running app — numbered dots on each component, URL-persisted state. Zero runtime deps. Works with or without the CLI overlay.
npm install @vibeflow-tools/prototyping
Learn more → Docs npm
// works with your tools

Plug into any AI agent.
No configuration needed.

Vibeflow stores tasks in your project — any tool that can read files or run commands can use them.

GitHub Copilot
Claude / Cursor
Windsurf
opencode
Any CLI agent

Tasks live in .vibeflow/ — plain JSON files in your repo. No API keys. No vendor lock-in. Just structured context your agent can read.

// install

One command.
You're building.

No sign-up. No dashboard. No onboarding. Just install and run.

No installation required
npx @vibeflow-tools/cli kanban
Or install globally for repeated use
npm install -g @vibeflow-tools/cli
After global install — use the short command
vf kanban

Requires Node.js 22+. Works with any app, any framework.

// who it's for

Built for speed.
Made for every team.

Solo developer
You build it, you own it
  • ✓ Annotate your own HTML prototypes
  • ✓ CLI drives your agent directly
  • ✓ Tasks in git — no external service needed
  • ✓ Instant context export for any AI tool
  • ✓ Works offline, forever
Free
Local mode · always free
Team
Coming soon
Designers, PMs, and devs in sync
  • ✓ Shared kanban board in the cloud
  • ✓ Real-time collaboration, live presence
  • ✓ Comments, file attachments, activity feed
  • ✓ Non-devs can annotate, devs can build
  • ⚡ In beta
Free
SaaS mode · sign in with GitHub · collaboration coming soon
// questions

Frequently asked.

Quick answers to common questions.

No. Vibeflow injects via bookmarklet, script tag, or built-in file server. No extensions, no permissions, no store approvals. Works on any page — even production apps.
Yes — React, Vue, Svelte, Next.js, plain HTML, anything that runs in a browser. Best results with React in dev mode (exposes component names and source locations), but it works everywhere.
In .vibeflow/tasks/ inside your project — plain JSON files, versioned in git. No database, no cloud service required. You own your data.
Yes. The --next command atomically claims a task (todo → in-progress), so no two agents ever pick the same task. Safe for parallel workflows.
Forever. Local mode is open source (Apache 2.0) and always free. Vibeflow Cloud for team collaboration is in beta — free for early adopters while we build it out.
Nothing personal. Usage telemetry is opt-in and only collects anonymous usage counts. Your tasks, code, and project data never leave your machine unless you explicitly connect to Vibeflow Cloud.