docs(kilo-docs): add platform tabs to MCP and shell integration pages

Add VSCode (Pre-release) and CLI tabs to 3 automate pages:

- mcp/using-in-kilo-code.md: Tabbed config tables, CLI commands (including
  logout and debug), transport types, troubleshooting
- extending/shell-integration.md: Platform-specific shell integration
- automate/index.md: Fix stale link to deleted using-in-cli page

MCP timeout correctly shown as 30000ms (verified against
mcp/index.ts:29 DEFAULT_TIMEOUT = 30_000).

Part of the docs platform tabs effort (PR 7 of 8).
Depends on #7497 for infrastructure.
This commit is contained in:
Josh Lambert
2026-03-24 23:25:51 -04:00
parent e475f71591
commit 8304cf44dc
4 changed files with 362 additions and 41 deletions
+3 -2
View File
@@ -29,6 +29,7 @@ export const AutomateNav: NavSection[] = [
{
href: "/automate/extending/auto-launch",
children: "Auto-launch Configuration",
platform: "legacy",
},
{
href: "/automate/mcp/overview",
@@ -53,8 +54,8 @@ export const AutomateNav: NavSection[] = [
{
title: "Tools",
links: [
{ href: "/automate/how-tools-work", children: "How Tools Work" },
{ href: "/automate/tools", children: "Tools Details" },
{ href: "/automate/how-tools-work", children: "How Tools Work", platform: "legacy" },
{ href: "/automate/tools", children: "Tools Details", platform: "legacy" },
],
},
]
@@ -7,6 +7,9 @@ description: "Integrate Kilo Code with your shell environment"
Terminal Shell Integration is a key feature that enables Kilo Code to execute commands in your terminal and intelligently process their output. This bidirectional communication between the AI and your development environment unlocks powerful automation capabilities.
{% tabs %}
{% tab label="VSCode (Legacy)" %}
## What is Shell Integration?
Shell integration is automatically enabled in Kilo Code and connects directly to your terminal's command execution lifecycle without requiring any setup from you. This built-in feature allows Kilo Code to:
@@ -340,6 +343,80 @@ The [VS Code Terminal Integration Test Extension](https://github.com/KJ7LNW/vsce
- Note your environment (OS, VS Code version, shell, and any shell prompt customization)
- Open an issue with these details to help improve shell integration
{% /tab %}
{% tab label="VSCode & CLI" %}
## How Shell Execution Works
The new CLI and extension take a fundamentally different approach to shell execution. Instead of relying on VS Code's terminal shell integration, the CLI spawns and manages shell processes directly using the `bash` tool.
This means:
- **No VS Code shell integration required** — the CLI handles shell execution independently
- **No shell integration setup or troubleshooting** — it works out of the box
- **Consistent behavior** across environments — the same shell execution logic runs whether you use the CLI directly or through the VS Code extension
## The `bash` Tool
The `bash` tool is the primary way the agent executes shell commands. It spawns a persistent shell session and runs commands within it.
### Key Features
- **Working directory control**: Use the `workdir` parameter to run commands in a specific directory, instead of `cd <dir> && <command>` patterns
- **Configurable timeout**: Set a per-command timeout in milliseconds (defaults to 2 minutes)
- **Real-time output streaming**: Command output is streamed back as it's produced
- **Process tree management**: The tool manages the full process tree, ensuring child processes are properly cleaned up
### Security Analysis
Commands are parsed using **Tree-sitter** before execution, enabling:
- Path resolution to detect file access patterns
- External directory detection to flag commands that reach outside the project
- Structured analysis of command intent for safer auto-approval decisions
### Shell Detection
The CLI automatically detects the appropriate shell for your platform using `Shell.acceptable()`. This selects a compatible shell (bash, zsh, etc.) without requiring manual configuration.
## Agent Manager Terminals (VS Code Extension)
When using the Kilo Code VS Code extension with the Agent Manager, each agent session gets its own dedicated VS Code terminal.
### Per-Session Terminals
- Each session creates a terminal named **`Agent: {branch}`**, where `{branch}` is the git branch or worktree the session is working in
- The terminal's working directory is automatically set to the session's worktree directory
- Terminals are standard VS Code integrated terminals — you can interact with them directly
### Keyboard Shortcuts
| Shortcut | Action |
| --------------------------- | --------------------------------------- |
| <kbd>Cmd</kbd>+<kbd>/</kbd> | Focus the session's terminal |
| <kbd>Cmd</kbd>+<kbd>.</kbd> | Return focus to the Agent Manager panel |
### Terminal Context Menu Actions
Right-click in an Agent Manager terminal to access these actions:
- **Add Terminal Content to Context** — sends the terminal's visible output to the agent as context
- **Fix This Command** — asks the agent to diagnose and fix the last failed command
- **Explain This Command** — asks the agent to explain what a command does
## Troubleshooting
Shell execution in the new CLI is significantly simpler than the **VSCode** version's terminal integration. Most issues are resolved by ensuring:
1. **A supported shell is installed**: bash or zsh on macOS/Linux, PowerShell on Windows
2. **The shell is on your PATH**: The CLI needs to find the shell binary
3. **File permissions are correct**: The CLI needs execute permission on the shell binary
If commands fail to execute, check the CLI's log output for error details. The CLI logs the shell it detected and any errors during command execution.
{% /tab %}
{% /tabs %}
## Support
If you've followed these steps and are still experiencing problems, please:
+1 -1
View File
@@ -36,7 +36,7 @@ Connect Kilo Code to external tools and services:
- [**Using MCP in Kilo Code**](/docs/automate/mcp/using-in-kilo-code) — Configuration guide
- [**STDIO & SSE Transports**](/docs/automate/mcp/server-transports) — Local and remote server options
- [**MCP vs API**](/docs/automate/mcp/mcp-vs-api) — When to use MCP
- [**Using MCP in CLI**](/docs/automate/mcp/using-in-cli) — CLI-specific MCP setup
- [**Using MCP in Kilo Code**](/docs/automate/mcp/using-in-kilo-code) — Configure MCP servers
## Integrations
@@ -7,31 +7,46 @@ description: "How to use MCP servers in Kilo Code"
Model Context Protocol (MCP) extends Kilo Code's capabilities by connecting to external tools and services. This guide covers everything you need to know about using MCP with Kilo Code.
{% youtube url="https://youtu.be/6O9RQoQRX8A" caption="Demostrating MCP installation in Kilo Code" /%}
{% youtube url="https://youtu.be/6O9RQoQRX8A" caption="Demonstrating MCP installation in Kilo Code" /%}
## Configuring MCP Servers
MCP server configurations can be managed at two levels:
MCP server configurations can be managed at two levels: **global** (applies across all workspaces) and **project-level** (specific to a single project). Project-level configuration takes precedence over global settings.
1. **Global Configuration**: Stored in the `mcp_settings.json` file, accessible via VS Code settings (see below). These settings apply across all your workspaces unless overridden by a project-level configuration.
2. **Project-level Configuration**: Defined in a `.kilocode/mcp.json` file within your project's root directory. This allows you to set up project-specific servers and share configurations with your team by committing the file to version control. Kilo Code automatically detects and loads this file if it exists.
{% tabs %}
{% tab label="VSCode (Legacy)" %}
**Precedence**: If a server name exists in both global and project configurations, the **project-level configuration takes precedence**.
| Scope | Path | Description |
| ----------- | -------------------- | --------------------------------------------------------------- |
| **Global** | `mcp_settings.json` | Accessible via VS Code settings. Applies across all workspaces. |
| **Project** | `.kilocode/mcp.json` | In your project root. Auto-detected by Kilo Code. |
### Editing MCP Settings Files
Project-level configs can be committed to version control to share with your team.
You can edit both global and project-level MCP configuration files directly from the Kilo Code settings.
{% /tab %}
{% tab label="VSCode" %}
1. Click the {% codicon name="gear" /%} icon in the top navigation of the Kilo Code pane to open `Settings`.
2. Click the `Agent Behaviour` tab on the left side
3. Select the `MCP Servers` sub-tab
4. Click the appropriate button:
- **`Edit Global MCP`**: Opens the global `mcp_settings.json` file.
- **`Edit Project MCP`**: Opens the project-specific `.kilocode/mcp.json` file. If this file doesn't exist, Kilo Code will create it for you.
In the VS Code extension, open **Settings → MCP** to add and manage MCP servers through the UI. Under the hood the extension reads the same config files as the CLI — see the **CLI** tab for file paths and format.
{% image src="/docs/img/using-mcp-in-kilo-code/mcp-installed-config.png" alt="Edit Global MCP and Edit Project MCP buttons" width="600" caption="Edit Global MCP and Edit Project MCP buttons" /%}
{% /tab %}
{% tab label="CLI" %}
Both files use a JSON format with a `mcpServers` object containing named server configurations:
The CLI accepts several config filenames. The recommended file is `kilo.json`:
| Scope | Recommended Path | Also supported |
| ----------- | ------------------------------------ | -------------------------------------------------------------- |
| **Global** | `~/.config/kilo/kilo.json` | `kilo.jsonc`, `opencode.json`, `opencode.jsonc`, `config.json` |
| **Project** | `./kilo.json` or `./.kilo/kilo.json` | `kilo.jsonc`, `opencode.jsonc`, `opencode.json` |
{% /tab %}
{% /tabs %}
## Configuration Format
{% tabs %}
{% tab label="VSCode (Legacy)" %}
Both global and project-level files use a JSON format with a `mcpServers` object containing named server configurations:
```json
{
@@ -51,6 +66,33 @@ Both files use a JSON format with a `mcpServers` object containing named server
_Example of MCP Server config in Kilo Code (STDIO Transport)_
{% /tab %}
{% tab label="VSCode" %}
In the VS Code extension, open **Settings → MCP** and click **Add Server** to configure a new server through the UI. You can also edit the config files directly — see the **CLI** tab for the JSON format.
{% /tab %}
{% tab label="CLI" %}
Add MCP servers under the `mcp` key in your config file. Each server has a unique name that you can reference in prompts.
```json
{
"mcp": {
"my-server": {
"type": "local",
"command": ["npx", "-y", "my-mcp-command"],
"enabled": true
}
}
}
```
You can disable a server by setting `enabled` to `false` without removing it from your config.
{% /tab %}
{% /tabs %}
### Understanding Transport Types
MCP supports three transport types for server communication:
@@ -69,6 +111,9 @@ For more in-depth information about how STDIO transport works, see [STDIO Transp
STDIO configuration example:
{% tabs %}
{% tab label="VSCode (Legacy)" %}
```json
{
"mcpServers": {
@@ -85,6 +130,42 @@ STDIO configuration example:
}
```
{% /tab %}
{% tab label="VSCode" %}
In the VS Code extension, open **Settings → MCP**, click **Add Server**, and choose **Local (stdio)**. Fill in the command, arguments, and optional environment variables through the UI. You can also edit the config files directly — see the **CLI** tab for the JSON format.
{% /tab %}
{% tab label="CLI" %}
```json
{
"mcp": {
"my-local-server": {
"type": "local",
"command": ["npx", "-y", "my-mcp-command"],
"enabled": true,
"environment": {
"API_KEY": "your_api_key"
}
}
}
}
```
#### Local Server Options
| Option | Type | Required | Description |
| ------------- | ------- | -------- | --------------------------------------------------------------------- |
| `type` | String | Yes | Must be `"local"`. |
| `command` | Array | Yes | Command and arguments to run the MCP server. |
| `environment` | Object | No | Environment variables to set when running the server. |
| `enabled` | Boolean | No | Enable or disable the MCP server on startup. |
| `timeout` | Number | No | Timeout in ms for fetching tools from the MCP server. Default: 30000. |
{% /tab %}
{% /tabs %}
#### Streamable HTTP Transport
Used for remote servers accessed over HTTP/HTTPS:
@@ -94,7 +175,8 @@ Used for remote servers accessed over HTTP/HTTPS:
- Requires network access
- Allows centralized deployment and management
Streamable HTTP transport configuration example:
{% tabs %}
{% tab label="VSCode (Legacy)" %}
```json
{
@@ -112,7 +194,43 @@ Streamable HTTP transport configuration example:
}
```
#### SSE Transport
{% /tab %}
{% tab label="VSCode" %}
In the VS Code extension, open **Settings → MCP**, click **Add Server**, and choose **Remote (HTTP)**. Enter the server URL and optional headers through the UI. You can also edit the config files directly — see the **CLI** tab for the JSON format.
{% /tab %}
{% tab label="CLI" %}
```json
{
"mcp": {
"my-remote-server": {
"type": "remote",
"url": "https://my-mcp-server.com/mcp",
"enabled": true,
"headers": {
"Authorization": "Bearer MY_API_KEY"
}
}
}
}
```
#### Remote Server Options
| Option | Type | Required | Description |
| --------- | ------- | -------- | --------------------------------------------------------------------- |
| `type` | String | Yes | Must be `"remote"`. |
| `url` | String | Yes | URL of the remote MCP server. |
| `enabled` | Boolean | No | Enable or disable the MCP server on startup. |
| `headers` | Object | No | HTTP headers to send with requests. |
| `timeout` | Number | No | Timeout in ms for fetching tools from the MCP server. Default: 30000. |
{% /tab %}
{% /tabs %}
### SSE Transport
⚠️ DEPRECATED: The SSE Transport has been deprecated as of MCP specification version 2025-03-26. Please use the HTTP Stream Transport instead, which implements the new Streamable HTTP transport specification.
@@ -143,6 +261,24 @@ SSE configuration example:
}
```
## Managing MCP Servers
{% tabs %}
{% tab label="VSCode (Legacy)" %}
### Editing MCP Settings Files
You can edit both global and project-level MCP configuration files directly from the Kilo Code settings.
1. Click the {% codicon name="gear" /%} icon in the top navigation of the Kilo Code pane to open `Settings`.
2. Click the `Agent Behaviour` tab on the left side
3. Select the `MCP Servers` sub-tab
4. Click the appropriate button:
- **`Edit Global MCP`**: Opens the global `mcp_settings.json` file.
- **`Edit Project MCP`**: Opens the project-specific `.kilocode/mcp.json` file. If this file doesn't exist, Kilo Code will create it for you.
{% image src="/docs/img/using-mcp-in-kilo-code/mcp-installed-config.png" alt="Edit Global MCP and Edit Project MCP buttons" width="600" caption="Edit Global MCP and Edit Project MCP buttons" /%}
### Deleting a Server
1. Press the {% codicon name="trash" /%} next to the MCP server you would like to delete
@@ -178,41 +314,58 @@ MCP tool auto-approval works on a per-tool basis and is disabled by default. To
When enabled, Kilo Code will automatically approve this specific tool without prompting. Note that the global "Use MCP servers" setting takes precedence - if it's disabled, no MCP tools will be auto-approved.
## Finding and Installing MCP Servers
{% /tab %}
{% tab label="VSCode" %}
Kilo Code does not come with any pre-installed MCP servers. You'll need to find and install them separately.
In the VS Code extension, manage MCP servers from **Settings → MCP**:
- **Community Repositories:** Check for community-maintained lists of MCP servers on GitHub
- **Ask Kilo Code:** You can ask Kilo Code to help you find or even create MCP servers
- **Build Your Own:** Create custom MCP servers using the SDK to extend Kilo Code with your own tools
- **Add a server**: Click **Add Server** and fill in the details
- **Enable/disable**: Toggle a server on or off without removing its configuration
- **Delete**: Remove a server from the list
For full SDK documentation, visit the [MCP GitHub repository](https://github.com/modelcontextprotocol/).
The extension also supports the `{env:VARIABLE_NAME}` syntax in config files to reference environment variables (see the **CLI** tab for details).
## Using MCP Tools in Your Workflow
{% /tab %}
{% tab label="CLI" %}
After configuring an MCP server, Kilo Code will automatically detect available tools and resources. To use them:
### CLI Commands
1. Type your request in the Kilo Code chat interface
2. Kilo Code will identify when an MCP tool can help with your task
3. Approve the tool use when prompted (or use auto-approval)
| Command | Description |
| ----------------- | ------------------------------- |
| `kilo mcp list` | List all configured MCP servers |
| `kilo mcp add` | Add an MCP server |
| `kilo mcp auth` | Authenticate with an MCP server |
| `kilo mcp logout` | Log out from an MCP server |
| `kilo mcp debug` | Debug an MCP server connection |
Example: "Analyze the performance of my API" might use an MCP tool that tests API endpoints.
Inside the interactive TUI, use the `/mcps` slash command to toggle MCP servers on or off.
## Troubleshooting MCP Servers
### Environment Variables
Common issues and solutions:
Use `{env:VARIABLE_NAME}` syntax in config files to reference environment variables:
- **Server Not Responding:** Check if the server process is running and verify network connectivity
- **Permission Errors:** Ensure proper API keys and credentials are configured in your `mcp_settings.json` (for global settings) or `.kilocode/mcp.json` (for project settings).
- **Tool Not Available:** Confirm the server is properly implementing the tool and it's not disabled in settings
- **Slow Performance:** Try adjusting the network timeout value for the specific MCP server
```json
{
"mcp": {
"my-server": {
"type": "remote",
"url": "https://mcp.example.com/mcp",
"headers": {
"Authorization": "Bearer {env:MY_API_KEY}"
}
}
}
}
```
{% callout type="tip" %}
**Reduce system prompt size:** If you're not using MCP, turn it off in Settings > Agent Behaviour > MCP Servers to significantly cut down the size of the system prompt and improve performance.
{% /callout %}
{% /tab %}
{% /tabs %}
## Platform-Specific MCP Configuration Examples
{% tabs %}
{% tab label="VSCode (Legacy)" %}
### Windows Configuration Example
When setting up MCP servers on Windows, you'll need to use the Windows Command Prompt (`cmd`) to execute commands. Here's an example of configuring a Puppeteer MCP server on Windows:
@@ -253,3 +406,93 @@ For macOS or Linux, you would use a different configuration:
{% /callout %}
The same approach can be used for other MCP servers on Windows, adjusting the package name as needed for different server types.
{% /tab %}
{% tab label="VSCode" %}
In the VS Code extension, use **Settings → MCP → Add Server** to add any of the examples below through the UI. You can also edit the config files directly — see the **CLI** tab for the JSON format.
{% /tab %}
{% tab label="CLI" %}
### Figma Desktop
Connect to the Figma Desktop app's MCP server:
```json
{
"mcp": {
"Figma Desktop": {
"type": "remote",
"url": "http://127.0.0.1:3845/mcp"
}
}
}
```
### Context7
Add the [Context7](https://github.com/upstash/context7) MCP server for documentation search:
```json
{
"mcp": {
"context7": {
"type": "remote",
"url": "https://mcp.context7.com/mcp"
}
}
}
```
### Everything Test Server
Add the test MCP server for development:
```json
{
"mcp": {
"mcp_everything": {
"type": "local",
"command": ["npx", "-y", "@modelcontextprotocol/server-everything"]
}
}
}
```
{% /tab %}
{% /tabs %}
## Finding and Installing MCP Servers
Kilo Code does not come with any pre-installed MCP servers. You'll need to find and install them separately.
- **Kilo Marketplace:** Browse community-contributed MCP server configurations and agent skills in the [Kilo Marketplace](https://github.com/Kilo-Org/kilo-marketplace). The marketplace includes ready-to-use configs for popular tools like Figma, Sentry, and more.
- **Community Repositories:** Check for community-maintained lists of MCP servers on GitHub
- **Ask Kilo Code:** You can ask Kilo Code to help you find or even create MCP servers
- **Build Your Own:** Create custom MCP servers using the SDK to extend Kilo Code with your own tools
For full SDK documentation, visit the [MCP GitHub repository](https://github.com/modelcontextprotocol/).
## Using MCP Tools in Your Workflow
After configuring an MCP server, Kilo Code will automatically detect available tools and resources. To use them:
1. Type your request in the Kilo Code chat interface
2. Kilo Code will identify when an MCP tool can help with your task
3. Approve the tool use when prompted (or use auto-approval)
Example: "Analyze the performance of my API" might use an MCP tool that tests API endpoints.
## Troubleshooting MCP Servers
Common issues and solutions:
- **Server Not Responding:** Check if the server process is running and verify network connectivity
- **Permission Errors:** Ensure proper API keys and credentials are configured in your `mcp_settings.json` (for global settings) or `.kilocode/mcp.json` (for project settings).
- **Tool Not Available:** Confirm the server is properly implementing the tool and it's not disabled in settings
- **Slow Performance:** Try adjusting the network timeout value for the specific MCP server
{% callout type="tip" %}
**Reduce system prompt size:** If you're not using MCP, turn it off in Settings > Agent Behaviour > MCP Servers to significantly cut down the size of the system prompt and improve performance.
{% /callout %}