Aether — визуальный AI-редактор страниц в VS Code

Aether — расширение для Visual Studio Code, объединяющее встроенный просмотр страницы, инспектор DOM, визуальное редактирование стилей/текста и AI-чат с распознаванием Vue.js. Работает как OnLook/Webflow внутри редактора — ничего не меняет в исходниках, всё происходит прямо на странице.

Возможности

🖥 Единый редактор: один webview с тремя панелями — инспектор слева, страница по центру (iframe), AI-чат справа.
🎯 Клик по элементу → полная информация (HTML, классы, атрибуты, computed styles, XPath, селектор).
✥ Режим Move — перетаскивание элементов мышью прямо на странице (drag-to-move).
🖌 Редактор стилей — цвет, фон, шрифт, размер, отступы, скругления, тени — применяются мгновенно как inline-стили.
✎ Редактирование текста — двойной клик в режиме Text, правка прямо на странице.
⚡ Vue-инспектор — имя компонента, props, data, computed (Vue 2 через __vue__, Vue 3 через __vueParentComponent), редактирование значений.
💬 AI-чат рядом со страницей: markdown, подсветка кода, стриминг, история, прикрепление выбранного элемента в контекст.
🔌 Провайдеры AI: OpenAI, Anthropic (Claude), Google Gemini, DeepSeek, OpenCode (API и CLI), произвольные OpenAI-совместимые (Ollama, LM Studio, vLLM).
🔒 Браузер без видимой консоли: страница отрисовывается в iframe, инспектор внедряется через локальный прокси.

Как это работает

Расширение поднимает локальный HTTP-прокси (http://127.0.0.1:PORT), который:

Пересылает запросы на вашу страницу (по умолчанию http://localhost:5173);
Снимает заголовки, блокирующие iframe (X-Frame-Options, CSP);
Внедряет в HTML инспектор-скрипт, который и делает всю магию: hover-подсветку, выбор по клику, drag, правку стилей/текста, чтение Vue-состояния.

Никаких отдельных окон браузера и видимых консолей.

Установка

Способ 1 — из исходников (рекомендуется)

npm install
npm run bundle
npm run package
code --install-extension aether-extension-1.0.3.vsix

Способ 2 — разработка (F5)

Откройте проект в VS Code, нажмите F5 — откроется окно расширения с готовым редактором.

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

Запустите свой dev-сервер (например npm run dev на http://localhost:5173).
Ctrl+Shift+P → Aether: Open Editor (или Ctrl+Alt+E).
Страница загрузится в центре; переключитесь в режим Inspect и кликните по элементу.
Слева появится инспектор (стили, Vue, HTML), справа — чат.
В режиме Move тащите элементы мышью; в Text — редактируйте текст двойным кликом.
Нажмите Attach — выбранный элемент прикрепится в чат, и можно просить AI изменить его.

Команды

Команда	Горячая клавиша
Aether: Open Editor	`Ctrl+Alt+E` / `Cmd+Alt+E`
Aether: Open Browser	`Ctrl+Alt+B` (классический браузер)
Aether: Open Chat	`Ctrl+Alt+C` / `Cmd+Alt+C`
Aether: Pick Element	`Ctrl+Alt+P` / `Cmd+Alt+P`
Aether: Add AI Provider	— (палитра команд / кнопка «+» в чате)

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

Ключи задаются через Aether: Add AI Provider и сохраняются в SecretStorage VS Code (не в файлах). Для локальных моделей выберите Custom (OpenAI-совместимый): Ollama http://localhost:11434/v1, LM Studio http://localhost:1234/v1.

Vue.js

Для элемента, принадлежащего компоненту, Aether покажет имя, props, data, computed.
Значения props/data можно менять прямо в инспекторе — они применяются на странице.
Дополнительно доступен поиск исходников .vue в рабочей папке (Aether: Attach Context → файл).

Настройки (Settings)

Настройка	По умолчанию	Описание
`aether.browser.defaultUrl`	`http://localhost:5173`	Стартовый URL страницы
`aether.chat.defaultProvider`	`openai`	Провайдер AI по умолчанию
`aether.chat.enableAutomaticElementContext`	`true`	Автоприкрепление выбранного элемента в чат

Устранение неполадок

Страница не загружается — проверьте, что dev-сервер запущен на http://localhost:5173, или укажите другой URL в aether.browser.defaultUrl.
Нет AI-ответов — добавьте провайдера с ключом (SecretStorage) или подключите локальную модель.
Прокси не стартует — в логах расширения (Output → Aether) смотрите сообщения InspectorProxy.

Разработка

npm install
npm run watch   # webpack в watch-режиме
npm run lint    # проверка типов (tsc --noEmit)

Замечание по безопасности ключей: вместо устаревшей библиотеки keytar используется встроенный SecretStorage VS Code.

Лицензия

MIT

AetherDevelop

Kaiden