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

docs/core-features/creating-projects.mdx

@@ -36,6 +36,11 @@ Each time a coding agent is executed it runs in a [git worktree](https://git-scm
 
 The dev server script is run whenever you press the "run dev server" button. It's useful for quickly reviewing work after a coding agent has run.
 
+### Cleanup Scripts
+
+Cleanup scripts run after a coding agent finishes it's turn. You can use these to tidy up the workspace, remove temporary files, or perform any post-execution cleanup. For example, you might run `npm run format` to ensure your code is formatted correctly. Treat it like a pre-commit hook in git.
+
+
 ### Copy Files
 
 Comma-separated list of files to copy from the original project directory to the worktree. These files will be copied after the worktree is created but before the setup script runs. Useful for environment-specific files like `.env`, configuration files, and local settings.
@@ -47,11 +52,3 @@ Make sure these files are gitignored or they could get committed!
 ### Project Task Templates
 
 From project settings, you can also configure project-specific task templates. For more details about this feature, see the [project task templates section](/configuration-customisation/creating-task-templates#project-task-templates).
-
-### Cleanup Scripts
-
-Cleanup scripts run after a coding agent finishes. You can use these to tidy up the workspace, remove temporary files, or perform any post-execution cleanup. For example, you might run:
-
-```bash
-npm run clean
-```

docs/core-features/preview-mode.mdx

@@ -0,0 +1,221 @@
+---
+title: "Preview Mode"
+description: "Live preview your web applications with embedded browser viewing and precise component selection for seamless development workflows"
+---
+
+<Frame>
+<img src="/images/preview-mode-overview.png" alt="Preview mode overview showing component selection and hierarchy" />
+</Frame>
+
+## Overview
+
+Preview Mode provides an embedded browser experience within Vibe Kanban, allowing you to test and iterate on your web applications without leaving the development environment. This feature eliminates the need to switch between your browser and Vibe Kanban by providing live preview capabilities and precise component selection tools.
+
+**Key Benefits:**
+- **Embedded viewing**: See your application running directly in Vibe Kanban
+- **Precise component selection**: Click to select specific UI components for targeted feedback
+- **Seamless workflows**: No context switching between tools
+
+## Prerequisites
+
+Before using Preview Mode, ensure you have:
+
+1. **Development server script configured** for your project
+2. **Web Companion installed** in your application (for component selection)
+3. **Project running** a web application that serves to localhost
+
+## Setting Up Preview Mode
+
+<Steps>
+<Step title="Configure Development Server Script">
+  Navigate to your project settings and configure the development server script that starts your local development environment.
+
+  **Common examples:**
+  - `npm run dev` (Vite, Next.js)
+  - `npm start` (Create React App)
+  - `yarn dev` (Yarn projects)
+  - `pnpm dev` (PNPM projects)
+
+  <Frame>
+  <img src="/images/preview-mode-dev-script-config.png" alt="Development server script configuration interface" />
+  </Frame>
+
+  <Tip>
+  Ensure your development server prints the URL (e.g., `http://localhost:3000`) to stdout/stderr for automatic detection.
+  </Tip>
+</Step>
+
+<Step title="Install Web Companion">
+  For precise component selection, install the `vibe-kanban-web-companion` package in your application.
+
+  <Info>
+  **Recommended**: Use the "Install companion automatically" button in the Preview tab to have Vibe Kanban create a task that installs and configures the companion for you.
+  
+  <Frame>
+  <img src="/images/preview-mode-install-companion-button.png" alt="Install companion automatically button in Preview tab" />
+  </Frame>
+  </Info>
+
+  **Manual Installation:**
+
+  Add the dependency to your project:
+  ```bash
+  npm install vibe-kanban-web-companion
+  ```
+
+  Then add the companion to your application:
+
+  <Tabs>
+  <Tab title="Create React App">
+    Add to your `src/index.js` or `src/index.tsx`:
+    ```jsx
+    import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion';
+    import React from 'react';
+    import ReactDOM from 'react-dom/client';
+    import App from './App';
+
+    const root = ReactDOM.createRoot(document.getElementById('root'));
+    root.render(
+      <React.StrictMode>
+        <VibeKanbanWebCompanion />
+        <App />
+      </React.StrictMode>
+    );
+    ```
+  </Tab>
+
+  <Tab title="Next.js">
+    Add to your `pages/_app.js` or `pages/_app.tsx`:
+    ```jsx
+    import { VibeKanbanWebCompanion } from 'vibe-kanban-web-companion'
+    import type { AppProps } from 'next/app'
+
+    function MyApp({ Component, pageProps }: AppProps) {
+      return (
+        <>
+          <VibeKanbanWebCompanion />
+          <Component {...pageProps} />
+        </>
+      )
+    }
+    ```
+  </Tab>
+
+  <Tab title="Vite">
+    Add to your `src/main.jsx` or `src/main.tsx`:
+    ```jsx
+    import { VibeKanbanWebCompanion } from "vibe-kanban-web-companion";
+    import React from "react";
+    import ReactDOM from "react-dom/client";
+    import App from "./App";
+
+    ReactDOM.createRoot(document.getElementById("root")).render(
+      <React.StrictMode>
+        <VibeKanbanWebCompanion />
+        <App />
+      </React.StrictMode>
+    );
+    ```
+  </Tab>
+  </Tabs>
+
+  <Note>
+  The Web Companion is automatically tree-shaken from production builds, so it only runs in development mode.
+  </Note>
+</Step>
+
+<Step title="Start Development Server">
+  In your task's full screen mode, click the **Dev** button (▶️) to start your development server.
+
+  <Frame>
+  <img src="/images/preview-mode-start-dev-server.png" alt="Starting development server from task interface" />
+  </Frame>
+
+  The system will:
+  - Launch your configured development script
+  - Monitor the output for URL detection
+</Step>
+</Steps>
+
+## Using Preview Mode
+
+### Accessing the Preview
+
+Once your development server is running and a URL is detected:
+
+1. **Navigate to Preview tab** in the task details panel
+2. **View embedded application** in the iframe
+3. **Interact with your app** directly within Vibe Kanban
+
+<Frame>
+<img src="/images/preview-mode-interface.png" alt="Preview mode showing embedded application with toolbar controls" />
+</Frame>
+
+### Preview Toolbar Controls
+
+The preview toolbar provides essential controls for managing your preview experience:
+
+<Frame>
+<img src="/images/preview-mode-toolbar.png" alt="Preview toolbar showing refresh, copy URL, and open in browser controls" />
+</Frame>
+
+- **Refresh**: Reload the preview iframe
+- **Copy URL**: Copy the development server URL to clipboard
+- **Open in Browser**: Open the application in your default browser
+
+### Component Selection
+
+When the Web Companion is installed, you can precisely select UI components for targeted feedback:
+
+<Steps>
+<Step title="Activate Selection Mode">
+  Click the floating Vibe Kanban companion button in the bottom-right corner of your application to activate component selection mode.
+
+  <Frame>
+  <img src="/images/preview-mode-component-selection.png" alt="Component selection interface showing selectable elements highlighted" />
+  </Frame>
+</Step>
+
+<Step title="Choose Component Depth">
+  When you click a component, Vibe Kanban shows a hierarchy of components from innermost to outermost. Select the appropriate level for your feedback:
+
+  - **Inner components**: For specific UI elements (buttons, inputs)
+  - **Outer components**: For broader sections (cards, layouts)
+
+  <Frame>
+  <img src="/images/preview-mode-component-depth.png" alt="Component depth selection showing hierarchy of selectable components" />
+  </Frame>
+</Step>
+
+<Step title="Provide Targeted Feedback">
+  After selecting a component, write your follow-up message. The coding agent will receive:
+  - **Precise DOM selector** information
+  - **Component hierarchy** and source file locations
+  - **Your specific instructions** about what to change
+
+  <Check>
+  No need to describe "the button in the top right" - the agent knows exactly which component you mean!
+  </Check>
+</Step>
+</Steps>
+
+## Troubleshooting
+
+If the preview doesn't load automatically, ensure your development server prints the URL to stdout/stderr for automatic detection.
+
+Supported URL formats:
+- `http://localhost:3000`
+- `https://localhost:3000`
+- `http://127.0.0.1:3000`
+- `http://0.0.0.0:5173`
+
+<Note>
+URLs using `0.0.0.0` or `::` are automatically converted to `localhost` for embedding.
+</Note>
+
+## Related Documentation
+
+- [Task Details Full Screen Mode](/core-features/task-details-full-screen) - Complete guide to full screen task management
+- [Creating Task Attempts](/core-features/creating-task-attempts) - Learn about task attempt lifecycle
+- [Reviewing Code Changes](/core-features/reviewing-code-changes) - Analyse and review code modifications
+- [Configuration & Customisation](/configuration-customisation/global-settings) - Customise Vibe Kanban settings

docs/core-features/task-details-full-screen.mdx

@@ -19,11 +19,11 @@ Full screen mode uses a two-column layout:
 ### Left Sidebar
 - **Task Information**: Title, description, and metadata
 - **Development Toolbar**: Primary development actions
-- **TODOs**: Task checklist and progress tracking  
+- **TODOs**: Task checklist and progress tracking
 - **Relationships**: Subtasks and parent task links
 
 ### Right Panel
-- **Tab Navigation**: Switch between Logs, Diffs, and Processes
+- **Tab Navigation**: Switch between Logs, Diffs, Processes, and Preview
 - **Content Area**: Active tab content with real-time updates
 - **Follow-up Section**: Additional context and actions
 
@@ -95,7 +95,7 @@ The Logs tab provides real-time streaming of coding agent activities and reasoni
 <img src="/images/vk-logs.png" alt="Logs tab showing real-time streaming of agent output and process events" />
 </Frame>
 
-#### Diffs Tab  
+#### Diffs Tab
 The Diffs tab provides a visual representation of all code changes made during task execution. It shows a git diff between your branch and the base branch, with syntax highlighting and language-aware code formatting. You can see a summary of added, modified, and deleted files with precise line-by-line change tracking and context.
 
 <Frame>
@@ -111,6 +111,21 @@ The Processes tab displays a timeline view of all running and completed processe
 <img src="/images/vk-processes.png" alt="Processes tab showing timeline of running and completed processes with status tracking" />
 </Frame>
 
+#### Preview Tab
+The Preview tab provides an embedded browser experience for testing web applications directly within Vibe Kanban. When you start a development server, the tab automatically detects the URL and displays your running application in an embedded iframe. This eliminates the need to switch between your browser and Vibe Kanban during development.
+
+**Key features:**
+- **Embedded browser**: View your application running directly in the task interface
+- **Automatic URL detection**: Automatically detects development server URLs from process logs
+- **Component selection**: Use the Web Companion to select specific UI components for precise feedback
+- **Preview toolbar**: Refresh the preview, copy the URL, or open in a new browser tab
+
+<Frame>
+<img src="/images/preview-mode-overview.png" alt="Preview tab showing embedded web application with toolbar controls" />
+</Frame>
+
+For detailed setup instructions and usage guidance, see [Preview Mode](/core-features/preview-mode).
+
 ## Navigation & Controls
 
 ### Keyboard Shortcuts
@@ -130,8 +145,9 @@ The interface gracefully transitions back to the compact sidebar view while pres
 
 ## Related Documentation
 
+- [Preview Mode](/core-features/preview-mode) - Embedded browser preview and component selection
 - [Creating Task Attempts](/core-features/creating-task-attempts) - Learn about task attempt lifecycle
-- [Reviewing Code Changes](/core-features/reviewing-code-changes) - Deep dive into diff analysis  
+- [Reviewing Code Changes](/core-features/reviewing-code-changes) - Deep dive into diff analysis
 - [Resolving Rebase Conflicts](/core-features/resolving-rebase-conflicts) - Handle rebase conflicts and merge issues
 - [Creating Tasks](/core-features/creating-tasks) - Task creation and management
 - [Agent Configurations](/configuration-customisation/agent-configurations) - Customise AI agent behaviour

docs/docs.json

@@ -35,7 +35,8 @@
           "core-features/creating-task-attempts",
           "core-features/reviewing-code-changes",
           "core-features/resolving-rebase-conflicts",
-          "core-features/task-details-full-screen"
+          "core-features/task-details-full-screen",
+          "core-features/preview-mode"
         ]
       },
       {

docs/integrations/vibe-kanban-mcp-server.mdx

@@ -35,30 +35,72 @@ This works if you're adding the Vibe Kanban MCP server to any [supported coding
 
 ### Option 2: Manual Configuration
 
-You can manually add the MCP server to your coding agent's configuration. Add the following configuration to your agent's MCP servers 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", "--mcp"]
+      "args": ["-y", "vibe-kanban@latest", "--mcp"]
     }
   }
 }
 ```
 
-## Using MCP with Coding Agents
+## Available MCP Tools
 
-Once you have the MCP server configured, you can leverage it to streamline your project planning workflow:
+The Vibe Kanban MCP server provides the following tools for managing projects, tasks, and task execution:
 
-1. **Plan Your Work**: Describe a large feature or project to your coding agent
+### 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 coding agent will use the Vibe Kanban MCP server to automatically create structured tasks in your project
+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
 
-### External Coding Agents
+### Planning and Task Creation
 
 ```
 I need to build a user authentication system with the following features:
@@ -71,15 +113,45 @@ I need to build a user authentication system with the following features:
 Then turn this plan into tasks.
 ```
 
-The coding agent will break this down into individual tasks and add them to your Vibe Kanban project automatically.
+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 in "plan mode" within Vibe Kanban
+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 Sub-Tasks**: Ask the coding agent to "create a series of individual tasks for this 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.

docs/supported-coding-agents.mdx

@@ -7,6 +7,28 @@ Vibe Kanban integrates with a variety of coding agents. These agents are availab
 
 <AccordionGroup>
 
+<Accordion title="Claude Code" icon="code">
+**Anthropic's Claude Code**
+
+## Installation
+Claude Code is now available via npx - no separate installation required!
+
+## Authentication
+You need to authenticate with Claude Code outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Claude Code GitHub page](https://github.com/anthropics/claude-code).
+</Accordion>
+
+<Accordion title="OpenAI Codex" icon="code">
+**OpenAI Codex integration**
+
+## Installation
+OpenAI Codex is now available via `npx` - no separate installation required!
+
+## Authentication
+You need to authenticate with OpenAI Codex outside of Vibe Kanban before using it. Please follow the authentication instructions from the [OpenAI help center](https://help.openai.com/en/articles/11369540-using-codex-with-your-chatgpt-plan) to use Codex with your ChatGPT plan.
+
+Alternatively, Codex can be used via the OpenAI API by setting the `OPENAI_API_KEY` environment variable. For more details, see the [OpenAI documentation](https://developers.openai.com/codex/pricing/#use-an-openai-api-key)
+</Accordion>
+
 <Accordion title="Amp" icon="code">
 **Amp code completion agent**
 
@@ -17,14 +39,23 @@ Amp is now available via npx - no separate installation required!
 You need to authenticate with Amp outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Amp Owner's Manual](https://ampcode.com/manual#install).
 </Accordion>
 
-<Accordion title="Claude Code" icon="code">
+<Accordion title="GitHub Copilot" icon="code">
-**Anthropic's Claude Code**
+**GitHub Copilot CLI**
 
 ## Installation
-Claude Code is now available via npx - no separate installation required!
+GitHub Copilot CLI is available via npm. Install it globally:
+
+```bash
+npm install -g @github/copilot
+```
+
+## Prerequisites
+- A GitHub Copilot subscription
+- Node.js version 22 or later
+- npm version 10 or later
 
 ## Authentication
-You need to authenticate with Claude Code outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Claude Code GitHub page](https://github.com/anthropics/claude-code).
+When you first start Copilot CLI, you'll be prompted to authenticate. Follow the on-screen instructions to log in to your GitHub account using the `/login` command. For more details, see the [GitHub Copilot CLI documentation](https://docs.github.com/en/copilot/how-tos/use-copilot-agents/use-copilot-cli).
 </Accordion>
 
 <Accordion title="Cursor CLI" icon="code">
@@ -135,15 +166,7 @@ When creating a Task Attempt, select the coding agent and configuration: choose
 - Missing features (webSearch/think/image): switch to a model that supports the capability and update your CCR mapping (via UI or JSON config).
 </Accordion>
 
-<Accordion title="Codex" icon="code">
-**OpenAI Codex integration**
 
-## Installation
-OpenAI Codex is now available via `npx` - no separate installation required!
-
-## Authentication
-You need to configure your OpenAI API credentials before using Codex. Please set the `OPENAI_API_KEY` environment variable. For more details, see the [OpenAI documentation](https://platform.openai.com/docs/guides/code).
-</Accordion>
 
 <Accordion title="Gemini CLI" icon="code">
 **Google Gemini CLI**
@@ -155,14 +178,14 @@ Gemini CLI is now available via npx - no separate installation required!
 You need to authenticate with Gemini CLI outside of Vibe Kanban before using it. Please follow the authentication instructions on the [Gemini CLI GitHub page](https://github.com/google-gemini/gemini-cli).
 </Accordion>
 
-<Accordion title="SST OpenCode" icon="code">
+<Accordion title="OpenCode" icon="code">
 **SST's OpenCode**
 
 ## Installation
-SST OpenCode is now available via `npx` - no separate installation required!
+OpenCode is now available via `npx` - no separate installation required!
 
 ## Authentication
-You need to authenticate with SST OpenCode outside of Vibe Kanban before using it. Please follow the authentication instructions on the [SST OpenCode GitHub page](https://github.com/sst/opencode).
+You need to authenticate with OpenCode outside of Vibe Kanban before using it. Please follow the authentication instructions on the [OpenCode GitHub page](https://github.com/sst/opencode).
 </Accordion>
 
 <Accordion title="Qwen Code" icon="code">