← Все статьи

Окна во фронтенде

Знакомьтесь, AI Helper — ИИ-ассистент, встроенный в JustZix

17 мая 2026 · автор JustZix Team

JustZix всегда был про одно: менять внешний вид и поведение страниц, не открывая DevTools. Сегодня мы добавляем напарника для этой работы — AI Helper, ИИ-ассистента, который живёт внутри страницы, читает её вместе с вами и помогает писать CSS и JS, который её чинит.

Что такое AI Helper

AI Helper — это плавающее окно, то самое окно в стиле TEMP, которое вы уже знаете по панелям CSS и JS. Оно отрисовывается внутри текущей страницы, по одному экземпляру на вкладку, и вы можете его перетаскивать, менять размер и закрывать, когда захотите. Внутри этого окна — чат: вы пишете, модель отвечает, и разговор накапливается, как в любом другом чат-инструменте.

Отличие от обычного чат-бота в другой вкладке в том, что этот — внутри страницы. Он знает, где вы находитесь. Он может смотреть в DOM. И он может вставлять код прямо в панель TEMP, так что вы видите результат вживую, на реальном сайте, без копирования-вставки.

Как его открыть

Три способа, выбирайте, какой удобнее:

• Клавиатура: Ctrl+Alt+\ на любой странице.
• Виджет в попапе: нажмите на иконку JustZix, затем на кнопку AI Helper.
• Контекстное меню: щёлкните правой кнопкой по странице и выберите AI Helper в меню Chrome.

Окно открывается там, где вы его оставили в прошлый раз. Закрывайте его крестиком в углу — это единственный экземпляр на вкладку, так что у вас никогда не накопится пять окон друг на друге.

Подключите свой API-ключ

JustZix не размещает модель и не перепродаёт токены. Вы подключаете собственный ключ от провайдера, которому уже доверяете. AI Helper поддерживает три:

Вы один раз вставляете ключ в Настройки → AI Helper, выбираете провайдера по умолчанию и модель. Список моделей подгружается вживую от провайдера, так что вы всегда видите то, что ваш аккаунт реально может использовать — и выбор по умолчанию указывает на топовую модель. Если вы сохранили больше одного ключа, переключать провайдера можно прямо в окне чата. Полное руководство — в статье по настройке.

Окно чата

Всё необходимое размещено в одной панели:

• История переписки — текущая ветка ваших сообщений и ответов модели.
• Очистить переписку — стереть ветку и начать заново при смене задачи.
• Выбор провайдера и модели — менять движки посреди разговора, не покидая страницу.

Это выглядит как чат, потому что это и есть чат. Новое — то, что модель может видеть и делать.

Он уже знает страницу

Каждый раз, когда вы отправляете сообщение, AI Helper автоматически прикрепляет контекст текущей страницы — URL, заголовок страницы и HTML-фрагмент. Вы ничего не вставляете вручную. Поэтому вместо описания «там есть липкий хедер, перекрывающий контент» вы просто говорите «почини липкий хедер», и у модели уже есть что-то конкретное для работы.

Когда ей нужно больше деталей, она может запросить их по необходимости — см. статью про инструменты осмотра страницы.

Он умеет делать настоящую работу, а не только болтать

AI Helper — не просто генератор кода. Он выполняет агентный рабочий процесс: модель может вызывать инструменты, осматривать страницу, открывать окно TEMP CSS/JS, помещать в него код и — только с вашего явного подтверждения — сохранять папку, группу или правило в вашу библиотеку JustZix.

Типичная сессия выглядит так:

Вы:     Скрой попап рассылки на этом сайте.
AI:     [query_page] осматривает контейнер попапа
AI:     [open_temp_pane] + [set_temp_pane_code] вставляет тестовый CSS
AI:     "Проверь страницу — попап исчез? Сохранить это?"
Вы:     Да, сохрани.
AI:     [create_rule] (запрашивает одно явное подтверждение)

Каждый вызов инструмента отображается «чипом» в окне, так что вы всегда видите, к чему модель прикасалась. Цикл выполняет до 8 шагов за ход. Полный разбор — в подробном материале о вызове инструментов.

Ваши ключи остаются приватными

API-запросы идут через фоновый service worker расширения, а не через собственный JavaScript страницы. Это значит, что ваш ключ никогда не попадает в контекст страницы, а запрос обходит Content Security Policy страницы. Ключи хранятся в chrome.storage.local, и у каждого ключа есть необязательный чекбокс синхронизации (по умолчанию выключен). Модель приватности честно описана в статье про ключи и приватность.

Для кого это

Если вы уже пишете свой CSS, AI Helper — это более быстрый способ набросать и протестировать селекторы против упрямого сайта. Если вы вообще не пишете CSS, это способ описать желаемое обычными словами и получить рабочее правило. В любом случае ничего не сохраняется, пока вы не нажмёте подтвердить.

Смотри также

• Настройка AI Helper — получение и ввод API-ключа
• Объяснение агентного процесса вызова инструментов
• API-ключи, приватность и синхронизация

AI Helper поставляется в текущей сборке JustZix — бесплатно, без аккаунта, для Chrome 100+ и браузеров на Chromium. Скачайте расширение, добавьте ключ и нажмите Ctrl+Alt+\ на любой странице, чтобы познакомиться с новым ассистентом.