Déployer un chatbot OpenAI Agent Builder sur un site Web
La journée a été dominée par son nouveau produit de workflow Agentic, Agent Builder. Il vous permet de créer des processus agentiques via une interface utilisateur graphique simple à utiliser. C’est à juste titre que c’est lui qui a retenu le plus l’attention, mais l’autre aspect de leur processus de flux de travail – le déploiement – a reçu moins d’attention.
Tout ce que nous avions était de brefs aperçus d’écrans et de code, et il n’y avait aucune véritable explication sur la façon d’intégrer un agent créé avec Agent Builder dans votre propre site Web ou application ou dans celui de votre entreprise.
C’est là que l’autre outil de création d’agents d’OpenAI, Chatkit, est censé intervenir. Il s’agit d’un produit tout aussi important que leur Agent Builder – sans doute plus.
Pourquoi? En effet, ChatKit est utilisé pour déployer tout processus agent que vous créez à l’aide du générateur d’agent dans des applications et des pages Web réelles.
Pas de soucis, pourriez-vous penser, je vais aller lire la documentation d’OpenAI sur ChatKit. Eh bien, bonne chance à vous. En plus d’être mal écrit, il nécessite une quantité considérable de connaissances en programmation et une compréhension de GitHub et de divers autres processus techniques.
Dans le reste de cet article, je décrirai le processus exact, étape par étape, pour déployer un agent créé à l’aide d’Agent Builder d’OpenAI sur un site Web accessible au public.
Ce que nous ferons
Cet article sera votre « Manuel manquant » pour le déploiement d’Agent Builder. Nous allons d’abord créer deux sites Web simples, l’un utilisant les espaces Lovable et l’autre utilisant les espaces HuggingFace (HF), et les déployer sur le World Wide Web.
Après cela, nous développerons un agent chatbot à l’aide de l’Agent Builder d’OpenAI. Nous le déploierons ensuite sur nos nouveaux sites Web Lovable et HF à l’aide du ChatKit Agent Builder.
Ce dont vous aurez besoin
Il existe plusieurs prérequis, mais la plupart d’entre eux sont gratuits à mettre en place.
- Un compte OpenAI et une clé API (forfait payant)
- Un compte Vercel (Gratuit)
- Un compte HuggingFace (Gratuit)
- Un site de test (GRATUIT et/ou payant)
Déploiement de ChatKit
Nous devons suivre plusieurs étapes, mais aucune n’est compliquée. Prenez votre temps et suivez les étapes méthodiquement, et tout ira bien.
Étape 1 — Créez nos sites Web de test
Si vous avez déjà un site Web et que vous pouvez éditer/changer le code derrière celui-ci, n’hésitez pas à l’utiliser.
Sinon, vous pouvez utiliser un outil comme adorable.devqui peut non seulement créer un site Web pour vous, mais également le déployer sur le Web en utilisant l’un de ses propres domaines ou un domaine personnalisé que vous fournissez.
Notez que le lien ci-dessus est un lien d’affiliation, ce qui signifie que si vous souscrivez à un forfait payant en l’utilisant, je reçois une petite commission.
Voici mon invite à Lovable,
I want a simple "Hello world" type javascript, css, html react pageLovable a mis environ 15 secondes pour produire un site Web et je l’ai déployé en utilisant l’un des exemples de domaines de Lovable. Voici ce qu’il a produit. Je mettrai un lien vers le site Web à la fin de l’article.
Pour ceux qui ont un budget serré, une option gratuite pour créer une page Web consiste à utiliser les espaces HuggingFace (HF). Voici comment procéder.
- Créez un compte HF et connectez-vous.
- Cliquez sur le Espaces lien en haut de la page d’accueil, puis cliquez sur le Nouvel espace bouton, également vers le haut à droite de la page.
- Remplissez le nom de l’espace, choisissez un type de licence et sélectionnez ‘Statique’ pour le SDK, ‘Vide’ pour le modèle, « Processeur de base » pour le matériel, et ‘Publique’ pour la portée.
- Cliquez sur le Créer de l’espace en bas de l’écran lorsque vous êtes prêt. Vous devriez voir un écran comme celui-ci apparaître,
Le lien URL vers votre site Web HF ressemblera à ceci :
https://huggingface.co/spaces/{Your_HF_username}/{your_HF_space_name}À ce stade, vous devez disposer d’au moins un site Web accessible au public que vous pouvez modifier pour intégrer un agent Agent Builder. Mais d’abord, nous avons besoin d’un agent.
Étape 2 — Créer un agent Chatbot OpenAI Agent Builder
Je ne dépenserai pas trop pour cette étape, car de nombreux tutoriels et démos sont disponibles en ligne sur la façon de procéder. De plus, l’équipe OpenAI a très bien couvert cette partie lors de sa journée des développeurs.
Cependant, mon générateur d’agents est aussi simple que possible. Il s’agira d’un chatbot simple contenant seulement deux nœuds : un nœud de démarrage et un nœud d’agent. En fait, il s’agit de la configuration par défaut que vous obtenez si vous cliquez sur le bouton Créer sur la page d’accueil d’Agent Builder. La seule autre modification que j’ai apportée au nœud d’agent a été de sélectionner GPT5-nano comme LLM de mon agent, et j’ai mis à jour les instructions de l’agent comme suit :
Vous êtes un assistant utile. Dites à l’utilisateur un fait intéressant sur le sujet proposé, puis racontez une « blague de papa » sur le sujet
Voici un exemple de chat.
Tell me an interesting fact about dogs
Interesting fact: Dogs can "smell in stereo." They draw different scent
information into each nostril, helping them locate the direction of an
odor in 3D space. With up to ~300 million olfactory receptors
(humans have ~6 million), some dogs can detect substances at
parts-per-trillion-roughly like finding a teaspoon of sugar in two
Olympic-sized pools.
Joke: Why did the dog sit in the shade? Because he didn't want to
be a hot dog!Pour créer votre propre agent, rendez-vous sur https://platform.openai.com/agent-builder. En fonction du modèle LLM que vous choisissez d’utiliser pour votre agent, vous devrez peut-être également passer un contrôle d’identification avant de pouvoir exécuter des agents, alors gardez cela à l’esprit.
NB : Notez le nom du projet que vous avez utilisé lors de la création de votre agent. Il est situé en haut à gauche de l’écran d’accueil d’Agent Builder. Nous en aurons besoin lors de la création de notre clé API OpenAI, car le projet sous lequel la clé API est créée doit correspondre le projet dans lequel votre agent est construit. Je travaillais sur toutes mes tâches sous le Projet par défaut.
Cliquez sur le Aperçu en haut à droite de la page pour vous assurer que votre agent fonctionne comme prévu. Quand tu es satisfaitcliquez sur le Publier bouton, situé en haut à droite de la page. Remplissez le nom de votre agent et cliquez à nouveau sur le bouton Publier. Lorsque vous faites cela, une fenêtre contextuelle apparaîtra comme ceci :
Vous aurez besoin de l’ID du workflow plus tard, alors veuillez en prendre note maintenant. Notez également le Cloner un exemple d’application lien en bas de la fenêtre contextuelle. Nous l’utiliserons à l’étape suivante.
Étape 3 — Transférez l’exemple d’application ChatKit d’OpenAI vers votre propre dépôt GitHub
Pour faciliter le déploiement d’agents à l’aide de ChatKit, OpenAI fournit un exemple de code de kit de démarrage dans un référentiel GitHub. Nous devons créer cette application (c’est-à-dire la copier) sur notre propre référentiel GitHub et la déployer sur le Web.
Pour la phase de déploiement, nous utiliserons Vercel. Vercel est une plateforme cloud de déploiement et d’hébergement d’applications Web.
Pour créer l’application OpenAI, utilisez le Cloner un exemple d’application lien dans la fenêtre contextuelle de l’étape 2. Cela vous mènera à la page OpenAI GitHub appropriée. Maintenant, cliquez sur le Fourchette bouton sur le dépôt. C’est juste au dessus et à droite du green Code bouton.
Vous serez invité à saisir un nom pour votre nouveau référentiel, si vous le souhaitez, ou vous pouvez le laisser par défaut.
Étape 4 — Déployez votre fork de l’exemple d’application ChatKit d’OpenAI sur Vercel
Pour cette étape, vous aurez besoin d’un compte Vercel si vous n’en avez pas déjà un. Sa configuration et son utilisation sont gratuites pour l’exemple limité que nous allons montrer ici. Rendez-vous sur https://vercel.com et créez votre compte maintenant.
Une fois connecté, accédez au tableau de bord et cliquez sur le bouton Ajouter nouveau -> Projet bouton pour démarrer un nouveau projet. Vous pouvez trouver le lien vers le tableau de bord sous l’icône de votre profil utilisateur, en haut à gauche de la page.
La première fois, vous devrez autoriser Vercel les droits d’accès à votre compte GitHub, cliquez donc sur le bouton Continuer avec GitHub. Il vous sera ensuite demandé d’autoriser Vercel. Choisissez d’autoriser Vercel à accéder à tous vos dépôts ou simplement à un dépôt individuel. Une fois cela terminé, vous pourrez importer votre référentiel GitHub dans Vercel. Une fois l’importation terminée, la dernière étape est le déploiement. Cependant, avant de continuer, vous devez ajouter quelques variables d’environnement. Le lien pour ce faire se trouve juste au-dessus du bouton de déploiement.
Les variables d’environnement que vous devez ajouter sont :
OPENAI_API_KEY— Il doit s’agir d’une clé API créée dans le même projet que votre Agent Builder. Pour obtenir votre clé API, rendez-vous sur
https://platform.openai.com/api-keys
Créer ou réutiliser une clé API, en vous assurant que le nom du projet correspond à celui d’Agent Builder.
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID— Il s’agit de l’ID du workflow que vous avez créé dans Agent Builder, qui commence par wf_…
Après cela, vous pouvez cliquer sur le Déployer bouton sur Vercel. Cela prendra une minute ou deux, mais une fois terminé, nous pourrons tester notre chatbot. Une fois le déploiement terminé, revenez à votre tableau de bord Vercel. Assurez-vous que vous êtes sur le bon projet et vous devriez voir un bouton intitulé Visitequi vous mènera à votre ChatBot. Avant de cliquer dessus, nous avons encore une chose à faire. Nous devons informer OpenAI du domaine de notre application chatbot sur Vercel pour des raisons de sécurité.
Copiez le Vercel domaine URL de votre projet et revenez à votre projet de création d’agent OpenAI.
Ensuite, cliquez sur le bouton Code en haut à droite de l’écran pour afficher la fenêtre contextuelle des détails du Chatkit. Cliquez sur le « Ajouter un domaine » bouton. Sur la mini-écran contextuelle qui apparaît, saisissez l’URL du domaine Vercel dans le champ, puis cliquez sur le bouton « Générer la clé » bouton.
Maintenant, de retour sur Vercel, cliquez sur le « Visite » bouton pour tester votre application de chat. Voilà à quoi ressemblait le mien.
Étape 5 : Modifiez nos sites Web originaux Lovable et HuggingFace pour intégrer le nouveau chatbot.
Il s’agit de notre dernière étape, qui consiste à générer du code intégré que nous pouvons insérer dans nos propres pages Web. Nous y parvenons en modifiant le fichier index.html de notre application web. J’ai demandé à ChatGPT de créer le code que nous devons injecter.
Vous pouvez obtenir l’URL du domaine de votre chatbot à partir du tableau de bord Vercel.
Voici ma conversation ChatGPT. Remplacez l’URL de mon domaine par la vôtre.
This is the domain URL of my chatbot: openai-chatkit-starter-app-blue.vercel.app
I want some deployment code to go in my website's index.html page in the
HEAD section that will enable me to run the chatbot on my websiteEt la réponse de GPT a été la suivante.
Perfect 👌 - since your chatbot is hosted at
https://openai-chatkit-starter-app-blue.vercel.app
the cleanest way to embed it in your website is to use an <iframe> and inject the embed script in your <head> so the widget loads automatically when your page loads.
Below is a simple copy-paste snippet you can put inside the <head> of your index.html file.
It creates a floating chat bubble in the bottom-right corner that opens your chatbot in an iframe panel:
📄 Add this inside <head> of your index.html:
<!-- Chatbot Embed -->
<style>
.chat-fab {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
cursor: pointer;
background: #111;
color: #fff;
font-size: 24px;
box-shadow: 0 6px 15px rgba(0,0,0,0.25);
z-index: 10000;
}
.chat-panel {
position: fixed;
right: 20px;
bottom: 90px;
width: 400px;
height: 600px;
max-width: calc(100% - 40px);
transform: translateY(20px);
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, transform .2s ease;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0,0,0,.25);
background: #fff;
z-index: 10000;
}
.chat-panel.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.chat-header {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
background: #111;
color: #fff;
font: 14px/1.2 system-ui, sans-serif;
}
.chat-iframe {
border: 0;
width: 100%;
height: calc(100% - 44px);
display: block;
}
.chat-close {
background: none;
border: 0;
color: #fff;
font-size: 18px;
cursor: pointer;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const fab = document.createElement('button');
fab.className = 'chat-fab';
fab.textContent = '💬';
fab.setAttribute('aria-label', 'Open chat');
const panel = document.createElement('div');
panel.className = 'chat-panel';
panel.setAttribute('aria-hidden', 'true');
const header = document.createElement('div');
header.className = 'chat-header';
header.innerHTML = `<span>Chatbot</span>`;
const closeBtn = document.createElement('button');
closeBtn.className = 'chat-close';
closeBtn.textContent = '✕';
closeBtn.setAttribute('aria-label', 'Close chat');
closeBtn.addEventListener('click', () => {
panel.classList.remove('open');
panel.setAttribute('aria-hidden', 'true');
});
const iframe = document.createElement('iframe');
iframe.className = 'chat-iframe';
iframe.src = 'https://openai-chatkit-starter-app-blue.vercel.app';
iframe.allow = 'clipboard-write; microphone; camera';
iframe.referrerPolicy = 'strict-origin-when-cross-origin';
header.appendChild(closeBtn);
panel.appendChild(header);
panel.appendChild(iframe);
document.body.appendChild(fab);
document.body.appendChild(panel);
fab.addEventListener('click', () => {
panel.classList.add('open');
panel.setAttribute('aria-hidden', 'false');
});
});
</script>
<!-- End Chatbot Embed -->J’ai pris le code ci-dessus et modifié manuellement le fichier index.html dans mon référentiel qui a été créé par Lovable lors de la génération de ma page Web d’origine. J’ai inséré le code d’intégration ci-dessus dans le <head> section de mon fichier index.html et enregistré le contenu du fichier. Après cela, j’ai redéployé le dépôt sur mon charmant domaine et vous pouvez voir les résultats ci-dessous. Comme prévu, une petite icône de bulle de dialogue a été créée dans le coin inférieur droit de la page, et lorsque j’ai cliqué dessus, l’écran de dialogue Chatbot est apparu et j’ai pu interagir avec lui.
Aimable ( https://little-react-wave.lovable.app/ )
J’ai fait une opération similaire sur ma page web sur HuggingFace. Vous pouvez modifier le fichier index.html sur votre site HF en cliquant sur le bouton Fichiers sur votre espace, puis en cliquant sur le lien du fichier index.html qui s’affiche.
J’ai ajouté le même code d’intégration à mon fichier HF index.html qu’avec adorable, et après avoir validé les modifications, ma nouvelle page Web est apparue comme suit, avec la même icône et la même capacité Chatbot.
Visage câlin ( https://huggingface.co/spaces/taupirho/chatkit )
Pas trop mal !
You may also like
