Использование Agent Builder ChatKit от OpenAI
Делиться
Недавний день разработки OpenAI был посвящен новому продукту для управления рабочими процессами агентов — Agent Builder. Он позволяет создавать агентские процессы с помощью простого в использовании графического интерфейса. Он вполне обоснованно привлек наибольшее внимание, но другая сторона рабочего процесса — развертывание — получила меньше внимания.
Все, что мы имели, — это мимолетные взгляды на экраны и код, и не было никакого реального объяснения того, как интегрировать агента, созданного с помощью Agent Builder, в свой собственный веб-сайт или приложение, или веб-сайт или приложение вашей компании.
Именно здесь на помощь приходит другой инструмент OpenAI для создания агентов — Chatkit. Это такой же важный продукт, как и их конструктор агентов, а возможно, и более важный.
Почему? Потому что ChatKit используется для внедрения любого агентного процесса, созданного с помощью конструктора агентов, в реальные веб-приложения и страницы.
Ничего страшного, думаете вы, пойду-ка я почитаю документацию OpenAI по ChatKit. Что ж, удачи вам. Помимо того, что она плохо написана, она требует значительных знаний в программировании и понимания GitHub и различных других технических процессов.
В оставшейся части статьи я пошагово опишу весь процесс развертывания агента, созданного с помощью Agent Builder от OpenAI, на общедоступном веб-сайте.
Что мы будем делать?
Эта статья станет вашим «недостающим руководством» по развёртыванию Agent Builder. Сначала мы создадим два простых веб-сайта: один на платформе Lovable, а другой — на платформе HuggingFace (HF), и разместим их во Всемирной паутине.
После этого мы разработаем чат-бота с помощью Agent Builder от OpenAI. Затем мы развернем его на наших новых сайтах Lovable и HF с помощью Agent Builder ChatKit.
Что вам понадобится
Существует несколько предварительных условий, но большинство из них можно выполнить бесплатно.
- Учетная запись OpenAI и ключ API (платный план)
- Аккаунт Vercel (бесплатно)
- Аккаунт HuggingFace (бесплатно)
- Тестовый сайт (БЕСПЛАТНЫЙ и/или платный)
Развертывание ChatKit
Нам нужно сделать несколько шагов, но ни один из них не сложный. Не торопитесь и следуйте инструкциям методично, и всё будет хорошо.
Шаг 1 — Создайте наши тестовые веб-сайты
Если у вас уже есть веб-сайт и вы можете редактировать/изменять его код, смело используйте это.
В противном случае вы можете использовать такой инструмент, как lovable.dev, который может не только создать для вас веб-сайт, но и разместить его в Интернете, используя один из своих собственных доменов или предоставленный вами пользовательский домен.
Обратите внимание, что привлекательная ссылка выше — это партнерская ссылка, то есть, если вы подпишетесь на платный план, используя ее, я получу небольшую комиссию.
Вот мой запрос на Lovable,
Мне нужна простая страница типа «Hello world» на JavaScript, CSS и HTML.
Lovable потребовалось около 15 секунд, чтобы создать сайт, и я развернул его, используя один из доменов-примеров Lovable. Вот что получилось. Ссылку на сайт я приведу в конце статьи.
Если у вас ограниченный бюджет, бесплатный вариант создания веб-страницы — использование HuggingFace (HF) Spaces. Вот как это сделать.
- Создайте учетную запись HF и войдите в систему.
- Нажмите ссылку «Пространства» в верхней части домашней страницы, затем нажмите кнопку «Новое пространство» , также в правом верхнем углу страницы.
- Введите название пространства, выберите тип лицензии и выберите «Статический» для SDK, «Пустой» для шаблона, «Базовый ЦП» для оборудования и «Публичный» для области действия.
- Когда будете готовы, нажмите кнопку «Создать пространство» внизу экрана. Вы увидите такой экран:
URL-ссылка на ваш сайт HF будет выглядеть примерно так:
https://huggingface.co/spaces/{Your_HF_username}/{your_HF_space_name}
На этом этапе у вас должен быть хотя бы один общедоступный веб-сайт, который вы можете модифицировать для интеграции с агентом Agent Builder. Но сначала нам нужен агент.
Шаг 2 — Создание чат-бота OpenAI Agent Builder
Я не буду слишком подробно останавливаться на этом этапе, так как в интернете полно обучающих программ и демонстраций, как это сделать. Кроме того, команда OpenAI очень подробно осветила этот этап на своём дне разработчика.
Однако мой конструктор агентов предельно прост. Это будет простой чат-бот, содержащий всего два узла: начальный узел и узел агента. Фактически, это настройки по умолчанию, которые вы получите, нажав кнопку «Создать» на главной странице конструктора агентов. Единственное другое изменение, которое я внёс в узел агента, — это выбор GPT5-nano в качестве уровня магистра управления агентом (LLM), и обновление инструкций к агенту следующим образом:
Вы полезный помощник. Расскажите пользователю интересный факт о предложенной теме, а затем расскажите «отцовскую шутку» на эту тему.
Вот пример чата.
Расскажите мне интересный факт о собаках. Интересный факт: Собаки способны «чувствовать запахи в стерео». Они впитывают разную информацию об запахе каждой ноздрей, что помогает им определить направление запаха в трёхмерном пространстве. Имея до ~300 миллионов обонятельных рецепторов (у человека их около 6 миллионов), некоторые собаки могут обнаруживать вещества в концентрациях порядка одной триллионной доли — примерно как чайную ложку сахара в двух олимпийских бассейнах. Шутка: Почему собака сидела в тени? Потому что она не хотела быть хот-догом!
Чтобы создать собственного агента, перейдите по ссылке https://platform.openai.com/agent-builder. В зависимости от выбранной вами модели LLM для вашего агента, вам может потребоваться пройти идентификацию перед запуском любых агентов, так что имейте это в виду.
Примечание: Запишите название проекта, которое вы использовали при создании агента. Оно находится в левом верхнем углу главного экрана Agent Builder. Оно понадобится нам при создании ключа API OpenAI, поскольку проект, для которого создается ключ API, должен совпадать с проектом, в котором создается ваш агент. Я работал над всеми задачами в проекте по умолчанию .
Нажмите кнопку «Предварительный просмотр» в правом верхнем углу страницы, чтобы убедиться, что ваш агент работает как надо. Когда всё будет готово , нажмите кнопку «Опубликовать» , расположенную в правом верхнем углу страницы. Введите имя вашего агента и снова нажмите кнопку «Опубликовать». После этого появится всплывающее окно:
Идентификатор рабочего процесса понадобится вам позже, поэтому запишите его сейчас. Также обратите внимание на ссылку «Клонировать пример приложения» в нижней части всплывающего окна. Она понадобится нам на следующем шаге.
Шаг 3 — Создайте форк примера приложения OpenAI ChatKit в своем собственном репозитории GitHub.
Чтобы помочь с развертыванием агентов с помощью ChatKit, OpenAI предоставляет пример кода стартового набора в репозитории GitHub. Нам нужно создать копию этого приложения (то есть скопировать его) в наш собственный репозиторий GitHub и развернуть его в интернете.
На этапе развёртывания мы будем использовать Vercel. Vercel — это облачная платформа для развёртывания и хостинга веб-приложений.
Чтобы создать форк приложения OpenAI, воспользуйтесь ссылкой «Clone Sample app» во всплывающем окне из шага 2. Это перенаправит вас на соответствующую страницу OpenAI в GitHub. Теперь нажмите кнопку «Fork» в репозитории. Она находится чуть выше и правее зелёной кнопки «Code» .
При желании вам будет предложено ввести имя для нового репозитория или вы можете оставить имя по умолчанию.
Шаг 4 — Разверните свою версию образца приложения ChatKit от OpenAI в Vercel
Для этого шага вам понадобится учётная запись Vercel, если у вас её ещё нет. Её можно бесплатно создать и использовать в ограниченном примере, который мы здесь покажем. Перейдите на сайт https://vercel.com и создайте учётную запись прямо сейчас.
После входа в систему перейдите на панель управления и нажмите кнопку «Добавить новый» -> «Проект», чтобы начать новый проект. Ссылка на панель управления находится под значком вашего профиля в левом верхнем углу страницы.
При первом запуске вам потребуется предоставить Vercel права доступа к вашей учётной записи GitHub, для чего нажмите кнопку «Продолжить с GitHub». Затем вам будет предложено предоставить Vercel права доступа. Выберите, предоставить ли Vercel доступ ко всем вашим репозиториям или только к одному. После этого вы сможете импортировать свой репозиторий GitHub в Vercel. После завершения импорта последним этапом будет развёртывание. Однако прежде чем продолжить, необходимо добавить несколько переменных окружения. Ссылка для этого находится над кнопкой развёртывания.
Переменные среды, которые необходимо добавить:
OPENAI_API_KEY — это должен быть ключ API, созданный в том же проекте, что и ваш Agent Builder. Чтобы получить ключ API, перейдите по ссылке
https://platform.openai.com/api-keys
Создайте или повторно используйте ключ API, убедившись, что имя проекта совпадает с именем из Agent Builder.
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID — это идентификатор рабочего процесса, созданного вами в Agent Builder, который начинается с wf_…
После этого вы можете нажать кнопку «Развернуть» на Vercel. Это займёт минуту-другую, но после завершения мы сможем протестировать нашего чат-бота. После завершения развёртывания вернитесь на панель управления Vercel. Убедитесь, что вы находитесь в нужном проекте. Вы увидите кнопку « Посетить », которая перенаправит вас к вашему чат-боту. Прежде чем нажать на неё, нам нужно сделать ещё кое-что. В целях безопасности нам необходимо сообщить OpenAI домен нашего приложения чат-бота на Vercel.
Скопируйте URL-адрес домена Vercel для вашего проекта и вернитесь в свой проект конструктора агентов OpenAI.
Затем нажмите кнопку «Код» в правом верхнем углу экрана, чтобы открыть всплывающее окно с информацией о Chatkit. Нажмите кнопку «Добавить домен» . В появившемся мини-окне введите URL-адрес домена Vercel в поле «Ввод», а затем нажмите кнопку «Сгенерировать ключ» .
Теперь вернитесь в Vercel и нажмите кнопку «Посетить», чтобы протестировать чат-приложение. Вот как выглядело моё.
Шаг 5 — Измените наши оригинальные сайты Lovable и HuggingFace, чтобы включить нового чат-бота.
Это наш последний шаг, включающий генерацию кода для вставки, который мы можем вставить в наши веб-страницы. Мы делаем это, изменяя файл index.html нашего веб-приложения. Я поручил ChatGPT создать код, необходимый для вставки.
URL-адрес домена вашего чат-бота можно получить на панели управления Vercel.
Вот мой разговор в ChatGPT. Замените URL моего домена на свой.
Это URL-адрес домена моего чат-бота: openai-chatkit-starter-app-blue.vercel.app Я хочу, чтобы на странице index.html моего веб-сайта в разделе HEAD был размещен код развертывания, который позволит мне запустить чат-бот на моем веб-сайте.
И ответ GPT был следующим.
Идеально 👌 — поскольку ваш чат-бот размещен на https://openai-chatkit-starter-app-blue.vercel.app, самый простой способ встроить его в ваш сайт — использовать