Браузерное расширение и веб-приложение для заметок и коллекций с ИИ

Международный стартап делал браузерное расширение и веб-приложение для работы с информацией из интернета. Пользователь выделяет важные фрагменты на любой странице, оставляет заметки, сохраняет страницы в тематические коллекции и потом быстро находит нужное. Позже в продукт пришёл ИИ: он отвечает на вопросы по сохранённым материалам и делает выжимки страниц и видео.

Задача

Продукт рос этапами, и на каждом этапе фронтенду доставалась своя часть:

• синхронизация расширения и веба, регистрация и вход, подписки;
• заметки, выделение текста, теги, коллекции и совместные «живые» коллекции;
• ИИ-виджет с промптами и сохранением ответов в коллекции;
• переход с подписок на корпоративные лицензии и приватный ИИ по документам;
• захват экрана и редизайн главной страницы.

Ограничения задачи

Расширение и веб-приложение это два клиента одного продукта. Вход, данные и коллекции должны совпадать в обоих, а пользователь не должен логиниться дважды.

Расширение встраивается в чужие страницы. Заметки, выделения и скриншоты должны работать на любых сайтах, включая Instagram, Facebook, Reddit и YouTube, и не ломать их вёрстку.

Модель монетизации поменялась по ходу проекта: подписки free и pro заменили лицензионные ключи Enterprise. Ограничения на ИИ и коллекции пришлось перестроить под новую схему.

Решение

Вход и монетизация. Разработчики Фортех сделали регистрацию и вход, в том числе через Apple и Google, и вход в расширение через авторизацию на основном сайте. Добавили подписки на Stripe, закрыли большинство функций за подпиской и сделали реферальную систему на Firebase. Позже подписки заменили лицензионными ключами Enterprise с отдельной регистрацией и ограничениями для пользователей без лицензии.

Заметки и коллекции. В расширении пользователь сохраняет страницу в коллекцию, выделяет текст и оставляет заметки, а «замороженная» копия страницы хранится вместе с его правками шрифта и цвета. В вебе коллекции можно сортировать, дублировать и переносить страницы между ними, искать по тегам и делиться «живыми» коллекциями с другими пользователями. Для перетаскивания используется React DnD, для работы с выделениями mark.js.

ИИ в продукте. Сначала в расширение и веб добавили ИИ-виджет с диалогом и шаблонами промптов, которые структурируют содержимое страницы, а ответы можно сохранить в коллекцию. Затем появились два режима: обычный ИИ отвечает на основе своих знаний, а приватный отвечает по материалам выбранной коллекции, у которой есть «мозг» с проиндексированными страницами и документами. Пользователь переключателем выбирает, какие файлы доступны ИИ. Для видео с YouTube сделана транскрипция, чтобы промпты работали и с ними.

Захват экрана и редизайн. В расширение добавили виджет захвата экрана на базе html2canvas, скриншоты отображаются в коллекциях. Главную страницу для незарегистрированных пользователей полностью переработали, появилось окно связи с поддержкой. Отдельно был сделан трекинг изменений сохранённых страниц с подсветкой изменённых элементов, но заказчик отложил его выпуск.

Стартап получил продукт из двух связанных частей: расширение для работы прямо на страницах и веб-приложение для коллекций. Вход, заметки и коллекции синхронизируются между ними.

За полтора года фронтенд прошёл путь от заметок и подписок до корпоративных лицензий и приватного ИИ, который отвечает по документам и страницам пользователя.

Фронтенд вели разработчики Фортех: они провели продукт через смену модели монетизации и подключение ИИ.

Частые вопросы

Как связать браузерное расширение и веб-приложение одной авторизацией?
Авторизовать расширение через основной сайт: пользователь входит один раз, и расширение получает доступ к тем же данным и коллекциям.

Как сделать ИИ, который отвечает по документам пользователя?
Индексировать страницы и файлы выбранной коллекции и давать модели отвечать только по ним. Пользователь сам решает, какие файлы будут доступны ИИ.

Можно ли поменять модель монетизации на ходу?
Да. В этом проекте подписки free и pro заменили лицензионными ключами Enterprise, а ограничения на ИИ и коллекции перестроили под тип пользователя.