Files
vibe-kanban/docs/integrations/vibe-kanban-mcp-server.mdx
Britannio Jarrett 8c6f7c6d30 update docs (preview mode, mcp start task tool, GitHub Copilot) (vibe-kanban) (#992)
* update cleanup script docs

* Perfect! I've successfully created comprehensive documentation for the Preview Mode feature and updated the existing documentation. Here's what I've completed:

## New Documentation Created

**[Preview Mode](/core-features/preview-mode)** - A complete guide covering:
- Overview and key benefits
- Prerequisites and setup requirements
- Step-by-step setup instructions for the Web Companion
- Usage instructions with toolbar controls
- Component selection workflow
- Comprehensive troubleshooting section
- Advanced usage examples

## Updated Documentation

**[Task Details Full Screen Mode](/core-features/task-details-full-screen)** - Enhanced with:
- Added Preview tab to the right panel navigation
- New Preview Tab section explaining embedded browser functionality
- Cross-reference link to the detailed Preview Mode documentation
- Updated related documentation links

**[Navigation](/docs.json)** - Added the new preview-mode page to the Core Features section

## Key Features Documented

The documentation covers all the preview mode capabilities you described:
- **Initial setup** requirements and configuration
- **Automatic URL detection** from development server logs
- **Embedded browser** viewing within full screen mode
- **Web Companion installation** for component selection
- **Precise component selection** with Alt+click and context menus
- **Seamless workflows** without leaving Vibe Kanban

The documentation includes placeholder spaces for screenshots as requested, and follows the existing Mintlify documentation patterns with proper formatting, components, and cross-references.

* I've successfully updated the [Vibe Kanban MCP Server documentation](/integrations/vibe-kanban-mcp-server) with comprehensive tool coverage:

## New Documentation Sections Added

**Available MCP Tools** - Complete reference tables organized by category:
- **Project Operations**: `list_projects`
- **Task Management**: `list_tasks`, `create_task`, `get_task`, `update_task`, `delete_task`
- **Task Execution**: `start_task_attempt` (new feature)

**Supported Executors** - Full list of coding agents that can be used with `start_task_attempt`

**Status Values** - Valid kebab-case status values for filtering and updates

## Enhanced Example Usage

**Planning and Task Creation** - Shows how coding agents use the `create_task` tool

**Starting Task Execution** - Demonstrates the new `start_task_attempt` feature with example JSON parameters

**Complete Workflow Example** - End-to-end workflow from listing projects to starting task execution

The documentation now provides a complete reference for all MCP tools, with the new `start_task_attempt` feature prominently highlighted and explained with practical examples.

* Done! I've updated [supported-coding-agents.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/supported-coding-agents.mdx):

1. **Reordered**: Claude Code first, OpenAI Codex second, then Amp
2. **Renamed**: "Codex" → "OpenAI Codex"
3. **Renamed**: "SST OpenCode" → "OpenCode"

* Done! Updated [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx):

1. Added syntax note to Option 2: Manual Configuration
2. Removed type hints from all parameters in MCP tools table
3. Removed the Info callout about `start_task_attempt` being newly added

* Done! Removed the Status Values section from [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx).

* Done! I've updated the terminology in [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx):

- Changed section heading from "Using MCP with Coding Agents" to "Using the MCP Server"
- Replaced "your coding agent" with "your MCP client" in the workflow steps and examples
- Kept references to "coding agents" only where appropriate (e.g., when referring to agents within Vibe Kanban, or the executor parameter for `start_task_attempt`)

* fix docs (vibe-kanban a870f5a1)

The server is live and the docs are accessible via the URL http://localhost:3000/core-features/preview-mode

I'm seeing `🚧 A parsing error occured. Please contact the owner of this website.` on this preview mode page and it seemingly has something to do with the Steps component.

Using the Chrome DevTools that you have access to, you should be able to launch the website and iteratively make changes until this error is no longer present and the preview mode documentation is displaying itself as intended. You can look at recent commits to understand what has been changed with this documentation. You also have access to the Mintlify tools in order to search the official Mintlify documentation in case you need to troubleshoot.

* Done! I've updated the [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx) with:

1. **Emphasized automatic installation** as the recommended approach with an Info callout
2. **Accurate setup steps** from the official README for Create React App, Next.js, and Vite
3. **Removed conditional rendering** (`process.env.NODE_ENV` checks) since tree-shaking handles this automatically
4. **Added note about tree-shaking** to clarify that the companion is automatically removed from production builds

* Done! I've completed both tasks:

1.  Copied the dev server screenshot to [docs/images/preview-mode-start-dev-server.png](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/images/preview-mode-start-dev-server.png)
2.  Removed the "Advanced Usage" section from [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx)

* Done! I've completed all the image updates:

1.  Replaced the dev server start image with the new screenshot
2.  Added all preview mode screenshots:
   - `preview-mode-interface.png` - Preview tab with dev server on
   - `preview-mode-component-selection.png` - Hovering over component with companion
   - `preview-mode-component-depth.png` - Component selected showing hierarchy
3.  Removed all placeholder comments from the Frame elements

* Done! I've completed all 6 review fixes:

1.  Copied dev script config screenshot
2.  Added install companion button screenshot within the Info callout
3.  Removed the false "Automatically switch to Preview tab when ready" line
4.  Added preview toolbar screenshot
5.  Removed "Stop Dev" from toolbar controls (it's not part of the toolbar)
6.  Fixed component selection instructions - now correctly states to click the floating VK companion button in bottom-right corner, removed incorrect Alt+Click and Context Menu instructions

* Done! I've simplified the troubleshooting section to only include the relevant tip about ensuring the development server prints the URL to stdout/stderr for automatic detection, along with the supported URL formats. Removed all the less relevant troubleshooting content.

* Done! I've completed all 3 review fixes:

1.  Removed emojis from toolbar controls (🔄, 📋, 🌐)
2.  Replaced component depth image with new screenshot and moved the old one to the top as an overview image
3.  Removed "IDE" from the overview text - now only mentions switching between browser and Vibe Kanban

* Done! Replaced the overview image with the new screenshot.

* Done! I've fixed both issues in [task-details-full-screen.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/task-details-full-screen.mdx):

1.  Updated toolbar description from "Start, stop, and manage your development server" to "Refresh the preview, copy the URL, or open in a new browser tab"
2.  Changed image from `vk-preview.png` to `preview-mode-overview.png` (same as the preview mode docs page)

* Done! I've added GitHub Copilot to the [supported coding agents documentation](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/supported-coding-agents.mdx). The new section includes:

- Installation instructions via npm (`npm install -g @github/copilot`)
- Prerequisites (Copilot subscription, Node.js 22+, npm 10+)
- Authentication instructions using the `/login` command
- Link to official GitHub Copilot CLI documentation

It's positioned between Amp and Cursor CLI in the list.

* Done! Removed the placeholder comment from [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx).

* remove old preview

* Done! I've updated [vibe-kanban-mcp-server.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/integrations/vibe-kanban-mcp-server.mdx) with both corrections:

1.  Changed "Create a task in 'plan mode'" to mention creating a custom agent profile with a planning prompt, with a link to the Agent Configurations documentation
2.  Changed "Generate Sub-Tasks" to "Generate Tasks" since the MCP server only generates tasks, not sub-tasks

* Done! Removed the "Real-time preview" line from the key benefits section in [preview-mode.mdx](file:///private/var/folders/5q/5vgq75y92dz0k7n62z93299r0000gn/T/vibe-kanban/worktrees/4d6d-update-docs/docs/core-features/preview-mode.mdx).

* update docs on Codex w/ ChatGPT

* update MCP server install command docs
2025-10-10 16:35:20 +01:00

188 lines
7.2 KiB
Plaintext

---
title: "Vibe Kanban MCP Server"
description: "Configure the Vibe Kanban MCP server"
---
Vibe Kanban exposes a local MCP (Model Context Protocol) server, allowing you to manage projects and tasks from external MCP clients like Claude Desktop, Raycast, or even coding agents running within Vibe Kanban itself.
<Note>
This page covers connecting **external MCP clients** to Vibe Kanban's MCP server. For configuring MCP servers **within** Vibe Kanban for your coding agents, see the [MCP Server Configuration](/integrations/mcp-server-configuration) guide.
</Note>
<Info>
Vibe Kanban's MCP server is **local-only** - it runs on your computer and can only be accessed by applications installed locally. It cannot be accessed via publicly accessible URLs.
</Info>
<video
controls
className="w-full aspect-video rounded-xl"
src="https://vkcdn.britannio.dev/vk-mcp-server.mp4"
></video>
## Setting Up MCP Integration
### Option 1: Using the Web Interface
This works if you're adding the Vibe Kanban MCP server to any [supported coding agent](/supported-coding-agents) **within** Vibe Kanban.
1. In Vibe Kanban Settings, navigate to the "MCP Servers" page
2. In the "Popular servers" section, click on the Vibe Kanban card
3. Click the `Save Settings` button
<Frame>
<img src="/images/vk-mcp-server-config.jpeg" alt="MCP Servers configuration page showing how to add Vibe Kanban MCP server" />
</Frame>
### Option 2: Manual Configuration
You can manually add the MCP server to your coding agent's configuration. The exact syntax will depend on your coding agent or MCP client.
Add the following configuration to your agent's MCP servers configuration:
```json
{
"mcpServers": {
"vibe_kanban": {
"command": "npx",
"args": ["-y", "vibe-kanban@latest", "--mcp"]
}
}
}
```
## Available MCP Tools
The Vibe Kanban MCP server provides the following tools for managing projects, tasks, and task execution:
### Project Operations
| Tool | Purpose | Required Parameters | Optional Parameters | Returns |
|------|---------|-------------------|-------------------|---------|
| `list_projects` | Fetch all projects | None | None | List of projects with metadata |
### Task Management
| Tool | Purpose | Required Parameters | Optional Parameters | Returns |
|------|---------|-------------------|-------------------|---------|
| `list_tasks` | List tasks in a project | `project_id` | `status`<br/>`limit` | List of tasks with execution state |
| `create_task` | Create a new task | `project_id`<br/>`title` | `description` | Created task ID and confirmation |
| `get_task` | Get task details | `task_id` | None | Full task information |
| `update_task` | Update task details | `task_id` | `title`<br/>`description`<br/>`status` | Updated task information |
| `delete_task` | Delete a task | `task_id` | None | Deletion confirmation |
### Task Execution
| Tool | Purpose | Required Parameters | Optional Parameters | Returns |
|------|---------|-------------------|-------------------|---------|
| `start_task_attempt` | Start working on a task with a coding agent | `task_id`<br/>`executor`<br/>`base_branch` | `variant` | Attempt ID and confirmation |
### Supported Executors
When using `start_task_attempt`, the following executors are supported (case-insensitive, accepts hyphens or underscores):
- `claude-code` / `CLAUDE_CODE`
- `amp` / `AMP`
- `gemini` / `GEMINI`
- `codex` / `CODEX`
- `opencode` / `OPENCODE`
- `cursor` / `CURSOR`
- `qwen-code` / `QWEN_CODE`
- `copilot` / `COPILOT`
## Using the MCP Server
Once you have the MCP server configured, you can leverage it to streamline your project planning and execution workflow:
1. **Plan Your Work**: Describe a large feature or project to your MCP client
2. **Request Task Creation**: At the end of your task description, simply add "then turn this plan into tasks"
3. **Automatic Task Generation**: Your MCP client will use the Vibe Kanban MCP server to automatically create structured tasks in your project
4. **Start Task Execution**: Use `start_task_attempt` to programmatically begin work on tasks with specific coding agents
## Example Usage
### Planning and Task Creation
```
I need to build a user authentication system with the following features:
- User registration with email validation
- Login/logout functionality
- Password reset capability
- Session management
- Protected routes
Then turn this plan into tasks.
```
Your MCP client will use the `create_task` tool to break this down into individual tasks and add them to your Vibe Kanban project automatically.
### Starting Task Execution
After tasks are created, you can start work on them programmatically:
```
Start working on the user registration task using Claude Code on the main branch.
```
Your MCP client will use the `start_task_attempt` tool with parameters like:
```json
{
"task_id": "123e4567-e89b-12d3-a456-426614174000",
"executor": "claude-code",
"base_branch": "main"
}
```
This creates a new task attempt, generates a feature branch, and starts the coding agent in an isolated environment.
### Complete Workflow Example
```
1. List all projects to find the project ID
2. List todo tasks in the project
3. Create a new task for "Add user profile page"
4. Start a task attempt for the new task using Amp on the develop branch
```
Each step uses the appropriate MCP tool (`list_projects`, `list_tasks`, `create_task`, `start_task_attempt`) to manage the complete workflow from planning to execution.
### Internal Coding Agents (Within Vibe Kanban)
A powerful workflow involves using coding agents within Vibe Kanban that are also connected to the Vibe Kanban MCP server:
1. **Create a Planning Task**: Create a task with a custom agent profile configured with a planning prompt. See [Agent Configurations](/configuration-customisation/agent-configurations) for details on creating custom profiles.
2. **Explore and Plan**: The coding agent explores the codebase and develops a comprehensive plan
3. **Generate Tasks**: Ask the coding agent to "create a series of individual tasks for this plan"
4. **Automatic Population**: The agent uses the MCP server to populate individual tasks directly in the Vibe Kanban interface
This creates a seamless workflow where high-level planning automatically generates actionable tasks in your project board.
## Installation Instructions for MCP Clients
### Raycast Example
Raycast is a popular MCP client that can connect to Vibe Kanban's MCP server. Here's how to configure it:
For complete Raycast MCP configuration details, see the [official Raycast MCP documentation](https://manual.raycast.com/model-context-protocol).
<Tabs>
<Tab title="Step 1: Open MCP Server Installer">
<Frame>
<img src="/images/vk-raycast-mcp-part-1.png" alt="Raycast MCP configuration - adding Vibe Kanban server" />
</Frame>
Configure the Vibe Kanban MCP server in Raycast by adding the server details.
</Tab>
<Tab title="Step 2: Supply Command">
<Frame>
<img src="/images/vk-raycast-mcp-part-2.png" alt="Raycast MCP configuration - server successfully added" />
</Frame>
Once configured, you'll see the Vibe Kanban MCP server listed and ready to use in Raycast.
</Tab>
</Tabs>
<Note>
Similar configuration steps apply to other MCP clients like Claude Desktop, VS Code with MCP extensions, or any custom MCP client implementations.
</Note>