diff --git a/packages/kilo-docs/pages/code-with-ai/features/autocomplete/index.md b/packages/kilo-docs/pages/code-with-ai/features/autocomplete/index.md index 42c6ebb7af..be5a983a47 100644 --- a/packages/kilo-docs/pages/code-with-ai/features/autocomplete/index.md +++ b/packages/kilo-docs/pages/code-with-ai/features/autocomplete/index.md @@ -8,6 +8,46 @@ description: "AI-powered code autocompletion in Kilo Code" Kilo Code's autocomplete feature provides intelligent code suggestions and completions while you're typing, helping you write code faster and more efficiently. It offers both automatic and manual triggering options. {% tabs %} +{% tab label="VSCode" %} + +{% callout type="info" %} +Autocomplete is an **extension-only** feature. It is not available in the CLI/TUI. +{% /callout %} + +## How Autocomplete Works + +The extension uses **Fill-in-the-Middle (FIM)** completion powered by Codestral (`mistralai/codestral-2508`). It analyzes the code before and after your cursor to generate contextually accurate inline suggestions. + +## Triggering Options + +### Auto-trigger + +Autocomplete is **enabled by default** and automatically shows inline suggestions as you type. Suggestions appear as ghost text that you can accept with `Tab`. + +### Trigger on keybinding (Cmd+L) + +Press `Cmd+L` (Mac) or `Ctrl+L` (Windows/Linux) to manually request a completion at your cursor position. + +{% callout type="note" %} +This keybinding requires `kilo-code.new.autocomplete.enableSmartInlineTaskKeybinding` to be enabled in VS Code settings. It is **disabled by default**. +{% /callout %} + +## Status Bar + +The extension displays an **autocomplete status indicator** in the VS Code status bar, including: + +- Current autocomplete state (active/snoozed) +- Cumulative cost tracking for autocomplete requests + +### Snooze / Unsnooze + +You can temporarily disable autocomplete by clicking the status bar item to **snooze** it. Click again to **unsnooze** and re-enable suggestions. + +## Copilot Conflict Detection + +The extension automatically detects if **GitHub Copilot** inline suggestions are enabled and warns you about potential conflicts. Disable Copilot's inline completions for the best experience with Kilo Code autocomplete. + +{% /tab %} {% tab label="VSCode (Legacy)" %} ## How Autocomplete Works @@ -89,42 +129,6 @@ If using Cursor, go to **Settings** > **Cursor Settings** > **Tab**, and toggle {% image src="https://github.com/user-attachments/assets/fd2eeae2-f770-40ca-8a72-a9d5a1c17d47" alt="Disable Cursor autocomplete" width="800" caption="Disable Cursor autocomplete" /%} -{% /tab %} -{% tab label="VSCode" %} - -{% callout type="info" %} -Autocomplete is an **extension-only** feature. It is not available in the CLI/TUI. -{% /callout %} - -## How Autocomplete Works - -The new extension uses **Fill-in-the-Middle (FIM)** completion powered by Codestral (`mistralai/codestral-2508`). It analyzes the code before and after your cursor to generate contextually accurate inline suggestions. - -## Triggering Options - -### Auto-trigger - -Autocomplete is **enabled by default** and automatically shows inline suggestions as you type. Suggestions appear as ghost text that you can accept with `Tab`. - -### Trigger on keybinding (Cmd+L) - -Press `Cmd+L` (Mac) or `Ctrl+L` (Windows/Linux) to manually request a completion at your cursor position. - -## Status Bar - -The extension displays an **autocomplete status indicator** in the VS Code status bar, including: - -- Current autocomplete state (active/snoozed) -- Cumulative cost tracking for autocomplete requests - -### Snooze / Unsnooze - -You can temporarily disable autocomplete by clicking the status bar item to **snooze** it. Click again to **unsnooze** and re-enable suggestions. - -## Copilot Conflict Detection - -The new extension automatically detects if **GitHub Copilot** inline suggestions are enabled and warns you about potential conflicts. Disable Copilot's inline completions for the best experience with Kilo Code autocomplete. - {% /tab %} {% /tabs %} diff --git a/packages/kilo-docs/pages/code-with-ai/features/browser-use.md b/packages/kilo-docs/pages/code-with-ai/features/browser-use.md index 34e0c5d8fd..a8c2a979a8 100644 --- a/packages/kilo-docs/pages/code-with-ai/features/browser-use.md +++ b/packages/kilo-docs/pages/code-with-ai/features/browser-use.md @@ -14,29 +14,20 @@ Browser Use requires an advanced agentic model. It is typically most reliable wi ## How Browser Use Works {% tabs %} -{% tab label="VSCode (Legacy)" %} - -By default, Kilo Code uses a built-in browser that: - -- Launches automatically when you ask Kilo to visit a website -- Captures screenshots of web pages -- Allows Kilo to interact with web elements -- Runs invisibly in the background - -All of this happens directly within VS Code, with no setup required. - -{% /tab %} -{% tab label="VSCode & CLI" %} +{% tab label="VSCode" %} Kilo Code uses [Playwright](https://playwright.dev/) via MCP (`@playwright/mcp@latest`) for browser automation. The Playwright MCP server is registered dynamically as `kilo-playwright`. -**In the VS Code extension**, browser automation is auto-configured: +Browser automation is auto-configured in the extension: - Toggle it on from **Settings → Browser** tab - Configure `browserAutomation.headless` and `browserAutomation.useSystemChrome` settings - Playwright auto-downloads Chromium on first use -**In CLI-only mode**, you need to manually add the MCP server to your `kilo.json` configuration: +{% /tab %} +{% tab label="CLI" %} + +Kilo Code uses [Playwright](https://playwright.dev/) via MCP (`@playwright/mcp@latest`) for browser automation. Add the MCP server to your `kilo.jsonc` configuration: ```json { @@ -49,7 +40,19 @@ Kilo Code uses [Playwright](https://playwright.dev/) via MCP (`@playwright/mcp@l } ``` -Once configured, Playwright downloads Chromium automatically on first use. +Playwright downloads Chromium automatically on first use. + +{% /tab %} +{% tab label="VSCode (Legacy)" %} + +By default, Kilo Code uses a built-in browser that: + +- Launches automatically when you ask Kilo to visit a website +- Captures screenshots of web pages +- Allows Kilo to interact with web elements +- Runs invisibly in the background + +All of this happens directly within VS Code, with no setup required. {% /tab %} {% /tabs %} @@ -72,30 +75,7 @@ For example: ## How Browser Actions Work {% tabs %} -{% tab label="VSCode (Legacy)" %} - -The browser_action tool controls a browser instance that returns screenshots and console logs after each action, allowing you to see the results of interactions. - -Key characteristics: - -- Each browser session must start with `launch` and end with `close` -- Only one browser action can be used per message -- While the browser is active, no other tools can be used -- You must wait for the response (screenshot and logs) before performing the next action - -### Available Browser Actions - -| Action | Description | When to Use | -| ------------- | ------------------------------ | ------------------------------------- | -| `launch` | Opens a browser at a URL | Starting a new browser session | -| `click` | Clicks at specific coordinates | Interacting with buttons, links, etc. | -| `type` | Types text into active element | Filling forms, search boxes | -| `scroll_down` | Scrolls down by one page | Viewing content below the fold | -| `scroll_up` | Scrolls up by one page | Returning to previous content | -| `close` | Closes the browser | Ending a browser session | - -{% /tab %} -{% tab label="VSCode & CLI" %} +{% tab label="VSCode" %} The Playwright MCP server provides a set of browser tools for interacting with web pages. These tools return screenshots and accessibility snapshots after each action. @@ -118,12 +98,86 @@ Key characteristics: | `browser_select` | Selects an option from a dropdown | Choosing from select elements | | `browser_drag` | Drags an element to a target | Drag-and-drop interactions | +{% /tab %} +{% tab label="CLI" %} + +The Playwright MCP server provides a set of browser tools for interacting with web pages. These tools return screenshots and accessibility snapshots after each action. + +Key characteristics: + +- The browser launches automatically when a browser tool is invoked +- Multiple browser tools can be used in sequence +- Screenshots are captured after each action for visual feedback + +### Available Browser Tools + +| Tool | Description | When to Use | +| -------------------- | ----------------------------------- | ------------------------------------- | +| `browser_navigate` | Navigates to a URL | Opening a web page | +| `browser_click` | Clicks an element on the page | Interacting with buttons, links, etc. | +| `browser_type` | Types text into an input element | Filling forms, search boxes | +| `browser_screenshot` | Captures a screenshot of the page | Inspecting visual state | +| `browser_scroll` | Scrolls the page or a specific area | Viewing content above or below | +| `browser_hover` | Hovers over an element | Revealing tooltips or menus | +| `browser_select` | Selects an option from a dropdown | Choosing from select elements | +| `browser_drag` | Drags an element to a target | Drag-and-drop interactions | + +{% /tab %} +{% tab label="VSCode (Legacy)" %} + +The browser_action tool controls a browser instance that returns screenshots and console logs after each action, allowing you to see the results of interactions. + +Key characteristics: + +- Each browser session must start with `launch` and end with `close` +- Only one browser action can be used per message +- While the browser is active, no other tools can be used +- You must wait for the response (screenshot and logs) before performing the next action + +### Available Browser Actions + +| Action | Description | When to Use | +| ------------- | ------------------------------ | ------------------------------------- | +| `launch` | Opens a browser at a URL | Starting a new browser session | +| `click` | Clicks at specific coordinates | Interacting with buttons, links, etc. | +| `type` | Types text into active element | Filling forms, search boxes | +| `scroll_down` | Scrolls down by one page | Viewing content below the fold | +| `scroll_up` | Scrolls up by one page | Returning to previous content | +| `close` | Closes the browser | Ending a browser session | + {% /tab %} {% /tabs %} ## Browser Use Settings {% tabs %} +{% tab label="VSCode" %} + +Browser automation settings are available under **Settings → Browser**: + +- **Enable browser automation**: Toggle to enable or disable Playwright browser automation +- **Headless mode** (`browserAutomation.headless`): Run the browser without a visible window (default: disabled) +- **Use system Chrome** (`browserAutomation.useSystemChrome`): Use your installed Chrome instead of the bundled Chromium + +{% /tab %} +{% tab label="CLI" %} + +Browser automation requires manual MCP configuration in your `kilo.jsonc` file: + +```json +{ + "mcp": { + "playwright": { + "type": "local", + "command": ["npx", "-y", "@playwright/mcp@latest"] + } + } +} +``` + +No additional settings are needed — the Playwright MCP server manages the browser lifecycle automatically. Chromium is downloaded on first use. + +{% /tab %} {% tab label="VSCode (Legacy)" %} {% callout type="info" title="Default Browser Settings" %} @@ -227,33 +281,5 @@ Connect to a visible Chrome window to observe Kilo's interactions in real-time: google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-debug --no-first-run ``` -{% /tab %} -{% tab label="VSCode & CLI" %} - -### VS Code Extension Settings - -In the VS Code extension, browser automation settings are available under **Settings → Browser**: - -- **Enable browser automation**: Toggle to enable or disable Playwright browser automation -- **Headless mode** (`browserAutomation.headless`): Run the browser without a visible window (default: disabled) -- **Use system Chrome** (`browserAutomation.useSystemChrome`): Use your installed Chrome instead of the bundled Chromium - -### CLI Configuration - -In CLI-only mode, browser automation requires manual MCP configuration in your `kilo.json` file: - -```json -{ - "mcp": { - "playwright": { - "type": "local", - "command": ["npx", "-y", "@playwright/mcp@latest"] - } - } -} -``` - -No additional settings are needed — the Playwright MCP server manages the browser lifecycle automatically. Chromium is downloaded on first use. - {% /tab %} {% /tabs %} diff --git a/packages/kilo-docs/pages/code-with-ai/features/checkpoints.md b/packages/kilo-docs/pages/code-with-ai/features/checkpoints.md index 08c4abd7b7..1c84f5a1b1 100644 --- a/packages/kilo-docs/pages/code-with-ai/features/checkpoints.md +++ b/packages/kilo-docs/pages/code-with-ai/features/checkpoints.md @@ -28,22 +28,12 @@ Checkpoints let you: ## Configuration Options {% tabs %} -{% tab label="VSCode (Legacy)" %} - -Access checkpoint settings in Kilo Code settings under the "Checkpoints" section: - -1. Open Settings by clicking the gear icon {% codicon name="gear" /%} → Checkpoints -2. Check or uncheck the "Enable automatic checkpoints" checkbox - - {% image src="/docs/img/checkpoints/checkpoints.png" alt="Checkpoint settings in Kilo Code configuration" width="500" /%} - -{% /tab %} -{% tab label="VSCode & CLI" %} +{% tab label="VSCode" %} Checkpoints are controlled by the `snapshot` boolean: - **Settings UI**: Open Settings → Checkpoints tab and toggle the snapshot setting -- **Config file**: Set `"snapshot": true` or `"snapshot": false` in your `kilo.json` configuration file +- **Config file**: Set `"snapshot": true` or `"snapshot": false` in your `kilo.jsonc` configuration file ```json { @@ -53,6 +43,29 @@ Checkpoints are controlled by the `snapshot` boolean: When enabled, the system automatically captures snapshots at each step of a task. +{% /tab %} +{% tab label="CLI" %} + +Checkpoints are controlled by the `snapshot` boolean in your `kilo.jsonc` configuration file: + +```json +{ + "snapshot": true +} +``` + +When enabled, the system automatically captures snapshots at each step of a task. + +{% /tab %} +{% tab label="VSCode (Legacy)" %} + +Access checkpoint settings in Kilo Code settings under the "Checkpoints" section: + +1. Open Settings by clicking the gear icon {% codicon name="gear" /%} → Checkpoints +2. Check or uncheck the "Enable automatic checkpoints" checkbox + + {% image src="/docs/img/checkpoints/checkpoints.png" alt="Checkpoint settings in Kilo Code configuration" width="500" /%} + {% /tab %} {% /tabs %} @@ -71,6 +84,34 @@ Checkpoints are stored as Git commits in the shadow repository, capturing: ## Working with Checkpoints {% tabs %} +{% tab label="VSCode" %} + +Checkpoints are captured automatically at each step of a task, recording Git tree objects at each step. + +### Reverting Changes + +- **Full revert**: Revert your workspace to any point in the conversation +- **Undo a revert**: Restore the state before the last revert +- **Per-file revert**: Selectively undo changes to specific files while keeping others + +### Viewing Differences + +Diffs show per-file changes at each step. In the **Agent Manager**, these are displayed in a dedicated diff panel with full before/after file content. + +{% /tab %} +{% tab label="CLI" %} + +Checkpoints are captured automatically at each step of a task, recording Git tree objects at each step. + +In the CLI terminal interface, checkpoints appear as revert points in the conversation. You can revert to any point by selecting the corresponding message. + +### Reverting Changes + +- **Full revert**: Revert your workspace to any point in the conversation +- **Undo a revert**: Restore the state before the last revert +- **Per-file revert**: Selectively undo changes to specific files while keeping others + +{% /tab %} {% tab label="VSCode (Legacy)" %} Checkpoints are integrated directly into your workflow through the chat interface. @@ -118,32 +159,6 @@ To restore a project to a previous checkpoint state: {% image src="/docs/img/checkpoints/checkpoints-9.png" alt="Confirmation dialog for restoring checkpoint with files & task" width="300" /%} -{% /tab %} -{% tab label="VSCode & CLI" %} - -Checkpoints are captured automatically at each step of a task. The system calls `Snapshot.track()` at `start-step` and `finish-step` events, recording Git tree objects via `git write-tree`. - -### CLI TUI - -In the CLI terminal interface, checkpoints appear as revert points in the conversation. You can revert to any point by selecting the corresponding message. - -### Reverting Changes - -The new platform provides flexible revert capabilities: - -- **Full revert**: Use `SessionRevert.revert({ sessionID, messageID, partID })` to revert your workspace to any point in the conversation -- **Undo a revert**: Use `unrevert()` to restore the state before the last revert -- **Per-file revert**: `Snapshot.revert(patches)` can revert individual files via `git checkout -- `, allowing you to selectively undo changes to specific files while keeping others - -### Viewing Differences - -The system provides detailed diff capabilities: - -- `Snapshot.diff()` returns per-file diffs showing what changed at each step -- `Snapshot.diffFull()` returns full before/after file content for detailed review - -In the **Agent Manager** (VS Code extension), these diffs are displayed in a dedicated `DiffPanel` and `FullScreenDiffView`, providing a visual interface for reviewing all file changes made during a session. - {% /tab %} {% /tabs %} diff --git a/packages/kilo-docs/pages/code-with-ai/features/code-actions.md b/packages/kilo-docs/pages/code-with-ai/features/code-actions.md index 323b1fe712..0cf1059a10 100644 --- a/packages/kilo-docs/pages/code-with-ai/features/code-actions.md +++ b/packages/kilo-docs/pages/code-with-ai/features/code-actions.md @@ -12,6 +12,30 @@ Code Actions are a **VS Code extension feature** and are not available in the CL {% /callout %} {% tabs %} +{% tab label="VSCode" %} + +## Available Code Actions + +The extension provides code actions via the editor context menu and lightbulb: + +- **Add to Context:** Adds selected code (with file path and line numbers) to the active chat session. Keyboard shortcut: `Cmd+K Cmd+A` (Mac) or `Ctrl+K Ctrl+A` (Windows/Linux). +- **Explain Code:** Asks Kilo to explain the selected code. +- **Fix Code:** Asks Kilo to fix problems in the selected code. +- **Improve Code:** Asks Kilo to suggest improvements to the selected code. + +### Agent Manager Integration + +If the **Agent Manager** is active, code actions route to the current Agent Manager session rather than the sidebar chat. This allows code actions to work seamlessly within multi-session workflows. + +### Terminal Context Menu + +The extension also adds code actions to the **terminal context menu**: + +- **Add Terminal Content:** Adds selected terminal output to the chat context. +- **Fix Command:** Asks Kilo to fix a failed terminal command. +- **Explain Command:** Asks Kilo to explain a terminal command or its output. + +{% /tab %} {% tab label="VSCode (Legacy)" %} ## What are Code Actions? @@ -97,30 +121,6 @@ You can customize the prompts used for each Code Action by modifying the "Suppor 3. **Edit the Prompts:** Modify the text in the text area for the prompt you want to customize. You can use placeholders like `${filePath}` and `${selectedText}` to include information about the current file and selection. 4. **Click "Done":** Save your changes. -{% /tab %} -{% tab label="VSCode" %} - -## Available Code Actions - -The new extension provides the same core code actions via the editor context menu and lightbulb: - -- **Add to Context:** Adds selected code (with file path and line numbers) to the active chat session. Keyboard shortcut: `Cmd+K Cmd+A` (Mac) or `Ctrl+K Ctrl+A` (Windows/Linux). -- **Explain Code:** Asks Kilo to explain the selected code. -- **Fix Code:** Asks Kilo to fix problems in the selected code. -- **Improve Code:** Asks Kilo to suggest improvements to the selected code. - -### Agent Manager Integration - -If the **Agent Manager** is active, code actions route to the current Agent Manager session rather than the sidebar chat. This allows code actions to work seamlessly within multi-session workflows. - -### Terminal Context Menu - -The new extension also adds code actions to the **terminal context menu**: - -- **Add Terminal Content:** Adds selected terminal output to the chat context. -- **Fix Command:** Asks Kilo to fix a failed terminal command. -- **Explain Command:** Asks Kilo to explain a terminal command or its output. - {% /tab %} {% /tabs %} diff --git a/packages/kilo-docs/pages/code-with-ai/features/git-commit-generation.md b/packages/kilo-docs/pages/code-with-ai/features/git-commit-generation.md index 41fa60a17c..6485311aa0 100644 --- a/packages/kilo-docs/pages/code-with-ai/features/git-commit-generation.md +++ b/packages/kilo-docs/pages/code-with-ai/features/git-commit-generation.md @@ -54,6 +54,17 @@ Common types include: ## Configuration {% tabs %} +{% tab label="VSCode" %} + +The extension provides the same **SCM button** in the VS Code Source Control panel. Clicking it generates a commit message using the CLI backend's commit message generation API. + +Configuration is handled through the extension's settings or the shared `kilo.jsonc` config file. + +{% callout type="info" %} +Git commit message generation is a **VS Code extension feature**. It is not available in the CLI/TUI. +{% /callout %} + +{% /tab %} {% tab label="VSCode (Legacy)" %} ### Customizing the Commit Template @@ -84,17 +95,6 @@ You can configure which API profile to use for commit message generation: Consider creating a dedicated [API configuration profile](/docs/ai-providers) with a faster, more cost-effective model specifically for commit message generation. {% /callout %} -{% /tab %} -{% tab label="VSCode" %} - -The new extension provides the same **SCM button** in the VS Code Source Control panel. Clicking it generates a commit message using the CLI backend's `client.commitMessage.generate()` API. - -Configuration is handled through the extension's settings or the shared `kilo.json` config file. - -{% callout type="info" %} -Git commit message generation is a **VS Code extension feature**. It is not available in the CLI/TUI. -{% /callout %} - {% /tab %} {% /tabs %} diff --git a/packages/kilo-docs/pages/code-with-ai/platforms/cli.md b/packages/kilo-docs/pages/code-with-ai/platforms/cli.md index f6e80b3e11..91b4087112 100644 --- a/packages/kilo-docs/pages/code-with-ai/platforms/cli.md +++ b/packages/kilo-docs/pages/code-with-ai/platforms/cli.md @@ -1,7 +1,7 @@ --- title: "Kilo CLI" description: "Using Kilo Code from the command line" -platform: next +platform: new --- {% callout type="warning" title="Version Notice" %} @@ -168,7 +168,7 @@ Review your code locally before pushing — catch issues early without waiting f Configuration is managed through: - `/connect` command for provider setup (interactive) -- Config files in **`~/.config/kilo/`**: the CLI (Kilo CLI 1.0 from [Kilo-Org/kilocode](https://github.com/Kilo-Org/kilocode)) merges `config.json`, `opencode.json`, and `opencode.jsonc`. Use **`opencode.json`** (or `opencode.jsonc`) for provider, model, permission, and **MCP** settings. Restart the CLI after editing. See [Using MCP in Kilo Code](/docs/automate/mcp/using-in-kilo-code) for MCP config format. +- Config files in **`~/.config/kilo/`**: use **`kilo.jsonc`** for provider, model, permission, and **MCP** settings. Restart the CLI after editing. See [Using MCP in Kilo Code](/docs/automate/mcp/using-in-kilo-code) for MCP config format. - `kilo auth` for credential management ## Slash Commands @@ -176,7 +176,7 @@ Configuration is managed through: The CLI's interactive mode supports slash commands for common operations. The main commands are documented above in the [Interactive Slash Commands](#interactive-slash-commands) section. {% callout type="tip" %} -**Confused about /newtask vs /smol in the IDE?** See the [Using Modes](/docs/code-with-ai/agents/using-modes#understanding-newtask-vs-smol) documentation for details. +**Confused about /newtask vs /smol in the IDE?** See the [Using Agents](/docs/code-with-ai/agents/using-agents#understanding-newtask-vs-smol) documentation for details. {% /callout %} ## Permissions diff --git a/packages/kilo-docs/pages/code-with-ai/platforms/vscode.md b/packages/kilo-docs/pages/code-with-ai/platforms/vscode.md index 8604b5f96f..2db22d89a6 100644 --- a/packages/kilo-docs/pages/code-with-ai/platforms/vscode.md +++ b/packages/kilo-docs/pages/code-with-ai/platforms/vscode.md @@ -8,26 +8,6 @@ description: "Using Kilo Code in Visual Studio Code" Kilo Code is available as two VS Code extensions: the **VSCode (Legacy)** extension and the current **VSCode** version built on the Kilo CLI core. {% tabs %} -{% tab label="VSCode (Legacy)" %} - -## Installation - -{% partial file="install-vscode.md" /%} - -## Key Features - -- **Sidebar chat** — AI-powered chat panel in the VS Code activity bar -- **[Autocomplete](/docs/code-with-ai/features/autocomplete)** — Inline code completions as you type -- **[Code Actions](/docs/code-with-ai/features/code-actions)** — Explain, fix, and improve code from the editor context menu -- **[Modes](/docs/code-with-ai/agents/using-modes)** — Code, Ask, Architect, Debug, Orchestrator, and Review modes -- **[Custom Modes](/docs/customize/custom-modes)** — Define custom modes with `.kilocodemodes` YAML files -- **[MCP](/docs/automate/mcp/overview)** — Connect to MCP servers for extended capabilities -- **[Agent Manager](/docs/automate/agent-manager)** — Multi-session orchestration with git worktree isolation -- **[Git Commit Generation](/docs/code-with-ai/features/git-commit-generation)** — AI-powered commit messages from the Source Control panel -- **[Context Mentions](/docs/code-with-ai/agents/context-mentions)** — Reference files, URLs, diagnostics, and git changes with `@` -- **[Checkpoints](/docs/code-with-ai/features/checkpoints)** — Git-based snapshots for undo/redo - -{% /tab %} {% tab label="VSCode" %} ## Installation @@ -44,9 +24,9 @@ The extension bundles its own CLI binary and spawns `kilo serve` as a background Key features include: - **SolidJS-based UI** — Rebuilt sidebar with a modern component architecture -- **[JSONC config files](/docs/getting-started/settings)** — Portable settings in `kilo.json` instead of VS Code settings +- **[JSONC config files](/docs/getting-started/settings)** — Portable settings in `kilo.jsonc` instead of VS Code settings - **[Granular permissions](/docs/getting-started/settings/auto-approving-actions)** — Per-tool permission rules with glob patterns -- **[Agents](/docs/code-with-ai/agents/using-modes)** — Customizable agents (`.kilo/agents/*.md`) replacing the modes system +- **[Agents](/docs/code-with-ai/agents/using-agents)** — Customizable agents (`.kilo/agents/*.md`) replacing the modes system - **[Agent Manager](/docs/automate/agent-manager)** — Enhanced with diff panel, multi-model comparison, PR import, and code review annotations - **[Autocomplete](/docs/code-with-ai/features/autocomplete)** — FIM-based with Codestral, status bar cost tracking - **[Workflows](/docs/customize/workflows)** — Repeatable prompt templates as `.md` files @@ -58,7 +38,27 @@ Key features include: ## Shared Settings -The extension shares its configuration with the CLI. Settings in `~/.config/kilo/kilo.json` (global) and `./kilo.json` (project) apply to both the CLI and the extension. +The extension shares its configuration with the CLI. Settings in `~/.config/kilo/kilo.jsonc` (global) and `./kilo.jsonc` (project) apply to both the CLI and the extension. + +{% /tab %} +{% tab label="VSCode (Legacy)" %} + +## Installation + +{% partial file="install-vscode.md" /%} + +## Key Features + +- **Sidebar chat** — AI-powered chat panel in the VS Code activity bar +- **[Autocomplete](/docs/code-with-ai/features/autocomplete)** — Inline code completions as you type +- **[Code Actions](/docs/code-with-ai/features/code-actions)** — Explain, fix, and improve code from the editor context menu +- **[Agents](/docs/code-with-ai/agents/using-agents)** — Code, Ask, Architect, Debug, Orchestrator, and Review modes +- **[Custom Modes](/docs/customize/custom-modes)** — Define custom modes with `.kilocodemodes` YAML files +- **[MCP](/docs/automate/mcp/overview)** — Connect to MCP servers for extended capabilities +- **[Agent Manager](/docs/automate/agent-manager)** — Multi-session orchestration with git worktree isolation +- **[Git Commit Generation](/docs/code-with-ai/features/git-commit-generation)** — AI-powered commit messages from the Source Control panel +- **[Context Mentions](/docs/code-with-ai/agents/context-mentions)** — Reference files, URLs, diagnostics, and git changes with `@` +- **[Checkpoints](/docs/code-with-ai/features/checkpoints)** — Git-based snapshots for undo/redo {% /tab %} {% /tabs %}