00:00:00Миллионы разработчиков строят свои проекты на базе фронтенд-облака Vercel уже более десяти лет.
00:00:04Все мы используем Vercel для развертывания всего: от личных проектов до корпоративного ПО.
00:00:10И когда вы создаете агентов и функции ИИ, чтобы упростить жизнь пользователям или команде,
00:00:15меньше всего вам хочется иметь дело со сложным обслуживанием в рабочей среде.
00:00:21Самоуправляемая инфраструктура Vercel делает DevOps таким же простым, как и деплой.
00:00:25Вы создаете код и агентов, а Vercel автономно оптимизирует производительность в глобальном масштабе,
00:00:31выделяет ресурсы, управляет рабочими процессами ИИ и даже расследует аномалии.
00:00:38И всё это без необходимости какой-либо настройки.
00:00:40Теперь позвольте мне показать, что я имею в виду, на примере быстрого прогона.
00:00:43Давайте попробуем перенести существующее веб-приложение.
00:00:46Это демо-приложение платформы для найма в кофейную компанию среднего размера с собственной обжаркой и кафе.
00:00:53Это простое приложение с фронтендом, базой данных для хранения заявок и резюме,
00:00:58и бэкенд-сервисом, который анализирует сопроводительные письма для ускорения отбора кандидатов.
00:01:03Сейчас оно находится на древнем хостинге, не буду говорить на каком,
00:01:07но мы определенно хотим его осовременить, так что приступим.
00:01:10Мы перенесем его на Vercel, что ускорит разработку функций, деплой и совместную работу.
00:01:17Давайте импортируем это приложение в Vercel.
00:01:19Я начну с бэкенда — это обычный сервис на Python с использованием FastAPI.
00:01:24Нажимаю "Add New".
00:01:26Мой аккаунт Git уже подключен, и я вижу здесь свои репозитории.
00:01:31Нажимаю "Import" на репозитории с API.
00:01:33Процесс импорта полностью настраиваемый, включая конфигурации сборки и вывода,
00:01:38но Vercel поддерживает FastAPI и другие бэкенд-фреймворки из коробки.
00:01:44Так что я могу просто нажать "Deploy", и все заработает.
00:01:46И через несколько секунд мой Python-бэкенд уже развернут и запущен на Vercel.
00:01:52Vercel автоматически сгенерировал URL для этого проекта.
00:01:55Я скопирую его, чтобы добавить как переменную окружения для следующего приложения.
00:02:01Добавляю еще один новый проект, нажимаю "Import" на следующем приложении,
00:02:05и импортирую переменные окружения, чтобы оно могло взаимодействовать с Supabase.
00:02:11Отлично, теперь приложение видит Supabase, а для переменной FastAPI
00:02:15я вставлю только что скопированный URL и запущу деплой.
00:02:20Vercel собирает и развертывает проект,
00:02:23который будет работать на той же инфраструктуре, что питает миллионы сайтов и приложений.
00:02:27126 точек глобального присутствия Vercel автоматически размещают контент ближе к пользователю,
00:02:33а значит, он всегда будет загружаться очень быстро.
00:02:37И вот мы видим, что приложение успешно развернуто.
00:02:40Давайте взглянем на него.
00:02:42Я вижу список вакансий и бэкенд в панели управления с нашей функцией анализа на Python.
00:02:49Когда это будет в продакшене, я смогу мониторить всё приложение целиком.
00:02:53Но пока заглянем в другой проект, где уже есть живые данные.
00:02:57Я вижу полную картину: веб-аналитику, метрики скорости, логи и панель мониторинга с возможностью запросов.
00:03:04Например, вот аналитика нашего сайта skills.sh, где люди ищут навыки для агентов.
00:03:11Тут есть подробная информация о трафике и источниках перехода.
00:03:15Если нажать на "Speed Insights", откроются показатели Core Web Vitals.
00:03:19Так я могу диагностировать и исправлять любые проблемы со скоростью или нагрузкой.
00:03:23В разделе "Observability" доступен дашборд для исследования любых диагностических данных приложения:
00:03:29от логов и функций до запросов Edge и передачи данных.
00:03:34Теперь я хочу сделать функцию суммаризации более полезной для менеджеров по найму.
00:03:38Сейчас FastAPI просто сокращает текст сопроводительного письма с помощью Python-библиотеки.
00:03:43Но мы можем создать простого агента для анализа и письма, и PDF-резюме,
00:03:48чтобы сравнить их с описанием вакансии, дать первичную оценку кандидату
00:03:52и подготовить черновик письма для менеджера.
00:03:56Репозиторий уже клонирован у меня локально, так что я перейду в директорию и установлю нужные инструменты.
00:04:01Теперь я воспользуюсь Vercel CLI, чтобы связать локальный проект с платформой.
00:04:06CLI позволяет легко управлять платформой Vercel прямо из командной строки.
00:04:11Начнем с команды "vercel link".
00:04:14Да, я привязываю этот локальный проект.
00:04:16Выбираю организацию "Vercel demo" и проект "coffee shop jobs".
00:04:21Система уже его нашла.
00:04:22Теперь подтянем переменные окружения.
00:04:24Готово.
00:04:25Я также могу запустить приложение локально через "vercel dev", что в точности имитирует среду Vercel.
00:04:31Пробуем: "vercel dev".
00:04:34Сервер запущен, давайте протестируем.
00:04:37И вот оно.
00:04:38Довольно круто.
00:04:40Теперь установим инструменты ИИ, необходимые для создания агента.
00:04:43Vercel предоставляет всё необходимое для разработки ИИ-функций и агентов.
00:04:47Сначала нужно интегрировать саму модель ИИ для суммаризации.
00:04:51Через Vercel AI Gateway я могу использовать сотни различных моделей,
00:04:55а запуск через "vercel dev" дает автоматический доступ с токенами OIDC — это очень удобно.
00:05:00Затем я установлю AI SDK, который содержит набор примитивов для таких задач, как работа с текстом.
00:05:07Выполняем "pnpm install ai".
00:05:12Отлично.
00:05:13После этого я установлю Workflow Dev Kit для надежной оркестрации каждого шага агента.
00:05:21Если бы мое приложение генерировало код, я мог бы использовать Vercel Sandbox для его безопасного запуска.
00:05:26Но это простой агент для суммаризации, так что песочница здесь не обязательна.
00:05:31И последнее: наш фронтенд написан на Next.js.
00:05:34Поэтому я добавлю навык "React best practices", чтобы фронтенд был чистым и быстрым.
00:05:40Воспользуюсь сайтом skills.sh.
00:05:43Заходим сюда, ищем "React best practices".
00:05:47Копирую команду для установки.
00:05:50Вот и всё.
00:05:53Убедимся, что установка прошла для clog code и других компонентов.
00:05:56Я предпочитаю версию SimLink, и она установлена.
00:06:01Теперь приступим к созданию агента.
00:06:02Он довольно простой, так что я просто дам промпт для clog code.
00:06:06Вот промпт, с которого я начал.
00:06:08Он поручает clog code создать агента, который проанализирует письмо и резюме,
00:06:12объединит данные, сравнит их с вакансией, даст рекомендацию и составит ответное письмо.
00:06:20Конечно, я потратил время на доработку этого в точный "one-shot" промпт,
00:06:25который я сейчас вставлю в clog code и запущу в работу.
00:06:29Благодаря магии видеомонтажа, представим, что я быстро прогнал промпты через clog,
00:06:35что я и сделал, и теперь просто открою папку с готовым результатом.
00:06:39Итак, деплоим.
00:06:41Я фиксирую изменения и отправляю ветку, над которой работаю.
00:06:47Теперь инфраструктура Vercel автоматически распознает задачи ИИ
00:06:51и выделит необходимые вычислительные мощности для этих заданий.
00:06:55И здесь очень радует ценообразование за активные вычисления.
00:06:57С меня спишут плату только за реальную работу процессора, а не за время ожидания ответа от API модели.
00:07:03Теперь посмотрим на приложение, зайдем в панель и проверим новую функцию в заявке кандидата.
00:07:10И действительно, вот текст отказа для этой заявки и сгенерированное письмо.
00:07:17Лучшее в превью-средах то, что любой член команды может оставить комментарий в любой части приложения.
00:07:24Я сделаю это прямо сейчас и попрошу Эрика добавить кнопку.
00:07:31Круто, и это лишь одна из функций панели инструментов Vercel.
00:07:34Там можно тестировать флаги, проводить аудит доступности, смотреть трассировки и многое другое.
00:07:38Превью-среда работает на той же инфраструктуре, что и продакшен,
00:07:42так что всё протестированное здесь будет в точности таким же для конечных пользователей.
00:07:46Мы добавили агента, но я хочу, чтобы другие участники команды тоже могли изменять интерфейс.
00:07:52V0 позволяет коллегам работать над проектом в веб-среде разработки,
00:07:57сохраняя всё под контролем версий через рабочие процессы Git.
00:08:01Это действительно здорово.
00:08:03Я импортирую проект из GitHub, выберу ветку main как базу, и V0 настроит проект.
00:08:13И, как видите, мои переменные окружения тоже были импортированы.
00:08:19Меньше чем за минуту мое приложение уже запущено в V0.
00:08:23Поскольку это существующий проект, V0 создает песочницу для запуска кода.
00:08:28Это тот же примитив Sandbox, который мы используем в Vercel для создания изолированных сред.
00:08:33Если я нажму на Git, вы увидите, что V0 автоматически создал новую ветку для работы.
00:08:39Я хочу немного подправить дизайн страницы вакансий.
00:08:42Может это безумие, но давайте сделаем карточки вакансий на всю ширину страницы.
00:08:50V0 это реализовал, и... хм, мне не очень нравится этот вариант, но посмотрим, что скажет команда дизайнеров.
00:08:57Я могу отправить этот чат V0 коллегам, чтобы они продолжили работу,
00:09:00или открыть PR и поделиться превью-средой для совместного обсуждения.
00:09:06Когда приложение развернуто и работает на весь мир, Vercel гарантирует его безопасность по умолчанию.
00:09:13Та же инфраструктура, что запускает приложение, защищает его на уровне Edge (границы сети).
00:09:18Вот вид нашего файрвола для сайта на Next.js.
00:09:20Трафика много, и далеко не весь он добронамеренный.
00:09:24WAF от Vercel автоматически проверяет и фильтрует вредоносные запросы на границе сети еще до того, как они достигнут приложения.
00:09:33Функция Bot ID незаметно отличает реальных людей от ботов, блокируя вредоносный трафик без лишних капч.
00:09:40Глобальная сеть Vercel автоматически обнаруживает и отражает крупные атаки, сохраняя отзывчивость вашего приложения под нагрузкой.
00:09:49Всё, что вы увидели — миграция, работа с ИИ, коллаборация, безопасность — работает на одной платформе без настройки инфраструктуры.
00:09:59Это и значит "самоуправляемая".
00:10:01Платформа берет всё на себя, чтобы вы могли сосредоточиться на выпуске продукта.
00:10:05У нас уже более 11 миллионов проектов.
00:10:08Ваш — следующий.