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

В этой статье мы настраиваем идеальный сетап для Вайб-кодинга (Vibe Coding) в VS Code. Мы используем легкий и эстетичный инструмент Kilo Code, подключим к нему мощнейшие "мозги" через RouterAI (Claude 4.5 Sonnet, GPT-5.2, DeepSeek V3.2) и создадим среду, где вы ставите задачи, а ИИ понимает контекст проекта и пишет код предлагая diff-правки, которые останется только принять или отклонить.

1. Введение: Вайб-кодинг и почему Kilo Code?

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

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

Почему Kilo Code + RouterAI?

Kilo Code — это свежий взгляд на AI-ассистентов. Он позиционируется как инструмент с "Local-first" философией (работает быстро), минималистичным UI и ощущением нативности в VS Code. Но без хороших моделей он бесполезен.

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

• Vendor Lock-in: Kilo по умолчанию часто предлагает локальные модели, которые слабы для сложных задач, либо требует API ключи от каждого сервиса отдельно.
• Сложности с оплатой: Оплачивать отдельно OpenAI, Anthropic и Google из России — это боль.

Решение: Мы используем Kilo Code как идеальный интерфейс, а "мозги" берем через RouterAI. Это дает доступ к Claude 4.5, GPT-5 и DeepSeek через один ключ, без VPN и с оплатой в рублях.

2. Что такое Kilo Code? Эстетика и скорость

Kilo Code отличается от других плагинов тем, что он старается не перегружать интерфейс VS Code лишними кнопками. Он фокусируется на двух главных режимах вайб-кодинга:

• Chat (Боковая панель): Для обсуждения архитектуры, генерации новых модулей и вопросов "почему это не работает".
• Inline Edit (Редактирование в потоке): Киллер-фича для вайб-кодинга. Вы просто выделяете код, нажимаете хоткей и пишете "сделай это на React Hooks". Kilo показывает Diff (разницу), которую вы принимаете одним нажатием.

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

Kilo Code поддерживает роли, например Архитектор поможет спроектировать фичу не написав ни строчки кода, а кодер ее реализует по плану Архитектора. Роли могут быть любыми наприме Верстальщик, Тестер и так далее. Так же в зависимлсьи от роли вы можете выбирать нужную модель, например anthropic/claude-4.5-sonnet для архитектора и более дешевый deepseek/deepseek-v3.2для кодера.

Так же Kilo code отличается от других плагинов тем что в процессе работы агента создает Todo list по выполнению задачи, а также создает точки сохранения которые позволяют вернуться на определенный этап и продолжить по другому.

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

Чтобы Kilo Code стал умным, нам нужен доступ к API топовых моделей. Мы используем RouterAI как шлюз.

Преимущества остаются теми же:

• OpenAI Compatible API: Kilo Code отлично работает с любыми провайдерами, поддерживающими стандарт OpenAI.
• Доступ к новинкам: Как только выходит Claude 4.5 или GPT-5.2, они появляются в RouterAI, и вы сразу можете использовать их в Kilo.
• Оплата: Карты РФ, СБП, безнал для юрлиц.

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

1. Регистрируемся на RouterAI.
2. Пополняем баланс (модель Pay-as-you-go, платите только за токены).
3. В разделе «Ключи API» создаем новый ключ. Скопируйте его (`sk-or-...`), он понадобится прямо сейчас.

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

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

Установка

1. Откройте VS Code.
2. Перейдите в Extensions (Ctrl+Shift+X).
3. Введите в поиске Kilo Code (или Kilo).
4. Нажмите Install.

Настройка провайдера

Подробно разберем настройку работы kilo code через RouterAI.

Жмем "Use your own API key", так как мы планируем использовать RouterAI в качестве поставщика.

На с следующем экране

1. выбираем API Provider "OpenAI Compatible"
2.  прописываем Base URL https://routerai.ru/api/v1 
3.  API Key который получили на RouterAI на прошлом шаге. Если не получили то получим сейчас здесь.
4. Модель например  anthropic/claude-4.5-sonnet полный список моделей здесь.

Выбор моделей:
Для Kilo Code лучше всего использовать быстрые и умные модели. Рекомендую: anthropic/claude-4.5-sonnet

В плагине много интересных настроек (значек гайки в правом верхнем углу). Я рекомендую 

• Добавить интересные вам модели на вкладке "Провайдеры"
• Установить язык интерфейса и взаимодействия с агентом на вкладке "
• Обязательно посетите вкладку Автоодобрение. По умолчанию Kilo Code вносит правки не спрашивая вашего подтверждения, я рекомендую отключить как минимум эту функцию, чтобы правки всегда были под вашим контролем.

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

Правила это текстовые инструкции на естественном языке о которых Kilo code всегда "помнит". Правила заставляют агента вести себя одинаково в разных сессиях и помнить о важных деталях.

Вы можете управлять правилами в интерфейсе нажав на иконку с весами в правном нижнем углу чата.

Kilo Code создает в проекте папку .kilocode и хранит правила проекта в файле .kilocode/rules/rules.md. 

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

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

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

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

Сетап готов. Как теперь выглядит процесс разработки?

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

Когда нужно понять логику проекта внести изменения или написать функционал с нуля.

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

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

6. Важные нюансы

При использовании связки Kilo + RouterAI помните:

1. Модели имеют значение: Если Kilo начинает "тупить" или забывать код, проверьте, какая модель выбрана. Для сложных задач переключайтесь на Claude 4.5 Sonnet или GPT-5.2. Дешевые модели (Haiku, GPT-4o-mini) хороши для объяснений, но могут ошибаться в коде.
2. Контроль расходов: В RouterAI вы платите за токены. Kilo может отправлять много контекста (историю чата + файлы). Периодически очищайте чат (начинайте новую сессию), чтобы не "кормить" модель лишними токенами и сохранять точность ответов.

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

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

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

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

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