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

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

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 4.6, GPT-5, DeepSeek и другим) через единый ключ доступа — без необходимости использовать VPN и с удобной оплатой в рублях.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 (Установить).

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

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

Лайфхак перед началом, для удобства можно поменять язык в настройках Kilo Code 

А теперь перейдем к подключению RouterAI к Kilo Code.

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

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

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

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

5. Заполните поля:

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

• Отображаемое имя — введите RouterAI

• Базовый URL — https://routerai.ru/api/v1

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

• Добавьте модель:

• model-id — введите точный ID модели из RouterAI, например anthropic/claude-sonnet-4.6 (рекомендуется для начала).

• Отображаемое имя — введите понятное имя, например Claude 4.6 Sonnet.

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

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

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

Kilo Code читает правила из файла .kilocode/rules/rules.md в корне вашего проекта.

1. Откройте папку вашего проекта в VS Code.

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

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

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

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

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

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

- приложение работает в через docker compose в контейнере web, учитывай это когда нужно выполнить команды в консоли

- вся документация по проекту лежит в папке docs, не забывай актуализировать документацию если что то меняешь

- никогда не используй hardcoded строки на русском в коде

- эталонная локаль - русская (ru)

- После изменений в файлах локали запускай скрипт для проверки bin/compare_locales.rb

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

Теперь в настройках Kilo Code в разделе «Поведение агента» → «Правила» добавьте путь к файлу с инструкцией .kilocode/rules/rules.md. Теперь Kilo Code будет учитывать эти правила во всех сессиях.

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

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

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

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

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

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

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

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

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

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

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

Кейс:
"Добавь фильтрацию по email в разделе invoices в админке".

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

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

1. В настройках Kilo Code перейдите во вкладку «Автоодобрение».

2. Настройте важные инструменты (на ваших скриншотах это Bash, Edit, и Task). Для них установите значение «Спросить» (Ask).

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

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

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

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

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

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

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

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

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

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

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

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