daonanchao/vibe-kanban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
50d285cfe516ab2e5f523e747d492c83faa64a54
vibe-kanban/docs/supported-coding-agents.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

202 lines
7.9 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
---
title: "Supported Coding Agents"
description: "Complete guide to all coding agents supported by Vibe Kanban, including installation and authentication instructions"
---
Vibe Kanban integrates with a variety of coding agents. These agents are available via `npx` and can be selected when creating task attempts.
<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**
## Installation
Amp is now available via npx - no separate installation required!
## Authentication
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="GitHub Copilot" icon="code">
**GitHub Copilot CLI**
## Installation
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
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">
**Cursor's command-line agent**
## Installation
Install Cursor CLI using the official guide: https://docs.cursor.com/en/cli/installation. On most systems you can run `curl https://cursor.com/install -fsS | bash`, then verify with `cursor-agent --version`.
## Authentication
Sign in with `cursor-agent login` (opens a browser). You can also set the `CURSOR_API_KEY=...` environment variable. Full instructions: https://docs.cursor.com/en/cli/reference/authentication
</Accordion>
<Accordion title="CCR (Claude Code Router)" icon="code">
**Orchestrate multiple Claude Code models**
CCR (Claude Code Router) lets you route coding prompts across different LLM providers and models, and select specialised models for specific tasks like long context, background work, or image understanding.
## Installation
CCR is available via `npx` – no separate installation required.
```bash
npx -y @musistudio/claude-code-router ui
```
This launches the CCR local UI where you configure providers and models.
## Authentication
Authenticate and configure CCR outside of Vibe Kanban. Follow the instructions on the CCR GitHub repo:
- GitHub: https://github.com/musistudio/claude-code-router
You'll add providers, set API keys, and register model names in the CCR UI or via CCR's JSON configuration (see the CCR repo for the schema and file location).
## Configure CCR (Providers and Models)
Configure CCR either via the UI or JSON config.
In the CCR UI (`npx -y @musistudio/claude-code-router ui`):
1) Add providers
- Choose a provider (e.g., `openrouter`, `deepseek`, etc.).
- Enter the required API key(s) and settings for that provider.
2) Add models
- For each provider, register the model identifier (e.g., `moonshotai/kimi-k2-0905`, `deepseek-chat`).
- CCR supports configuring different models for specific cases:
- `default`: general coding
- `background`: lightweight/background operations
- `think`: models that support "thinking" modes
- `longContext`: very long inputs/files
- `webSearch`: models that support web/tool use
- `image`: models with vision capabilities
Note: not all models support web search, thinking, or images. Choose models accordingly in the CCR UI.
### Configure via JSON (optional)
CCR can also be configured via its JSON configuration file. Refer to the CCR GitHub documentation for the exact schema, keys, and file location. Define providers (with API keys) and map the model cases (`default`, `background`, `think`, `longContext`, `webSearch`, `image`) to specific provider/model pairs.
### Example: OpenRouter provider configured in CCR UI
<Frame>
<img src="/images/ccr-openrouter-ui.png" alt="OpenRouter configured in CCR UI" />
</Frame>
### Example: CCR model mapping (default/background/think/etc.)
<Frame>
<img src="/images/ccr-config-example.png" alt="CCR models configuration example" />
</Frame>
## Configure Vibe Kanban
Vibe Kanban does not ship a default configuration for CCR. Add configurations to the existing Claude Code agent:
1) Open the "Coding Agent Configurations" page.
2) Add a new configuration for the Claude Code agent (or edit an existing one).
3) Enable the `claude_code_router` checkbox.
4) Optionally set a model string to target a specific CCR provider/model.
See the [Agent Profiles & Variants](/configuration-customisation/agent-configurations) guide for managing agent configurations.
Model string format: `<provider>,<model-name>`
Examples:
```text
openrouter,moonshotai/kimi-k2-0905
deepseek,deepseek-chat
```
Tips:
- Create multiple configurations if you want easy switching between different models.
- Leave the model string empty if you want CCR to use its own routing based on your CCR UI configuration (e.g., its `default`/`longContext`/etc. mappings).
### Example: Claude Code agent configuration in Vibe Kanban
<Frame>
<img src="/images/vk-ccr-agent-config.png" alt="Claude Code agent configuration in Vibe Kanban" />
</Frame>
## Using CCR in Vibe Kanban
When creating a Task Attempt, select the coding agent and configuration: choose the Claude Code agent, then pick one of your CCR-enabled configurations.
## Troubleshooting
- Authentication errors: verify your API keys/provider settings in CCR (via UI or JSON config).
- Model not found: confirm the model identifier is correct for the chosen provider.
- 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="Gemini CLI" icon="code">
**Google Gemini CLI**
## Installation
Gemini CLI is now available via npx - no separate installation required!
## Authentication
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="OpenCode" icon="code">
**SST's OpenCode**
## Installation
OpenCode is now available via `npx` - no separate installation required!
## Authentication
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">
**Qwen code-focused assistant**
## Installation
Qwen Code is available via npx - no separate installation required!
## Authentication
You need to authenticate with Qwen outside of Vibe Kanban before using it. Please follow the authentication instructions in the official Qwen documentation: https://github.com/QwenLM/qwen-code
</Accordion>
</AccordionGroup>
Reference in New Issue View Git Blame Copy Permalink