От хаотичного промптинга к автономной архитектуре приложений

«Никто ничего не взламывал — они просто воспользовались фичей быстрее, чем я успел это предусмотреть», — признаются разработчики, когда масштабный пайплайн искусственного интеллекта внезапно превращает сотни учебных часов в тысячи доступных поиску фрагментов. Современная разработка ПО окончательно перешагнула этап слепого кодинга: теперь это тонкая настройка AI-агентов, строгий аудит безопасности через инструменты вроде CodeRabbit и превращение хаотичных видеоматериалов в умные интерактивные экосистемы.

🚀 Архитектура и фундамент: от идеи до «умного» агента 0:00

Большинство разработчиков при работе с ИИ совершают одну и ту же ошибку — они просто «промптят», пока что-то не заработает . Такой подход, называемый «вайб-кодингом», приемлем для быстрых демо, но он неизбежно терпит крах, когда речь заходит о масштабируемости, безопасности и глубоком понимании логики приложения . Для создания Vertex — платформы для обучения с интеллектуальным поиском по видео — требуется иной, системный подход . Инженер не должен передавать контроль ИИ; он должен оставаться ведущим специалистом, используя агентов лишь для того, чтобы двигаться быстрее, чем позволяют пальцы на клавиатуре .

Архитектура и планирование: продукт превыше кода 4:00

Первым шагом в архитектуре любого серьезного проекта является не выбор фреймворка, а глубокое понимание продукта . Прежде чем написать первую строку кода, необходимо ответить на фундаментальные вопросы: кто создает контент, а кто его потребляет? Где живут данные? Какие части приложения должны быть публичными, а какие — требовать авторизации и серверного исполнения ? В случае с платформой Vertex ключевая инновация заключается в возможности искать информацию на естественном языке и мгновенно переходить к той секунде видео, где объясняется тема .

Архитектурное планирование здесь строится на предотвращении «промпт-хаоса» . Вместо того чтобы заставлять ИИ угадывать структуру проекта, используется агентный инженерный воркфлоу: усиленное планирование, четкий контекст и разделение ответственности между несколькими агентами . Этот процесс позволяет превратить идею в рабочую и масштабируемую систему за считанные часы . Важно понимать полный жизненный цикл продукта: «создание, запуск, измерение, обучение и улучшение» (build, launch, measure, learn, improve) . Это то, что отличает профессиональную разработку от любительских прототипов .

Выбор и настройка стека: экосистема для быстрого старта 5:04

Выбор инструментов для Vertex обусловлен их промышленным стандартом и наличием бесплатных уровней для старта. В основе лежит Next.js, как наиболее широко принятый фреймворк для серверного рендеринга и SEO . Остальные элементы стека закрывают критические потребности продукта:

Sanity: выступает не просто как CMS, а как готовый админ-дашборд (Studio) «из коробки» . Это позволяет авторам и инструкторам совместно работать над контентом, не заставляя разработчика писать панель управления с нуля . На Sanity работают такие гиганты, как Puma и Pinterest .
Clerk: берет на себя всю ответственность за аутентификацию . Сессии, потоки сброса паролей, OAuth, верификация email и интеграция биллинга — всё это делегируется стороннему сервису, чтобы сэкономить недели разработки и избежать ошибок в безопасности .
PostHog: внедряется для получения ответов на реальные продуктовые вопросы . Например: «Пользуются ли люди поиском?» или «Сколько минут урока они смотрят перед тем, как уйти?» . 97% пользователей PostHog не платят за сервис ни цента, что делает его идеальным для стартапов .
CodeRabbit: используется для автоматического код-ревью через Pull Requests . ИИ-код может содержать скрытые уязвимости, и CodeRabbit сканирует их перед деплоем . Инструмент настолько надежен, что его использует сама Nvidia .

Настройка начинается с создания Next.js проекта командой npx create-next-app . с использованием стандартных настроек TypeScript и Tailwind . Структура папок включает app для роутинга, public для ассетов и package.json для управления зависимостями .

Навыки агентов и Agents.md: создание «мозга» проекта 12:38

Чтобы ИИ не гадал и не использовал устаревшие паттерны, ему необходимо привить специфические «навыки» (Skills) . Навык — это знание конкретного инструмента, которое агент читает перед внедрением функции . Например, при установке навыков Sanity через npx skills add sanityio/agent-toolkit, агент узнает, как правильно писать схемы и запросы GROQ . Это избавляет разработчика от необходимости копировать документацию в каждый промпт .

Существует четкое различие: Skills объясняют ИИ, как работают внешние инструменты (Sanity, Clerk, Next.js), а файл Agents.md объясняет правила именно вашего проекта . Если запихнуть всё в один файл, он станет слишком громоздким и будет «съедать» контекстное окно даже при выполнении простых задач .

Файл Agents.md (или его аналог claud.md) является важнейшим документом во всем воркфлоу . В нем фиксируются:

Роль: Агент должен вести себя как Full Stack инженер уровня Principal, а не как общий ассистент .
Описание продукта: Что такое Vertex и какова его главная цель (умный поиск по видео) .
Правила работы: ИИ никогда не должен прыгать сразу в кодинг; для каждой задачи требуется план и одобрение инженера .

Для поддержания актуальности контекста используются специальные утилиты: Scope (для определения границ фичи), Architect (для принятия архитектурных решений) и Sync (для обновления контекстных файлов по мере эволюции проекта) . Такой подход гарантирует, что важные решения сохраняются между сессиями чата и разными инструментами .

🎨 Создание дизайн-системы Vertex и запуск главной страницы 25:05

Дизайн-система Vertex: фундамент визуальной целостности 29:46

Когда проект переходит от стадии планирования к реализации, главной проблемой становится визуальная согласованность. Искусственный интеллект легко справляется с созданием одной красивой страницы, но может проявить излишнюю «креативность» при разработке последующих, добавляя случайные градиенты или меняя отступы . Чтобы избежать этого, разработка Vertex начинается с создания строгой дизайн-системы. Ранее в разговоре автор упоминал важность файла agents.md, который теперь служит инструкцией для AI: модель должна сначала прочитать правила проекта, изучить стек и только потом приступать к коду .

Дизайн-система Vertex была сгенерирована с помощью ChatGPT и включает в себя полный набор визуальных токенов . Она охватывает:

Типографику: использование акцентного шрифта Playfair Display и шкалу размеров для заголовков .
Цветовую палитру: первичные и нейтральные цвета, настроенные для светлой темы .
Систему отступов и радиусов: стандартизированные значения для теней и закруглений углов .
Библиотеку компонентов: кнопки, инпуты, бейджи и индикаторы статуса .

Для реализации системы используется расширение Claude в VS Code. Процесс выглядит максимально просто: разработчик перетаскивает скриншот дизайн-системы в чат и просит реализовать её на основе Tailwind CSS . В ответ AI создает не просто набор стилей, а полноценный «Showcase» — страницу-витрину, где каждый компонент можно проверить визуально . Автор подчеркивает важный нюанс инженерной работы с AI: «деградация контекста» (context rot) начинается задолго до заполнения лимита токенов . Даже если у модели окно в 200 тысяч токенов, ошибки могут появиться уже после 50 тысяч, поэтому сессии чата нужно регулярно очищать .

Инженерная культура и автоматизация ревью 36:50

С момента начала работы над интерфейсом проект переходит в режим профессиональной командной разработки. Теперь каждая функция должна реализовываться в отдельной ветке (branch), проходить через Pull Request и проверку, прежде чем попасть в основную ветку . Это критически важно при работе с AI, так как позволяет контролировать каждое изменение и гарантировать безопасность приложения .

Для автоматизации этого процесса в проект интегрируется Code Rabbit — сервис на базе AI для ревью кода . Он автоматически сканирует каждый PR на наличие уязвимостей, проверяет зависимости и даже строит диаграммы последовательности для наглядного понимания изменений . Такой подход позволяет «ленивому» разработчику поддерживать чистоту репозитория на уровне топовых технологических компаний, делегируя написание осмысленных commit-сообщений самому агенту .

Разработка главной страницы: от макета к интерфейсу 39:56

Главная страница — это первый интерфейс, с которым взаимодействует пользователь. Её структура в Vertex лаконична и сфокусирована на поиске: навигационная панель, хиро-секция с поисковой строкой и сетка доступных курсов . Благодаря тому, что дизайн-система уже внедрена в globals.css, реализация страницы занимает считанные минуты .

Процесс разработки через AI-агента включает несколько этапов:

Промпт по скриншоту: Агенту передается изображение макета с одной инструкцией: «Реализуй домашнюю страницу на основе прикрепленного UI» .
Планирование: Перед написанием кода AI создает документ prompts/homepage.md, где описывает свои предположения о цветах, измерениях и компонентах .
Автоматическое тестирование: В процессе сборки агент использует Playwright, чтобы сделать скриншоты страницы на разных размерах экранов и устранить горизонтальную прокрутку или ошибки верстки .
Финальная полировка: В ходе работы выяснилось, что на 4K-мониторах стандартная ширина контента в 960 пикселей выглядит слишком узкой . Одним уточняющим запросом ширина была увеличена до 1440 пикселей для обеспечения комфортных отступов и читаемости .

Результат работы — полностью адаптивная страница, которая «на пиксель» соответствует исходному дизайну . Все интерактивные элементы, включая поиск и карточки курсов, готовы к наполнению данными. Как отмечает автор: «Теперь у Vertex есть лицо» . Следующим логическим шагом станет внедрение авторизации через Clerk, чтобы платформа могла узнавать своих студентов и отслеживать их прогресс .

🔐 Интеграция Clerk и архитектура контента в Sanity 50:09

Быстрая настройка аутентификации через Clerk CLI 50:22

Процесс внедрения системы аутентификации в Vertex начался с использования Clerk CLI, что позволило автоматизировать рутинные операции . Вместо ручного копирования ключей и настройки конфигурационных файлов, агент инициализировал Clerk в проекте, выполнил вход в систему и верифицировал окружение Next.js буквально за пару минут . После успешной инициализации стандартные заглушки аватаров в интерфейсе были автоматически заменены на функциональные компоненты Clerk .

При тестировании системы на локальном сервере в правом верхнем углу приложения появились кнопки «Sign In» и «Sign Up» . После завершения регистрации пользователь видит полноценное меню аккаунта, где можно управлять безопасностью, добавлять дополнительные адреса электронной почты и подключать внешние аккаунты .

Важные технические детали реализации:

CLI автоматически добавил все необходимые переменные окружения в файл .env.local .
Секретный ключ CLERK_SECRET_KEY намеренно не имеет префикса NEXT_PUBLIC, что исключает его попадание в браузер и обеспечивает безопасность на стороне сервера .
Агент проверил файл .gitignore, чтобы убедиться, что конфиденциальные данные не попадут в репозиторий .

Такой подход подчеркивает философию быстрой разработки: использование агентов для автоматизации утомительных задач позволяет сфокусироваться на прототипировании и проверке гипотез, а не на базовой настройке сервисов . Ранее в разговоре авторы упоминали выбор стека, и Clerk идеально вписался в концепцию минимальных усилий при максимальной масштабируемости.

Прокси-мидлварь и логика защищенных маршрутов 53:50

Особое внимание в этой главе уделено работе промежуточного ПО. Согласно современным конвенциям Next.js (начиная с версии 15/16), файл middleware.ts часто называют «proxy», чтобы точнее отразить его назначение . В Vertex этот слой отвечает за чтение сессионных кук, проверку JWT-токенов и выполнение «рукопожатия» (handshake), если токен отсутствует или просрочен .

Критически важный нюанс архитектуры: стандартный clerkMiddleware сам по себе ничего не блокирует . Он работает как «разрешитель» (O-resolver), а не как «шлюз» (O-gate). Это означает, что по умолчанию все маршруты в приложении остаются публичными . Это соответствует архитектурному плану проекта: свободный просмотр контента для всех и защита только тех функций, которые явно помечены как приватные (например, страница «My Learning») . В будущем для защиты конкретных страниц разработчику достаточно добавить их в конфигурацию мидлваря, о чем агент сразу предоставил подробную инструкцию в коде .

Настройка Sanity: переход к автономной студии 56:57

После настройки авторизации проект перешел к этапу создания базы данных через Sanity. Начальная установка была запущена командой npm create sanity@latest, которая развернула инфраструктуру студии прямо внутри проекта . Разработчики выбрали использование TypeScript и встраиваемую (embedded) версию студии по адресу /studio .

В процессе настройки были созданы ключевые конфигурационные файлы:

sanity.config.ts — главный файл конфигурации, определяющий поведение студии, плагины и точки входа для структуры контента .
sanity.cli.ts — инструмент для развертывания студии и управления наборами данных через командную строку .
Папка sanity — выделенное место для хранения схем, определений и переменных окружения .

Однако в ходе разработки возникла важная архитектурная дилемма. Агент, опираясь на заложенные в него навыки работы с Sanity, порекомендовал перенести студию из встроенного режима в автономный (standalone workspace) . Такое разделение на независимое приложение студии и фронтенд на Next.js считается более надежным, так как позволяет проводить типизацию (typegen) и деплой независимо друг от друга . В итоге студия Vertex стала отдельным приложением со своими зависимостями, что упрощает масштабирование проекта в будущем .

Моделирование данных и иерархия контента 1:00:25

Центральным объектом платформы обучения является «Курс» (Course), но его структура гораздо сложнее простого текстового документа . Курс служит связующим звеном, объединяющим маркетинговую информацию (заголовок, цена, уровень сложности) с учебным планом .

Разработчики внедрили следующую логику в схемы Sanity:

Модули (Modules): В данной системе модули не являются отдельными документами. Они встроены непосредственно в курсы в виде массивов (document arrays), так как не предназначены для независимого просмотра вне контекста курса .
Уроки (Lessons): Содержат основной обучающий контент и ссылаются на модули. Для заметок к урокам используется формат Portable Text .
Преподаватели (Instructors) и Категории (Categories): Вынесены в отдельные типы данных, на которые ссылается основной документ курса .

Для обеспечения безопасности данных был реализован слой «Server-only read client» . Поскольку набор данных является приватным, токен чтения (read token) никогда не передается на клиентскую часть, а взаимодействие с Sanity API происходит исключительно на стороне сервера через специальные функции-хелперы и запросы . Это гарантирует, что структура базы данных и её содержимое защищены от несанкционированного доступа, даже если фронтенд остается публичным.

К концу этого этапа была подготовлена «фундаментальная основа контента»: студия развернута, схемы определены, а интерфейс для наполнения базы данных стал доступен по адресу localhost:3333 . Проверка через Code Rabbit подтвердила отсутствие утечек секретов в коде, что позволило безопасно перейти к этапу генерации тестового контента .

🚀 Наполнение контентом и создание детальных страниц курсов 1:15:28

Программный сидинг: от пустой базы к 120 урокам 1:15:28

Когда архитектура данных в Sanity готова, следующим критическим этапом становится наполнение платформы реалистичным контентом. Вместо ручного копипаста авторы используют программный сидинг, который позволяет сгенерировать 10 полноценных курсов и 120 уроков всего за одну итерацию . Система автоматически распределяет контент по шести категориям и пяти инструкторам, создавая по четыре модуля на каждый курс и по три урока в каждом модуле . Для визуализации используются динамические изображения из сервиса Lorem Pixum, что позволяет сразу увидеть, как интерфейс работает с реальными медиафайлами .

Одной из самых сложных задач сидинга является поиск видеоматериалов. Поскольку прямой доступ к YouTube Data API в данном контексте не используется, агент выполняет поисковые запросы к YouTube для подбора тематически подходящих видео для каждого урока . Процесс полной верификации и импорта 120 роликов занимает от 10 до 20 минут . Это избавляет разработчика от необходимости вручную прикреплять ссылки, метаданные и обложки, которые агент извлекает напрямую из видеохостинга .

После завершения импорта в Sanity Studio появляется структурированный каталог, включающий такие курсы, как «Building AI apps with LLMs», «DevOps with Docker» и «Practical Web Security» . Каждая запись содержит:

Уникальный слаг (slug) и краткое резюме курса ;
Профиль инструктора с фотографией, биографией и списком компетенций ;
Учебный план (Curriculum) с вложенными модулями ;
Детализированные заметки к урокам в формате Rich Text с ключевыми тезисами и ресурсами .

Важным техническим нюансом является настройка безопасности: для того чтобы веб-приложение могло считывать данные из приватного датасета Sanity, необходимо создать и добавить в .env.local специальный токен с правами viewer . Это позволяет приложению получать доступ к контенту, сохраняя его защищенным от несанкционированного редактирования извне .

Разработка страницы деталей курса и динамическое связывание данных 1:15:13

Переход от заглушек к полноценным маркетинговым страницам курсов начинается с использования AI-агента для реализации дизайна . На этом этапе разработчик передает скриншоты интерфейса агенту, который анализирует существующую дизайн-систему (ранее созданную на базе Vertex) и схемы данных в Sanity . Основная задача — превратить статические карточки на главной странице в активные ссылки, ведущие на динамические роуты courses/[slug] .

Страница деталей курса (Course Details) выполняет роль витрины и включает несколько ключевых блоков:

Course Hero: Заголовок, описание и призыв к действию .
Learning Outcomes: Секция «Чему вы научитесь», данные для которой динамически подтягиваются из поля whatYouWillLearn в Sanity .
Syllabus: Интерактивный список модулей и уроков .
Sticky Progress Bar: Панель прогресса в нижней части экрана, которая на данном этапе остается презентационным компонентом (логика отслеживания будет добавлена позже) .

Примером успешной интеграции служит страница курса по Next.js App Router: она автоматически отображает общую длительность (2 часа), уровень сложности и количество студентов (18 000), извлекая эти цифры напрямую из базы данных . Чтобы обеспечить корректное отображение, агент внедряет вспомогательные функции для форматирования времени и меток уроков .

Параллельно с детальной страницей создается общая страница каталога «All Courses» . Несмотря на отсутствие изначального макета для этого раздела, агент успешно переиспользует сетку (grid) с главной страницы, обеспечивая визуальную целостность проекта . Это демонстрирует преимущество хранения контекста в файлах agents.md и глобальных CSS-переменных, что позволяет ИИ соблюдать заданный стиль во всех новых компонентах .

Код-ревью и финальная полировка функционала 1:15:13

После реализации страниц наступает этап код-ревью, который в данном проекте автоматизирован с помощью сервиса Code Rabbit . Инструмент анализирует Pull Request и предлагает точечные исправления, которые легко пропустить при ручной разработке. Например, было выявлено, что счетчик курсов на странице каталога учитывал даже те записи, у которых отсутствует slug, что могло привести к отображению пустых карточек . Исправление заключалось в добавлении фильтрации по опубликованным курсам .

Другим важным замечанием стала неактивная кнопка закладок (bookmark): сервис порекомендовал либо скрыть её, либо пометить как disabled, так как функционал избранного еще не был реализован в коде . После внесения этих правок и слияния PR (Pull Request), платформа превращается из набора макетов в работающий продукт с реальным каталогом . Теперь, когда пользователь может просматривать курсы и изучать программу обучения, проект готов к внедрению аналитики и систем отслеживания поведения, чтобы понять, какие темы вызывают наибольший интерес у студентов .

🚀 Аналитика PostHog и интерфейс обучения 1:40:32

После настройки базовой архитектуры фокус смещается на критически важные аспекты любого современного продукта: отслеживание поведения пользователей и создание интерфейса, в котором происходит само обучение . На этом этапе в игру вступают продвинутые инструменты продуктовой аналитики, такие как PostHog, которые позволяют не просто видеть цифры, но и понимать причины «отвалов» пользователей, а также полноценный плеер уроков с глубокой интеграцией данных из Sanity .

Внедрение аналитики PostHog и Replay Vision 1:40:32

Интеграция PostHog начинается с активации режима «self-driving», где агент подключает GitHub и настраивает сканеры для мониторинга данных продукта . Процесс занимает около 10 минут и требует установки приложения PostHog GitHub для конкретного репозитория проекта Vertex . Одной из уникальных функций является возможность видеть состояние настройки в реальном времени как в веб-панели, так и внутри самого приложения .

Для образовательной платформы были выбраны два ключевых направления мониторинга:

Воронка завершения курсов (Course Completion Funnel): Отслеживание моментов, где пользователи прекращают обучение . Как отмечает автор, никакой дизайн или копирайтинг не имеют значения, если пользователи не доходят до конца уроков .
AI Search: Мониторинг неудачных или брошенных поисковых запросов для улучшения работы ИИ-агента .

Особое внимание уделено функции Replay Vision . В отличие от обычных записей сессий, которых могут быть сотни, Replay Vision использует ИИ для анализа видеозаписей действий пользователя. Нейросеть на обычном языке объясняет, что пошло не так, и даже может открыть Pull Request с исправлением ошибки . Система также поддерживает интеграцию с Clerk для привязки событий к конкретным личностям пользователей, позволяя видеть просмотры страниц и срабатывание событий в реальном времени .

Создание страницы урока и интеллектуального плеера 1:45:14

Центральным элементом платформы становится страница урока (lesson page), где происходит основное потребление контента . Разработка ведется через ИИ-агента, которому передается UI-дизайн и задача привязать интерфейс к данным из Sanity .

Итоговый интерфейс включает в себя:

Боковую панель учебного плана: Список модулей и уроков с возможностью их сворачивания .
Хлебные крошки (Breadcrumbs): Навигация, позволяющая быстро вернуться к общему списку курсов или на страницу курса .
Область контента: Видео-плеер сверху, под ним — описание того, чему научится пользователь, и дополнительные ресурсы .

Техническая реализация плеера заслуживает отдельного упоминания. Система использует функцию parse video URL, которая превращает ссылки из Sanity в эмбеды YouTube, Vimeo или Bunny . Для оптимизации производительности плеер сначала отображает только постер (превью) из Sanity с кнопкой воспроизведения, и только после клика подгружает сторонний iframe . Код страницы урока спроектирован так, чтобы поддерживать глубокие ссылки (deep links) на конкретные секунды видео, что станет ключевой фичей при поиске по транскриптам .

Интеллектуальный поиск и Sanity Context 1:52:51

Главным отличием Vertex от обычных платформ является поиск, который ищет не по метаданным (заголовкам или тегам), а по транскриптам самих видео . Чтобы ИИ мог понимать структуру данных, внедряется Sanity Context MCP . Это позволяет агенту «рассуждать» о связях между курсами, модулями, инструкторами и уроками .

На данном этапе реализована серверная логика поиска:

Браузер отправляет запрос на Next.js сервер .
Сервер через Sanity Context и модель OpenAI анализирует базу данных .
ИИ возвращает структурированный ответ с ранжированными результатами .

Хотя интерфейс результатов поиска еще не готов, тестирование через curl-запросы подтверждает работоспособность: на запрос «как кешировать данные» система возвращает список уроков по Next.js, сортируя их по релевантности и указывая точные ID и ссылки .

Код-ревью и финальные исправления 2:02:43

После реализации огромного функционала (35 файлов, около 3000 строк кода) был инициирован процесс код-ревью через Code Rabbit . ИИ-рецензент выявил несколько важных моментов, включая необходимость валидации ключа OpenAI перед созданием клиента MCP и исправление дублирующихся событий в PostHog при повторном клике на активную вкладку . Также была обнаружена проблема с дублирующимися ключами React в блоках заметок, что потребовало исправления сид-данных в Sanity и жесткой перезагрузки браузера для очистки кеша .

🧠 Глубокий поиск по видео: MCP и пайплайн оффлайн-ингестии 2:05:34

Безопасность и архитектура протокола MCP 2:06:00

На этапе интеграции продвинутых функций поиска команда сталкивается с необходимостью строгой настройки безопасности, особенно в контексте Model Context Protocol (MCP) . Одной из критических уязвимостей, выявленных в ходе автоматизированного ревью, стала передача чувствительных данных в открытом виде через MCP-URL . Для защиты архитектуры крайне важно требовать использование протокола HTTPS для любых URL-адресов, связанных с учетными данными агентов . Это изменение предотвращает внутреннюю достижимость (internal reachability) и потенциальную утечку токенов при взаимодействии между поисковым сервером и ИИ-моделью .

Инструменты анализа кода, такие как Code Rabbit, подтверждают, что архитектура поиска спроектирована с учетом минимизации рисков: учетные данные хранятся исключительно на сервере, а область чтения контента ограничена только опубликованными данными . Такая конфигурация позволяет безопасно внедрять глубокое сканирование репозитория на предмет уязвимостей, подготавливая почву для реализации основной функции приложения — полнотекстового поиска по транскриптам видео . Ранее в разговоре авторы упоминали общую структуру данных в Sanity, но именно правильная настройка контекстного протокола превращает статический контент в «интеллектуальный» ресурс для агента .

Оффлайн-пайплайн ингестии видеоданных 2:07:43

Главная проблема стандартных образовательных платформ заключается в том, что видео по своей природе не подлежит индексации поисковыми роботами: Sanity «знает», что у урока есть URL на YouTube, но не «понимает», что происходит внутри кадра . Чтобы сделать возможным переход к конкретной секунде, необходимо превратить видео в структурированный документ. Для этого внедряется оффлайн-пайплайн ингестии . Термин «оффлайн» в данном контексте не означает отсутствие интернета — это означает, что обработка происходит заранее, а не в момент запроса пользователя .

Процесс ингестии, реализованный с помощью ИИ-агента, включает несколько этапов:

Анализ существующих схем уроков и загруженных видео .
Извлечение метаданных через специализированные инструменты, такие как InnerTube и библиотеки для работы с YouTube-капшнами .
Разбиение транскрипта на логические фрагменты (chunks) .

Использование оффлайн-подхода позволяет избежать лишних затрат на API и вычислительные мощности в реальном времени. Когда пользователь вводит запрос, система не обращается к YouTube — она уже имеет все необходимые данные в своей базе . Агент автоматически сканирует базу из более чем 120 видеоуроков, извлекая текстовые слои без единого сбоя .

Структурирование данных: главы, чанки и таймкоды 2:11:37

Результатом работы пайплайна становится создание в Sanity Studio специализированных документов типа videoIntelligence . Каждый такой документ содержит маркеры глав (Table of Contents) и массив фрагментов транскрипта . Ключевой технический нюанс здесь — стратегия нарезки текста. Фрагменты создаются длительностью около 45 секунд или объемом 350 символов, при этом система строго следит за тем, чтобы не разрывать предложения посередине . Это гарантирует, что каждая точка входа (start second) является реально существующим, осмысленным моментом видео .

Масштаб проделанной работы впечатляет: из 120 видео система извлекла 564 главы и разделила их более чем на 4000 кликабельных чанков . В Sanity Studio это выглядит как детализированный список, где каждый текстовый блок привязан к конкретному ID видео и временной метке . Благодаря такой декомпозиции, поиск по запросу (например, «caching» или «server actions») мгновенно возвращает не просто урок, а точную секунду, где лектор начинает обсуждать данную тему .

Хотя интерфейс страницы результатов поиска и расширенная аналитика взаимодействия с видео (через PostHog) будут детально рассмотрены в следующих главах, именно этот невидимый глазу пайплайн данных обеспечивает «магию» мгновенного перехода к нужному контенту . Внедрение такого уровня детализации превращает обычный плеер в мощный инструмент обучения, где время поиска сокращается до миллисекунд .

🏁 Финальные штрихи: Умный поиск и глубокий аудит безопасности 2:30:32

На заключительном этапе разработки платформа Vertex превращается из набора статических страниц в полноценное интеллектуальное приложение. После того как были внедрены пайплайны ингестии и настроен контекст Sanity , фокус смещается на качество пользовательского опыта и защиту системы от специфических «AI-уязвимостей». Завершение проекта требует не только написания кода, но и тщательного код-ревью через PR (Pull Requests), а также глубокого сканирования архитектуры на предмет утечек данных и потенциальных затрат.

Интерфейс выдачи и логика глубоких ссылок 2:13:22

Страница результатов поиска — это «лицо» интеллектуальной составляющей Vertex. Она должна не просто выводить список видео, а подсвечивать конкретные моменты, релевантные запросу пользователя . Реализация этого интерфейса строится на карточках видеомоментов, которые визуально отличаются от обычных уроков. Каждая такая карточка содержит метаданные из транскриптов и глав видео, полученные в ходе ингестии .

Ключевой особенностью является timestamped deep linking (глубокие ссылки с временными метками). Вместо того чтобы просто открывать страницу урока с начала, клик по результату поиска перебрасывает пользователя на плеер, который автоматически запускается с нужной секунды .

Разработчику при реализации этой функции важно учитывать два сценария:

Совпадение по главам: Если поисковый запрос соответствует названию или описанию главы, ссылка ведет на начало этой главы .
Совпадение по транскрипту: Если нейросеть нашла точное упоминание темы в тексте, ссылка формируется на основе временной метки конкретной фразы .

Также критически важно состояние загрузки (loading states). Поскольку поиск задействует цепочку вызовов к LLM и базе данных Sanity, интерфейс должен плавно обрабатывать ожидание, сохраняя отзывчивость системы .

Анализ пулл-реквестов с помощью CodeRabbit 2:30:58

Когда накопилось значительное количество незакоммиченных изменений — от пайплайна ингестии до аналитики PostHog — наступает этап создания финального PR . В данном проекте для автоматизации проверки кода используется CodeRabbit. Приложение Vertex к этому моменту стало сложным: оно имеет серверные роуты, взаимодействующие с LLM, скрипты записи данных и множество API-ключей (Sanity, Clerk, OpenAI, PostHog) в переменных окружения . Любой сгенерированный ИИ код может нести в себе скрытые ошибки, которые невозможно заметить в UI .

CodeRabbit проводит комплексный аудит PR, который для Vertex занял около 4 минут из-за изменения 49 файлов . В результате был выявлен Level 5 Critical риск с оценкой времени на ручное ревью более 2 часов . Основные замечания включали:

Ошибки телеметрии: При сбое отправки данных в аналитику (PostHog) поисковый роут возвращал ошибку 502, хотя сам поиск проходил успешно . Решением стало оборачивание вызовов аналитики в блок try/catch, чтобы ошибки сбора данных не ломали основной функционал .
Логика прогресса: Была обнаружена ошибка в расчете «глубины просмотра». Если пользователь переходил по глубокой ссылке в конец урока, система могла ошибочно засчитать прохождение всего материала за одну секунду . CodeRabbit предложил учитывать смещение (offset) от начала просмотра для корректного расчета процентов .

Безопасность AI-приложений и предотвращение DOS 2:32:15

Помимо стандартного код-ревью, для Vertex было активировано AI Deep Scan от CodeRabbit для выявления архитектурных уязвимостей . Это платная услуга с оплатой по факту использования, которая сканирует не просто синтаксис, а взаимодействие компонентов системы .

Скан выявил две критические проблемы, специфичные для современных AI-стеков:

AI Denial of Service (DOS): Публичный API поиска инициировал вызов OpenAI с циклом инструментов MCP без каких-либо ограничений (rate limits) . Злоумышленник мог запустить простой скрипт с HTTP-запросами, которые на стороне сервера превращались в дорогостоящие вызовы языковых моделей, что привело бы к огромным счетам за одну ночь . Исправление заключалось во внедрении лимитов на запросы до создания MCP-клиента и установке жестких лимитов бюджета у провайдера .
Утечка сессионных данных: Конфигурация PostHog через реверс-прокси (для обхода блокировщиков рекламы) приводила к тому, что браузер прикреплял куки сессии Clerk к запросам аналитики . Это создавало риск передачи чувствительных данных авторизации на сторонний сервис .

Проверка заняла 14 минут и стоила около 30 долларов, что автор считает оправданным для реального продукта, так как одна атака на API поиска могла обойтись значительно дороже . В итоге, разработка завершается трансформацией из «написания кода по промпту» в Agentic Engineering — системный подход к управлению ИИ-агентами, проверке их планов и аудиту результатов .