support@routerai.ru

Загрузка...

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

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

Пример использования расширения Kilo code в IntelliJ IDEA

Можно автоматически. Попробуйте установщик RouterAI: одна команда поставит расширение 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. Такой подход открывает доступ к топовым моделям (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-листом и контрольными точками

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

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

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

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

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

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

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

  1. Пройдите регистрацию на платформе RouterAI.

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

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

Интерфейс RouterAI: создание API‑ключа для "Kilo Code"

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

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

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

  1. Откройте 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

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

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

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

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

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

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

Смена языка в Kilo Code перед настройкой пользовательского провайдера и подключением RouterAI в VS Code: раздел Language с выпадающим списком языков

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

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

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

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

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

Настройка пользовательского OpenAI-совместимого провайдера через RouterAI к Kilo Code по базовому URL: раздел Providers, Custom provider, кнопка Connect

В открывшейся форме оставьте в поле 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, например anthropic/claude-sonnet-5.5 (рекомендуется для начала).

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

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

Подключение RouterAI к Kilo Code: пользователь заполнил форму пользовательского OpenAI‑совместимого провайдера

Теперь выберите модель в чате 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

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

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

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

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

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

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

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

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

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

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

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

Настройка правил в Kilo Code: проводник VS Code со структурой .kilo/rules/rules.md и открытым файлом правил; метки: 1 — проводник, 2 — файл rules.md, 3 — содержимое правил

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

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

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

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

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

Добавление пути к файлу с инструкцией в Kilo Code в разделе «Поведение агента» - «Правила»

Больше информации о правилах вы можете найти в официальной документации.

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

Проверка правил в чате Kilo Code: модель Claude Sonnet 5.5 (RouterAI) прочитала .kilo/rules/rules.md и перечислила правила; метки: 1 — вопрос, 2 — ответ с перечнем правил

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 — изменённый файл

На снимке:

  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), прежде чем они попадут в ваш проект

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 обеспечивает это мощностями.

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