qvib.pro
EN

Вайб-кодинг бесплатно

Для чего: писать код словами в VS Code — ИИ-агент сам редактирует файлы и запускает команды. Бесплатная связка: VS Code + Cline + OpenRouter (free-модели) или локальный Ollama + MCP.

бесплатно open-source локально новичок

«Вайб-кодинг» = ты описываешь задачу обычным языком, ИИ-агент сам пишет/правит файлы и запускает команды, ты проверяешь результат. Эта связка — бесплатная (или почти): редактор бесплатный, модель — либо free-уровень OpenRouter, либо локальный Ollama (0 ₽).

🧭 Картина целиком

Что получишь на выходе: редактор VS Code, в котором живёт ИИ-агент. Ты пишешь «сделай страницу логина с валидацией почты» — агент сам создаёт/редактирует файлы, запускает команды в терминале, может открыть браузер и проверить результат. Ты выступаешь как ревьюер: читаешь предложенные изменения и жмёшь «принять» или «отклонить».

Связка из трёх частей:

  1. Редактор + агент — VS Code и расширение-агент (руки и глаза в проекте).
  2. «Мозг» (модель) — бесплатно: либо облачный OpenRouter (free-модели), либо локальный Ollama (приватно, офлайн).
  3. MCP-инструменты — дают агенту доступ к файлам, актуальным докам, браузеру (см. гайд «Подключить MCP»).

💡 Это «бесплатный младший брат» платных Cursor/Claude Code. Слабее на сложной архитектуре, но для учёбы, прототипов и рутины — отлично, и за это не платишь.


Шаг 1. Поставить редактор и агента

Что делаем: ставим VS Code и расширение-агента.

  1. Установи VS Code (бесплатно): https://code.visualstudio.com — скачай под свою ОС, запусти.
  2. В VS Code открой вкладку Extensions (Ctrl/Cmd+Shift+X), найди и поставь ИИ-агента. Хорошие бесплатные/открытые:
    • Cline — автономный агент: правит файлы, запускает терминал, ставит MCP. Спрашивает подтверждение перед действиями.
    • Roo Code — форк Cline с режимами (Architect / Code / Ask) под разные задачи.
    • Continue — гибкий, легко цепляется к Ollama и OpenRouter.

Как понять, что ОК: в левой панели VS Code появилась иконка агента (напр. робот Cline). Клик — открывается чат-панель агента.

Частые ошибки:

  • Поставил не то расширение (их много с похожими именами) — сверяйся с издателем и числом установок.
  • Открыл VS Code «просто так», без папки проекта → агенту негде работать. Сначала File → Open Folder и выбери папку проекта.

Шаг 2 (вариант А). Дать агенту «мозг» через OpenRouter (бесплатно)

Что делаем: подключаем облачную модель с бесплатным уровнем.

  1. Заведи ключ на https://openrouter.ai → раздел Keys → создай ключ (строка sk-or-...).
  2. В настройках агента выбери провайдера OpenRouter, вставь ключ.
  3. Выбери модель с суффиксом :free (OpenRouter держит набор бесплатных моделей — напр. deepseek/deepseek-r1:free, qwen/...:free). У free-моделей есть лимиты запросов в сутки — это норма для старта.

Как понять, что ОК: напиши агенту «привет, какая ты модель?» — приходит ответ. Значит ключ и модель подхватились.

Частые ошибки:

  • 401 / invalid api key — ключ скопирован с пробелом/не полностью, или вставлен не в то поле. Пересоздай и вставь заново.
  • 429 / rate limit — упёрся в дневной лимит бесплатной модели. Подожди или переключись на другую :free-модель.
  • Модель без суффикса :free — платная, спишет с баланса. Проверяй название.

Шаг 2 (вариант Б). Полностью локально и приватно — Ollama

Что делаем: подключаем локальную модель — без оплаты и без утечки кода наружу.

  1. Поставь Ollama (см. гайд «Запуск локальной модели») и скачай модель: ollama pull qwen3.
  2. В агенте выбери провайдера Ollama (или «OpenAI-совместимый» с base-URL http://localhost:11434/v1, ключ — любой непустой текст).
  3. Укажи имя модели ровно как в ollama ls (напр. qwen3).

Как понять, что ОК: агент отвечает на «привет» без интернета. Код-ассистент работает офлайн и приватно.

Частые ошибки:

  • connection refused на 11434 — Ollama не запущена (см. её гайд: ollama serve / открыть приложение).
  • Имя модели не совпало с ollama ls — агент шлёт несуществующую модель, ошибка 404.
  • Слабое железо → агент думает очень долго. Возьми модель полегче (qwen3:1b/llama3.2) или используй вариант А (OpenRouter).

Шаг 3. Подключить MCP (руки агента: файлы, доки, браузер)

Что делаем: даём агенту инструменты через MCP. Базовый набор для вайб-кодинга:

  • Filesystem — читать/писать файлы проекта.
  • Context7 — подтягивать актуальную документацию библиотек (меньше «галлюцинаций» по API).
  • Playwright — открыть браузер и проверить, что веб-флоу реально работает.

В Cline/Roo есть кнопка MCP Servers → «добавить сервер»; формат тот же command/args/env, что и в гайде «Подключить MCP к Claude/Cursor». Проверить, что сервер вообще запускается, можно вручную:

npx -y @upstash/context7-mcp        # должен стартовать без ошибок (Ctrl+C — выйти)

Как понять, что ОК: в панели MCP агента сервер горит зелёным/«connected», у агента появились новые инструменты (например, «read file», «open browser»).

Частые ошибки:

  • Нет Node.js → npx не находится. Поставь Node LTS с nodejs.org, перезапусти VS Code.
  • Сервер «красный» — опечатка в command/args или нет интернета для npx. Сверь конфиг с гайдом по MCP.

Шаг 4. Рабочий цикл

Что делаем: крутим петлю «задача → план → правки → проверка».

  1. Опиши задачу словами: «Сделай страницу логина с валидацией почты и кнопкой Войти».
  2. Агент предложит план и конкретные правки файлов — читай diff перед «Approve» (это твоя ответственность).
  3. Дай ему запустить проект и проверить (через Playwright MCP — прямо в браузере).
  4. Не получилось — приложи текст ошибки, попроси починить. Повторяй до «зелёного».

Как понять, что ОК: файлы изменились так, как ты ждал; приложение запускается; нужный флоу работает в браузере.

Частые ошибки:

  • Жмёшь «Approve» не глядя → агент тихо переписал не то. Всегда смотри, какие файлы и строки он меняет.
  • Включил «auto-approve» на старте → агент выполняет команды без спроса. На старте держи подтверждения включёнными.
  • Просишь слишком большую задачу одним сообщением → агент путается. Дроби: сначала разметка, потом логика, потом стили.

🧠 Для сеньора

  • Модель под задачу: держи быструю дешёвую модель для рутины и сильную (:free R1/Qwen или платную) — для архитектурных кусков; переключай по ходу. Через OpenRouter удобно сравнивать модели на одном API.
  • Контекст-инженерия: дай агенту README/ARCHITECTURE.md/правила репо как контекст; правила в .clinerules (Cline) / системные инструкции режима (Roo) экономят токены и держат стиль.
  • MCP-арсенал: добавь Git-MCP, БД-MCP (RO!), Sentry-MCP — агент сам читает логи/схему/ошибки. Не превышай разумное число активных тулзов, чтобы не размывать выбор.
  • Гейты качества: проси прогонять tsc --noEmit, линт и тесты после каждого блока; не принимай код без зелёного. Для веб-флоу — обязательный прогон в браузере (Playwright), не «на веру».
  • Локально для приватного: код под NDA — только через Ollama; для тяжёлых рассуждений локально нужен сильный GPU, иначе медленно.

⚠️ Предупреждения

  • Агент выполняет команды на твоей машине. Включи подтверждение перед действиями (auto-approve выключи на старте). Команды вроде rm -rf, перезапись файлов, git push --force — необратимы; читай, что агент собирается запустить.
  • Prompt-injection. Не позволяй агенту вслепую выполнять инструкции из скачанных файлов и веб-страниц — там может быть спрятана команда «удали…/отправь ключи…». Особенно осторожно с MCP, тянущими внешний контент.
  • Секреты. Не вставляй ключи/пароли в чат агента и в код в открытом виде — только через .env (который в .gitignore).
  • Бесплатные модели слабее топовых: на сложной архитектуре ошибаются и уверенно «галлюцинируют». Проверяй вывод, не принимай код «на веру».

🆘 Промт-спасалка

Помоги настроить бесплатный вайб-кодинг в VS Code, объясняй по шагам.
МОЙ АГЕНТ: <Cline / Roo Code / Continue>.
МОЯ МОДЕЛЬ: <OpenRouter :free / локальный Ollama>.
МОЯ ОС: <macOS / Windows / Linux>. ЗАДАЧА ПРОЕКТА: <что делаю>.
Я ЗАСТРЯЛ: <что не работает / текст ошибки>.

Что делать:
1) Что поставить, где вставить ключ/base-URL, какую модель выбрать.
2) Как подключить MCP (Filesystem, Context7, Playwright) — точные команды/конфиг.
3) После каждого шага — как проверить, что работает.
4) Предупреди про auto-approve и безопасность (секреты, prompt-injection).

💎 Глубина и ценность

  • Барьер входа в код рухнул. Раньше «написать приложение» = месяцы учёбы синтаксису. Сейчас ты описываешь задачу словами и проверяешь результат — а порог входа в саму идею «сделать свой инструмент» стал почти нулевым.
  • Бесплатно = можно тренироваться без страха за счёт. Free-модели и локальный Ollama дают неограниченную практику: ошибся — переделал, и это ничего не стоило.
  • Ты учишься быть ревьюером, а не машинисткой. Главный навык эпохи ИИ — не «печатать код», а ставить задачу, читать diff и проверять результат. Эта связка ставит именно его — и плавно ведёт к платным Cursor/Claude Code и к Laskoff OS (команда ИИ-агентов).