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

**В этой статье** превращаем VS Code в **интеллектуальный центр** разработки при помощи плагина [Cline](https://cline.bot/ "Cline"). Мы подключим любые ИИ-модели (на примере **Claude Sonnet 5.5**, **Gemini 3.1 Pro**, **DeepSeek V4 Flash**, **Grok**, **GPT-5.5**) через [RouterAI](/ "RouterAI"). Вы получите не просто "помощника", а полноценного цифрового сотрудника, который сам умеет редактировать файлы, создавать новые модули, запускать команды в терминале и исправлять ошибки. Вам остается только наблюдать и подтверждать действия.

![Пример использования расширения Cline в VSCode](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/store/pages/cline.png)

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

## 1. Введение: Cline в VS Code. {#1-vvedenie-cline-v-vs-code-avtonomiya-vmesto-avtodopolneniya}

Сегодня когда тренд смещается от AI-Chat к  **AI-Agents** нам уже мало, чтобы нейросеть просто генерировала сниппет кода, который нужно копировать. Мы хотим, чтобы она сама открыла файл, нашла нужную строку, внесла правки, сохранила и запустила тесты.

Стандартные решения имеют проблемы:

- **Ограниченный функционал:** Обычные чаты не умеют выполнять команды в терминале (например, `npm install`) или создавать сложную структуру папок.
- **Vendor Lock-in и Оплата:** Использование оригинальных API Anthropic или OpenAI из России — это танцы с бубном, VPN и зарубежные карты.

### Решение: Cline + RouterAI

Мы соберем сетап, который превращает вас из "наборщика кода" в "архитектора решений":

1. [**Cline**](https://cline.bot/ "Cline") — open-source расширение для VS Code, которое позиционируется как автономный AI агент. Он может читать файлы, редактировать их, использовать терминал и даже браузер.
2. **[RouterAI](https://routerai.ru/ "RouterAI")** — наш шлюз к лучшим моделям. Результат работы Cline зависит от того что вы используете под капотом например, Claude Sonnet 5.5 или GPT-5.5. RouterAI дает доступ ко всем моделям из РФ с оплатой в рублях.

## 2. Что такое Cline? Анатомия агента

Cline (ранее известный как Claude Dev) - это инструмент, который выводит взаимодействие с LLM на новый уровень.

Основные суперсилы Cline:

- **Работа с файловой системой:** Он не просто показывает код в чате. Он создает файлы, удаляет их, переименовывает и редактирует конкретные куски текста.
- **Терминал:** Это киллер-фича. Cline может выполнить `ls`, чтобы посмотреть структуру, `cat`, чтобы прочитать файл, или запустить сервер разработчика, и прочитать вывод ошибки из консоли, чтобы самому же её исправить.
- **Model Context Protocol (MCP):** Cline поддерживает стандарт подключения внешних инструментов. Вы можете дать ему доступ к базе данных PostgreSQL или локальному серверу документации.
- **Человек в контуре (Human-in-the-loop):** Перед каждым критическим действием (запись в файл или команда в терминале) Cline спрашивает вашего разрешения. Вы полностью контролируете процесс.

**Итог:** Cline — это разработчик, встроенный в ваш VS Code. А уровень этого разработчика напрямую зависит от выбранной модели, которую мы ему подключим через RouterAI.

## 3. RouterAI: получаем ключ ко всем моделям

Поскольку Cline выполняет сложные цепочки действий, ему нужны модели с высоким интеллектом и большим контекстным окном. Идеальный кандидат, на котором Cline показывает лучшие результаты — это  **Claude Sonnet 5.5**. Также отлично справляются новые модели **DeepSeek V4 Flash**  и **GPT-5.5**.

Мы используем **[RouterAI](/ "RouterAI")**, чтобы получить доступ ко всем этим моделям через единый интерфейс.

**Преимущества связки Cline + RouterAI:**

- **OpenAI Compatible API:** Cline отлично умеет работать с любыми провайдерами, поддерживающими стандарт OpenAI. RouterAI делает именно это — транслирует запросы к любой модели (даже Anthropic или Google) через стандартный протокол.
- **Доступ без VPN:** Не нужно поднимать прокси для доступа к API Anthropic.
- **Оплата:** Российские карты, СБП, безнал для юрлиц.
- **Выгода:** Учитывая, что AI агенты потребляют много токенов, важно иметь возможность выбирать модель под задачу.

**Алгоритм действий:**

1. Переходим на [RouterAI](/ "RouterAI").
2. Регистрируемся и пополняем баланс.
3. Создаем новый ключ в разделе **«Ключи API»**.

> **Важно:** Скопируйте ключ (`sk-...`), он понадобится при настройке расширения.

## 4. Техническая часть: Установка и Настройка

Установка проста: находим **Cline** в VS Code Marketplace и жмем Install.

1. Откройте **Extensions** в боковой панели VS Code.
2. Введите `cline` в строку поиска Marketplace.
3. Нажмите **Install** в строке расширения Cline.
4. После установки на левой панели появится иконка робота.

![Установка расширения Cline в VS Code Marketplace для подключения AI](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/80121a6875949f8980b0497a8c9c557c.png)

![Иконка Cline в боковой панели VS Code после установки расширения](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/d996033f7acc8ded61613ec0c9adb5a3.png)

После установки появится приветственное окно «How will you use Cline?», в нём необходимо выбрать "Bring my own API key" и нажать Continue.

![Приветственный экран Cline «How will you use Cline?»: вариант Bring my own API key](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/8365d50cde2cd9625d94f91af78cb96d.png)

### Подключение RouterAI

На следующем экране, «Configure your provider», настроим Cline.

1. В поле **API Provider** выберите **OpenAI Compatible**.
2. Заполните поля:
  - **Base URL:** `https://routerai.ru/api/v1`
  - **API Key:** Вставьте ваш ключ `sk-...` от RouterAI.
  - **Model ID:** Здесь нужно вручную вписать ID модели. Рекомендую начать с `anthropic/claude-sonnet-5.5` или `google/gemini-3.1-pro-preview`. Полный список ID можно найти на странице [моделей RouterAI](/models "моделей RouterAI").

![Экран Configure your provider в Cline: API Provider OpenAI Compatible, поля Base URL, API Key и Model ID](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/public/2f4e00aabe23258f2dfcaa85d83fa571.png)

Так же сразу рекомендую выбрать в настройках Cline язык на котором AI агенты будут общаться с вами в чате (сделать это можно нажав на иконку гайки в правом верхнем углу Cline, во вкладке General Settings с иконкой гаечного ключа).

### Работа с правилами в Cline

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

Добавить правила можно через интерфейс, нажав на иконку весов в нижней левой части чата.

![Настройка правил в плагине Cline в VS Code](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/store/pages/kilo_code_rules.png)

Cline создает в проекте папку **.clinerules** и хранит правила проекта в файлах, например  **.clinerules/rules.md**. 

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

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

Другие примеры использования правил в Cline смотрите в их [официальном блоге](https://cline.bot/blog/clinerules-version-controlled-shareable-and-ai-editable-instructions "официальном блоге").

## 5. Workflow: Вайб-кодинг с Cline {#5-workflow-vibe-coding-s-cline}

Теперь самое интересное. Как выглядит рабочий процесс с автономным агентом?

### Сценарий 1: Создание функционала с нуля

Вы не пишете код, вы ставите задачу. Нажмите в поле ввода чата и напишите:

> *"Создай простой скрипт на Python, который сканирует текущую папку, находит все изображения и конвертирует их в PNG. Используй библиотеку Pillow. Создай файл requirements.txt."*

**Что сделает Cline:**

1\. **Анализ:** Проверит, какие файлы уже есть.

2.  **План:** Предложит пошаговый план (создать файл -\> записать код -\> создать requirements).

3.  **Исполнение:**

- Он **сам создаст** файл `image_converter.py`.
- Напишет в него код.
- Предложит выполнить команду `pip install pillow` в терминале.

Вам останется только нажимать кнопку **"Approve"** (или настроить режим "Auto-approve" для чтения файлов).

![Пример работы Cline: генерация кода через Claude Sonnet](https://b51bc417-3ee0-451a-a83b-8a681d027a96.selstorage.ru/store/pages/cline_example.png)

### Сценарий 2: Исправление ошибок (Debug Loop)

Это то, где автономность раскрывается на 100%.

1. Допустим, у вас упали тесты.
2. Вы пишете Cline: *"Запусти тесты и исправь ошибки"*.
3. Cline запускает `npm test`.
4. Он **читает вывод ошибок** в терминале.
5. Он анализирует файлы, вызвавшие ошибку.
6. Он предлагает правки кода.
7. Он **снова запускает тесты**, чтобы убедиться, что всё работает.

Это настоящий цикл разработки, который раньше делали только люди.

### Сценарий 3: Добавление контекста

У Cline есть кнопки для быстрого добавления контекста, просто введите символ @ в чате

Но, честно говоря, с Cline это нужно не часто. Если вы скажете "Посмотри, как сделана авторизация в `/src/auth`", он сам пойдет и прочитает нужные файлы, используя необходимые инструменты.

## 6. Нюансы работы и экономия

Магия автономности стоит токенов. Cline отправляет в модель содержимое файлов, результаты команд терминала и всю историю действий. При длительной задаче контекст может значительно разрастись.

**Советы по оптимизации с RouterAI:**

1. **Новая задача = Новый чат:** В Cline есть кнопка **New Task (плюсик вверху экрана)**. Как только фича готова, нажимайте её. Не тяните "бесконечный чат", иначе каждый ваш "ок" будет стоить заметно дороже из-за переотправки всей истории (цена зависит от модели и объёма контекста).
2. **Выбор модели:**
  - Для архитектуры и сложных багов: используйте **Claude Sonnet 5.5** (anthropic/claude-sonnet-5.5). Это топ-1 модель для агентов.
  - Для рутины и простых скриптов: попробуйте **DeepSeek V4 Flash**  или  **Claude Haiku 5.5** (anthropic/claude-haiku-5.5) — они в разы дешевле, но отлично справляются с написанием кода.
  - Пробуйте любые модели и вы обязательно найдете подходящий вариант под любую задачу.

Статистику расходов вы всегда можете отследить в личном кабинете [RouterAI](/settings/activity "в RouterAI").

## 7. Заключение: Вайб-кодинг в действии {#7-zaklyuchenie-vibe-coding-v-deystvii}

Переход с обычного кодинга на связку **Cline + RouterAI** меняет само ощущение от работы. Вы из кодера превращаетесь в менеджера, который ставит задачи и принимает или не принимает готовые фичи.

Вайб-кодинг — это когда вы описываете идею, а VS Code наполняется папками, файлами и рабочим кодом. Вы концентрируетесь на бизнес-логике и архитектуре, а рутину с синтаксисом, импортами и тестами берет на себя агент.

**Что мы получили:**

- Автономного агента, способного выполнять задачи "под ключ".
- Доступ к сильнейшим моделям мира (Sonnet 5.5, GPT-5.5, DeepSeek V4) через RouterAI.
- Полный контроль расходов и оплату в рублях.
- Отсутствие VPN зависимости.

Установите Cline, подключите ключ и попробуйте дать ему первую задачу: *"Проанализируй этот проект и напиши README.md с инструкцией по запуску"*. Результат вас удивит.

Приятного кодинга! 🚀