# Вайб-кодинг в VS Code: Настройка Kilo code + RouterAI (Claude)

В этом руководстве мы соберем совершенный сетап для вайб-кодинга (Vibe Coding) на базе VS Code. В качестве основного инструмента мы задействуем эстетичный и легкий [Kilo Code](https://kilo.ai/ "Kilo Code"), усилив его передовыми нейросетями через шлюз [RouterAI](/ "RouterAI") (включая Claude Sonnet 5.5). Мы организуем рабочий процесс таким образом, чтобы ваша роль сводилась лишь к постановке задач: ИИ самостоятельно считает контекст проекта, напишет код и предложит изменения в формате diff, которые вам останется только утвердить или отклонить.

![Пример использования расширения Kilo code в IntelliJ IDEA](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/944d13a05c6f25486302d96ad2286015.png)

> **Можно автоматически.** Попробуйте [установщик RouterAI](/docs/guides/overview/agent-installer): одна команда поставит расширение Kilo Code в VS Code и подключит его к RouterAI. Если что-то не подойдёт, настройте вручную по инструкции ниже.

## IDE поддерживаемые Kilo Code.

Инструкция актуальна для **Visual Studio Code** (macOS/Windows/Linux), а также для **IntelliJ IDEA, PyCharm, WebStorm, PhpStorm, RubyMine, GoLand, Rider, CLion, DataGrip, Android Studio, DataSpell, Aqua и Fleet**.

## 1. Введение: Вайб-кодинга и выбор Kilo Code

Термин **«Vibe Coding»**, популяризированный Андреем Карпатым, меняет подход к программированию. Суть проста: вы становитесь "менеджером", описываете задачи на естественном языке, управляете процессом выполнения задачи по шагам, а работу по написанию кода берет на себя ИИ.

Но чтобы все заработало, нужны подходящие инструменты. Здесь нам помогут **Kilo Code + RouterAI.**

### Почему мы выбираем Kilo Code + RouterAI?

Kilo Code предлагает свежий взгляд на роль ИИ-ассистентов. Этот инструмент опирается на философию «Local-first» (что гарантирует скорость), обладает минималистичным дизайном и воспринимается как нативная часть IntelliJ IDEA. Однако без качественной LLM под капотом даже самый удобный интерфейс бесполезен.

Здесь обычно возникают две классические проблемы:

1. Качество моделей: По умолчанию Kilo часто предлагает использовать локальные нейросети, которые пока не справляются со сложной архитектурой, либо требует вводить API-ключи для каждого провайдера отдельно.

2. Трудности оплаты: Покупка доступа к OpenAI, Anthropic или Google напрямую из России — это сложный и неприятный процесс.

Решение: Мы используем Kilo Code как идеальную оболочку, а «интеллект» подключаем через агрегатор [RouterAI](/ "RouterAI"). Такой подход открывает доступ к топовым моделям (Claude Sonnet 5.5, GPT-5.5, DeepSeek и другим) через единый ключ доступа — без необходимости использовать VPN и с удобной оплатой в рублях.

## 2. Что представляет собой Kilo Code?

Ключевое отличие Kilo Code от аналогов — стремление к чистоте: он не загромождает интерфейс IntelliJ IDEA лишними элементами управления. Инструмент сосредоточен на двух основных сценариях вайб-кодинга:

- **Чат** **(Боковая панель)**: Идеальное место для обсуждения архитектуры, генерации новых модулей с нуля или выяснения причин, почему код не работает.

- **Inline Edit (Редактирование в потоке)**: Вы просто выделяете участок кода, нажимаете хоткей и пишете промпт (например, «перепиши на React Hooks»). Kilo продемонстрирует изменения в виде Diff-диффа, который принимается одним кликом.

Кроме того, Kilo Code индексирует всю кодовую базу (Repo Mapping), благодаря чему ИИ понимает контекст всего проекта целиком, а не только содержимого открытого файла.

Еще одной мощной функцией Kilo Code является гибкая система ролей. Вы можете делегировать задачи разным виртуальным специалистам: например, «Архитектор» спроектирует фичу, не написав ни строчки кода, а «Кодер» реализует её строго по утвержденному плану. Набор ролей полностью настраиваем — вы можете добавить «Верстальщика», «Тестировщика» и кого угодно еще.

Кроме того, система позволяет гибко управлять используемыми моделями под каждую роль. Это отличный способ оптимизации: для сложных задач Архитектора можно подключить топовую `anthropic/claude-sonnet-5.5`, а для рутинной работы Кодера выбрать более экономичную `deepseek/deepseek-v3.2`

Однако выделяется Kilo Code не только интерфейсом. У него есть уникальные агентные функции: в процессе работы он автоматически формирует Todo-лист (план выполнения задачи) и создает контрольные точки сохранения. Это позволяет гибко управлять разработкой: вы всегда можете откатиться на определенный этап и попробовать пойти другим путем.

![Интерфейс агента Kilo Code с автоматическим Todo-листом и контрольными точками](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/334aac7e51406a8efaba9d71a3b23280.png)

## 3. RouterAI: Единый ключ доступа

Чтобы Kilo Code превратился из просто удобного интерфейса в мощный инструмент, ему необходим доступ к API топовых языковых моделей. В качестве интеллектуального шлюза мы будем использовать сервис RouterAI.

Преимущества такого решения очевидны:

- **Полная совместимость с OpenAI API:** Kilo Code без проблем работает с любыми провайдерами, поддерживающими этот стандарт, что гарантирует стабильное соединение.

- **Доступ к передовым технологиям:** Как только выходят новинки уровня Claude Sonnet 5.5 или GPT-5.5, они оперативно появляются в RouterAI. Вы сможете использовать их в Kilo сразу же, не дожидаясь обновлений самого плагина.

- **Удобство оплаты:** Никаких сложностей с зарубежными транзакциями — доступны российские карты, СБП и безналичный расчет для юридических лиц.

**Быстрый старт:**

1. Пройдите регистрацию на платформе [RouterAI](/ "RouterAI").

2. Пополните баланс удобным способом (работает честная модель Pay-as-you-go: вы платите только за фактически потраченные токены).

3. В разделе «Ключи API» сгенерируйте новый ключ доступа. Скопируйте его (он начинается на sk-...) — он понадобится нам прямо сейчас для настройки IDE.

![Интерфейс RouterAI: создание API‑ключа для "Kilo Code"](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/42ce874bc71c33ba9afbbf7be6ec33a3.png)

## 4. Техническая часть: Настройка Kilo Code + RouterAI

Установим расширение и "подружим" его с RouterAI.

### Установка Kilo Code в VS Code

1. Откройте [Visual Studio Code](https://code.visualstudio.com "Visual Studio Code"), предварительно установив его.

2. Перейдите в раздел расширений: нажмите на иконку с четырьмя квадратиками на левой панели или Cmd+Shift+X (Mac) / Ctrl+Shift+X (Win).

3. В поиске введите Kilo Code.

4. Нажмите Install (Установить).

![Страница с установкой расширения Kilo Code в Visual Studio Code: шаги 2–4 — раздел расширений, поиск Kilo Code, кнопка Install](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/80e8cc371cdd66da5522688a5890eaa5.png)

5. После установки перезапустите VS Code (закройте и откройте заново).

### Настройка провайдера (OpenAI Compatible)

Лайфхак перед началом: по умолчанию язык интерфейса Kilo Code совпадает с языком VS Code (значение Auto), поэтому он может быть английским. Для удобства можно переключить его на русский:

1. Нажмите на **иконку шестерёнки** (Settings) в правом верхнем углу панели Kilo Code.

2. В левом меню выберите **Language** («Язык»).

3. В выпадающем списке выберите **«Русский»**.

![Смена языка в Kilo Code перед настройкой пользовательского провайдера и подключением RouterAI в VS Code: раздел Language с выпадающим списком языков](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/e7652d6d0fde0ced60ba8995c17a1746.png)

А теперь перейдем к подключению RouterAI к Kilo Code. Ниже в скобках указаны названия пунктов в английском интерфейсе.

1. Откройте **панель Kilo Code** (белый логотип) на панели слева.

2. На панели Kilo Code нажмите на **иконку шестерёнки** (⚙️) в правом верхнем углу — в отдельной вкладке откроются настройки.

3. В левом меню выберите **«Провайдеры»** (Providers).

4. Прокрутите вниз до раздела **«Пользовательский провайдер»** (Custom provider) и нажмите **«Подключить»** (Connect).

![Настройка пользовательского OpenAI-совместимого провайдера через RouterAI к Kilo Code по базовому URL: раздел Providers, Custom provider, кнопка Connect](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/f72506c8752d64a966aa8b4bc4917a65.png)

В открывшейся форме оставьте в поле Provider API значение **OpenAI Compatible** и заполните поля:

1. **ID провайдера** (Provider ID) — введите короткое имя латиницей, например routerai (только строчные буквы, цифры, дефисы, подчёркивания).

2. **Отображаемое имя** (Display name) — введите `RouterAI`

3. **Базовый URL** (Base URL) — `https://routerai.ru/api/v1`

4. **API-ключ** (API key) — вставьте ваш ключ (начинается на sk-...).

5. **ID модели** (Models → ID) — введите точный ID модели из [RouterAI](/models/ "RouterAI"), например anthropic/claude-sonnet-5.5 (рекомендуется для начала).

6. **Имя модели** (Models → Name) — введите понятное имя, например `Claude Sonnet 5.5`.

Затем нажмите кнопку **Submit** внизу формы — появится сообщение «RouterAI connected».

![Подключение RouterAI к Kilo Code: пользователь заполнил форму пользовательского OpenAI‑совместимого провайдера](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/bad40715232fdca8de9bec861d3dd40f.png)

Теперь выберите модель в чате Kilo Code:

1. Внизу панели чата нажмите на название текущей модели (по умолчанию Auto Free) — откроется список моделей.

2. Найдите модель провайдера RouterAI (например, введите Claude Sonnet 5.5 в строку поиска) и нажмите **Select**.

После этого выбранная модель отобразится внизу чата Kilo Code.

![Подключение RouterAI к Kilo Code: в чате Kilo Code открыт список моделей, для провайдера RouterAI выбрана модель Claude Sonnet 5.5; метки: 1 — список моделей, 2 — кнопка Select](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/5e245be78b05fd5b5243a481426a1937.png)

## 5. Работа с правилами в Kilo Code

Правила — это текстовые инструкции на естественном языке, о которых Kilo Code «помнит» постоянно. Это фундаментальная функция для серьезной работы: правила заставляют агента вести себя предсказуемо и одинаково в разных сессиях, а также удерживать в фокусе важные детали вашего проекта, о которых вы не хотите напоминать каждый раз.

В актуальных версиях Kilo Code (7.8.x) проектные правила лежат в каталоге `.kilo/rules/` в корне вашего проекта и подключаются через ключ `instructions` в файле `kilo.jsonc` (например, `"instructions": [".kilo/rules/*.md"]`). Прежний каталог `.kilocode/rules/` по-прежнему поддерживается для обратной совместимости, но для новых проектов лучше использовать `.kilo/rules/` ([документация](https://kilo.ai/docs/customize/custom-rules)).

1. Откройте папку вашего проекта в VS Code (панель Explorer).

2. Создайте структуру:

  - Правой кнопкой мыши в панели проводника → **«New Folder»** → назовите `.kilo`

  - Внутри `.kilo` создайте папку `rules`.

  - Внутри rules создайте файл `rules.md`.

3. Откройте `rules.md` и вставьте ваши правила.

**Вот пример правил:**

> - приложение работает через docker compose в контейнере web, учитывай это когда нужно выполнить команды в консоли
> - вся документация по проекту лежит в папке docs, не забывай актуализировать документацию если что то меняешь
> - никогда не используй hardcoded строки на русском в коде
> - эталонная локаль - русская (ru)
> - после изменений в файлах локали запускай скрипт для проверки bin/compare\_locales.rb

4. Сохраните файл.

![Настройка правил в Kilo Code: проводник VS Code со структурой .kilo/rules/rules.md и открытым файлом правил; метки: 1 — проводник, 2 — файл rules.md, 3 — содержимое правил](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/5a3e411a95c512a7bef3524541a9e7d6.png)

Теперь подключите файл к Kilo Code, чтобы он учитывал правила во всех сессиях:

1. В настройках Kilo Code откройте раздел **«Поведение агента»** (Agent Behaviour).

2. Перейдите на вкладку **«Правила»**.

3. В поле «Дополнительные файлы инструкций» введите путь `.kilo/rules/rules.md`.

4. Нажмите **«Добавить»**.

![Добавление пути к файлу с инструкцией в Kilo Code в разделе «Поведение агента» - «Правила»](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/2554c558faf385b3ebdd58845715307e.png)

Больше информации о правилах вы можете найти в [официальной документации.](https://kilo.ai/docs/customize/custom-rules "официальной документации.")

Можно проверить, что инструкция учитывается в Kilo Code. Для этого введите в чате:  
*“Прочитай мои правила из .kilo/rules/rules.md и скажи, какие там инструкции”.*

![Проверка правил в чате Kilo Code: модель Claude Sonnet 5.5 (RouterAI) прочитала .kilo/rules/rules.md и перечислила правила; метки: 1 — вопрос, 2 — ответ с перечнем правил](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/b61f80521898d2faa3607b0076cf59af.png)

## 5. Workflow: Вайб-кодинг на практике

Сетап готов. Посмотрим что мы получили.

### Проверка работоспособности

1. Откройте чат Kilo Code.

2. Внизу убедитесь, что выбрана правильная модель (например, RouterAI / Claude Sonnet 5.5).

3. Напишите простой запрос:  
*«Напиши функцию на Python, которая складывает два числа, с комментарием».*

4. Дождитесь ответа. Если всё настроено верно, вы увидите код с комментариями (желательно на русском, если вы прописали такое правило).

### Чат с контекстом

Открываем чат Kilo Code и описываем задачу на естественном языке. Через символ @ можно добавить в контекст нужные файлы, но и без этого Kilo сам найдет то что ему потребуется для реализации.

**Кейс:**  
*"Добавь в app.py команду search, фильтрующую счета по части email".*

![Чат Kilo Code: задача выполнена моделью RouterAI / Claude Sonnet 5.5, правка app.py с +19 -3 строками; метки: 1 — выбранная модель, 2 — изменённый файл](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/a85df55c130522e5eb396d262a4698ff.png)

На снимке:

1. Внизу чата выбрана модель RouterAI / Claude Sonnet 5.5.

2. Kilo изменил `app.py`: строка Write показывает число добавленных и удалённых строк (+19 −3). Если для инструмента Edit стоит «Спросить», перед записью появится diff с кнопками Allow once / Deny.

## 6. Настройка Автоодобрений 

​​Чтобы вы всегда могли просмотреть изменения (Diff), прежде чем они попадут в ваш проект, выполните следующие шаги:

1. В настройках Kilo Code перейдите в раздел **«Автоодобрение»** (Auto-Approve).

2. Для инструмента **Bash** убедитесь, что установлено значение **«Спросить»** (Ask) — оно используется по умолчанию.

3. Для инструмента **Edit** выберите значение **«Спросить»** (по умолчанию стоит «Разрешить»).

4. Для инструмента **Task** также выберите значение **«Спросить»**.

После изменений нажмите **«Сохранить»** внизу страницы настроек.

![Настройка Автоодобрений в настройках Kilo Code для предварительно просмотра изменения (Diff), прежде чем они попадут в ваш проект](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/163f063f35535b64923b2ca2ea3a9365.png)

## 6. Важные нюансы использования

При работе в связке Kilo Code + RouterAI стоит учитывать несколько моментов, которые напрямую влияют на продуктивность и стоимость разработки:

- **Модель имеет значение.** Если вы заметили, что Kilo начинает «галлюцинировать», терять нить рассуждения или выдавать нерабочий код — первым делом проверьте выбранную модель. Для сложных задач и написания кода используйте флагманы: anthropic/claude-sonnet-5.5 или openai/gpt-5.5. Бюджетные модели (например, anthropic/claude-haiku-5.5 или openai/gpt-5.4-mini) хороши для объяснения концепций или генерации документации, но в реализации логики могут допускать ошибки.

- **Гигиена контекста и контроль расходов.** В RouterAI вы платите за количество обработанных токенов. Для понимания задачи Kilo отправляет в модель не только ваш текущий запрос, но и всю историю чата, а также содержимое релевантных файлов. Со временем контекст растет, удорожая каждый запрос.

- **Автоодобрение изменений.**  
В настройках Kilo Code (раздел «Автоодобрение») рекомендуется отключить автоматическое применение правок, чтобы вы всегда могли просмотреть diff и подтвердить изменения.

> **Совет:** Регулярно очищайте чат (начинайте новую сессию) после завершения этапа задачи. Это не только сэкономит деньги, но и повысит качество ответов, так как модель перестанет отвлекаться на устаревший контекст.

## 7. Заключение

Мы собрали сетап для настоящего вайб-кодинга:

- **Kilo Code** дает легкость, скорость и удобный Inline-редактор без лишнего визуального шума.

- **RouterAI** обеспечивает интеллект уровня Top-Tier моделей (Claude, GPT, Gemini) без проблем с доступом из РФ и корпоративной бюрократии.

Теперь используйте интерфейс VS Code для комфортной разработки. Вы ставите задачи, Kilo пишет код, а RouterAI обеспечивает это мощностями.

Удачного вайб-кодинга! 🚀