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

Источник: https://www.youtube.com/watch?v=8DfvwZ812dM
Канал: JavaScript Mastery
Опубликовано: 21.08.2026

---

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

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

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

### Архитектура и планирование: продукт превыше кода
[[JUMP:04:00]]

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

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

### Выбор и настройка стека: экосистема для быстрого старта
[[JUMP:05:04]]

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

*   **Sanity:** выступает не просто как CMS, а как готовый админ-дашборд (Studio) «из коробки» [5:32]. Это позволяет авторам и инструкторам совместно работать над контентом, не заставляя разработчика писать панель управления с нуля [5:45]. На Sanity работают такие гиганты, как Puma и Pinterest [5:59].
*   **Clerk:** берет на себя всю ответственность за аутентификацию [6:51]. Сессии, потоки сброса паролей, OAuth, верификация email и интеграция биллинга — всё это делегируется стороннему сервису, чтобы сэкономить недели разработки и избежать ошибок в безопасности [7:06].
*   **PostHog:** внедряется для получения ответов на реальные продуктовые вопросы [7:59]. Например: «Пользуются ли люди поиском?» или «Сколько минут урока они смотрят перед тем, как уйти?» [8:13]. 97% пользователей PostHog не платят за сервис ни цента, что делает его идеальным для стартапов [9:06].
*   **CodeRabbit:** используется для автоматического код-ревью через Pull Requests [9:31]. ИИ-код может содержать скрытые уязвимости, и CodeRabbit сканирует их перед деплоем [9:45]. Инструмент настолько надежен, что его использует сама Nvidia [10:11].

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

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

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

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

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

1.  **Роль:** Агент должен вести себя как Full Stack инженер уровня Principal, а не как общий ассистент [24:13].
2.  **Описание продукта:** Что такое Vertex и какова его главная цель (умный поиск по видео) [24:38].
3.  **Правила работы:** ИИ никогда не должен прыгать сразу в кодинг; для каждой задачи требуется план и одобрение инженера [25:05].

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

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

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

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

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

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

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

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

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

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

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

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

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

1.  **Промпт по скриншоту:** Агенту передается изображение макета с одной инструкцией: «Реализуй домашнюю страницу на основе прикрепленного UI» [41:32].
2.  **Планирование:** Перед написанием кода AI создает документ `prompts/homepage.md`, где описывает свои предположения о цветах, измерениях и компонентах [42:39].
3.  **Автоматическое тестирование:** В процессе сборки агент использует Playwright, чтобы сделать скриншоты страницы на разных размерах экранов и устранить горизонтальную прокрутку или ошибки верстки [43:46].
4.  **Финальная полировка:** В ходе работы выяснилось, что на 4K-мониторах стандартная ширина контента в 960 пикселей выглядит слишком узкой [45:50]. Одним уточняющим запросом ширина была увеличена до 1440 пикселей для обеспечения комфортных отступов и читаемости [46:02].

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.  `sanity.config.ts` — главный файл конфигурации, определяющий поведение студии, плагины и точки входа для структуры контента [59:07].
2.  `sanity.cli.ts` — инструмент для развертывания студии и управления наборами данных через командную строку [59:19].
3.  Папка `sanity` — выделенное место для хранения схем, определений и переменных окружения [59:32].

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

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

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

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

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

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

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

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

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

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

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

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

*   Уникальный слаг (slug) и краткое резюме курса [1:19:30];
*   Профиль инструктора с фотографией, биографией и списком компетенций [1:19:45];
*   Учебный план (Curriculum) с вложенными модулями [1:20:24];
*   Детализированные заметки к урокам в формате Rich Text с ключевыми тезисами и ресурсами [1:20:37].

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

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

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

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

1.  **Course Hero:** Заголовок, описание и призыв к действию [1:29:20].
2.  **Learning Outcomes:** Секция «Чему вы научитесь», данные для которой динамически подтягиваются из поля `whatYouWillLearn` в Sanity [1:29:34].
3.  **Syllabus:** Интерактивный список модулей и уроков [1:29:46]. 
4.  **Sticky Progress Bar:** Панель прогресса в нижней части экрана, которая на данном этапе остается презентационным компонентом (логика отслеживания будет добавлена позже) [1:26:00].

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

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

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

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

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

## 🚀 Аналитика PostHog и интерфейс обучения

[[JUMP:1:40:32]]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Браузер отправляет запрос на Next.js сервер [1:54:25].
2. Сервер через Sanity Context и модель OpenAI анализирует базу данных [1:54:38].
3. ИИ возвращает структурированный ответ с ранжированными результатами [1:58:14].

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

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

После реализации огромного функционала (35 файлов, около 3000 строк кода) был инициирован процесс код-ревью через **Code Rabbit** [2:03:11]. ИИ-рецензент выявил несколько важных моментов, включая необходимость валидации ключа OpenAI перед созданием клиента MCP и исправление дублирующихся событий в PostHog при повторном клике на активную вкладку [2:04:42]. Также была обнаружена проблема с дублирующимися ключами React в блоках заметок, что потребовало исправления сид-данных в Sanity и жесткой перезагрузки браузера для очистки кеша [1:49:32].

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

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

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

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

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

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

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

*   Анализ существующих схем уроков и загруженных видео [2:09:37].
*   Извлечение метаданных через специализированные инструменты, такие как InnerTube и библиотеки для работы с YouTube-капшнами [2:10:28].
*   Разбиение транскрипта на логические фрагменты (chunks) [2:11:01].

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

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

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

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

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

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

[[JUMP:2:30:32]]

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

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

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

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

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

1.  **Совпадение по главам:** Если поисковый запрос соответствует названию или описанию главы, ссылка ведет на начало этой главы [2:40:54].
2.  **Совпадение по транскрипту:** Если нейросеть нашла точное упоминание темы в тексте, ссылка формируется на основе временной метки конкретной фразы [2:40:55].

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

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

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

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

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

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

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

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

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

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