Vibeflow MCP server

Vibeflow

Tell your AI agent exactly what to fix — by clicking on it.

Vibeflow eliminates the back-and-forth of describing UI bugs in words. Click any element on a page to create a task with its exact CSS selector, URL, and source location. Your agent gets precise, actionable context — no "the button in the top right" needed.

npm install -g @vibeflow-tools/cli
vibeflow kanban

Why It Matters

AI agents write code fast, but understanding what to change is slow. Describing a UI issue in prose wastes tokens and produces wrong fixes.

Vibeflow turns visual feedback into structured tasks:

• Click any element → instant task with CSS selector, URL, and source file location
• Track on a Kanban board → see everything at a glance, drag between columns
• Agents implement with context → no guessing, no wrong elements, no wasted iterations

Perfect for small UI fixes, broken layouts, spacing issues, and anything where pointing is faster than explaining.

Quick Start

# 1. Embed the overlay into your app (bookmarklet, script tag, or devtools)
#    Visit /inject on your running server for ready-to-use snippets

# 2. Open the Kanban board
vibeflow kanban

# 3. Click elements in your app to annotate, or create tasks on the board

# 4. Your agent picks the next task with full context executing following command
vibeflow tasks --next

Commands

vibeflow kanban [dir]

vibeflow kanban                   # open Kanban board for current directory
vibeflow kanban ./my-project      # open Kanban for a specific project

The Kanban board provides a visual task tracker with drag-and-drop columns, agent status display, and file attachments. Create tasks directly on the board or import them from annotated prototypes.

vibeflow serve [target]

vibeflow serve .                  # serve all HTML files in current directory
vibeflow serve dashboard.html     # serve a single file
vibeflow serve -p 4000 .          # custom port
vibeflow serve --no-open .        # don't open browser automatically
vibeflow serve                    # API-only mode — connects to an existing hosted app

Serve HTML prototypes with the annotation overlay — click any element to create a task with its CSS selector, URL, and source location.

vibeflow tasks

Full task management from the command line — designed to be agent-friendly.

# Pick the next task (auto-claims a ROOT task in todo)
vibeflow tasks --next                             # highest-priority ROOT task in todo
vibeflow tasks --next --type Bug                  # next bug ROOT task only

# List tasks
vibeflow tasks                                    # ROOT tasks only (default: 20 most recent)
vibeflow tasks --children                         # include child tasks
vibeflow tasks --limit 0                          # show all tasks (no limit)
vibeflow tasks --json                             # machine-readable JSON output

# Filter
vibeflow tasks --status todo                      # by status
vibeflow tasks --type Bug                         # by type (Task, Bug, Feature, Enhancement, Research)
vibeflow tasks --user dev@example.com             # by author email
vibeflow tasks --tag frontend --tag urgent        # by tags (AND matching)

# Get full details of a single task
vibeflow tasks --get <id>                         # supports partial ID prefix

Shortened. The full README is on GitHub.