day was dominated by its latest Agentic workflow product, Agent Builder. It means that you can craft agentic processes via a simple-to-use graphical user interface. It quite rightly garnered many of the attention, but the opposite side of their workflow process — deployment — received less attention.
All we had were fleeting glances of screens and code, and there was no real explanation of how one can integrate an agent built with Agent Builder into your individual or your small business’s website or application.
That is where OpenAI’s other agent builder tool, Chatkit, is speculated to are available in. It’s just as essential a product as their Agent builder — arguably more so.
Why? That’s because ChatKit is used to deploy any agentic process you create using the Agent builder into real-world web apps and pages.
No worries, you would possibly think, I’ll head over and browse OpenAI’s documentation on ChatKit. Well, good luck to you. Aside from being poorly written, it requires a substantial amount of programming knowledge and an understanding of GitHub and various other technical processes.
In the rest of this text, I’ll outline the precise process, step-by-step, for deploying an agent built using OpenAI’s Agent Builder onto a publicly accessible website.
What we’ll do
This text can be your “missing manual” for Agent Builder deployment. We’ll first create two easy web sites, one using Lovable and one using HuggingFace (HF) spaces and deploy them to the World Wide Web.
After that, we’ll develop a chatbot agent using OpenAI’s Agent Builder. We’ll then deploy it to our latest Lovable and HF web sites using the Agent Builder ChatKit.
What you’ll need
There are several prerequisites, but most of them are free to establish.
- An OpenAI account and API key (Paid plan)
- A Vercel account (Free)
- A HuggingFace account (Free)
- A test website (FREE and/or paid)
ChatKit deployment
There are several steps we’d like to take, but none are complicated. Take your time and follow the steps methodically, and also you’ll be nice.
Step 1 — Create our test web sites
When you have already got a web site and you may edit/change the code behind it, be at liberty to make use of this.
Otherwise, you should utilize a tool like lovable.dev, which may not only create a web site for you but can even deploy it to the online using one among its own domains or a custom domain that you just provide.
Note that the lovable link above is an affiliate link, which implies if you happen to enroll to a paid plan using it, I get a small commission.
Here was my prompt to Lovable,
I would like an easy "Hello world" type javascript, css, html react pageLovable took around 15 seconds to supply a web site, and I deployed it using one among Lovable’s own example domains. Here’s what it produced. I’ll put a link to the web site at the tip of the article.
For those on a decent budget, a free option for making a webpage is to make use of HuggingFace (HF) Spaces. Here’s how one can try this.
- Create an HF account and log in.
- Click the Spaces link at the highest of the house page, then click the Latest Space button, also towards the highest right of the page.
- Fill within the space’s name, select a licence type, and choose ‘Static’ for the SDK, ‘Blank’ for the Template, ‘CPU Basic’ for the hardware, and ‘Public’ for the scope.
- Click on the Create Space button at the underside of the screen once you’re ready. It is best to see a screen like this appear,
The URL link to your HF website can be something like:
https://huggingface.co/spaces/{Your_HF_username}/{your_HF_space_name}At this point, you must have a minimum of one publicly available website you could modify to integrate an Agent Builder agent with. But first, we’d like an agent.
Step 2 — Create an OpenAI Agent Builder Chatbot agent
I won’t spend an excessive amount of on this step, as there are many tutorials and demos available online on how one can do it. Moreover, the OpenAI team covered this part thoroughly at their developer day.
Nevertheless, my agent builder is so simple as it gets. It would be an easy chatbot containing just two nodes: a start node and an agent node. In truth, that’s the default setup you get if you happen to click the Create button on the agent builder home page. The one other change I made to the agent node was to pick out GPT5-nano as my agent LLM, and I updated the agent instructions to this:
You might be a helpful assistant. Tell the user an interesting fact in regards to the proposed subject, then tell a “dad joke” in regards to the subject
Here is an example of the 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 as much as ~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 within the shade? Because he didn't need to
be a hot dog!To create your individual agent, head over to https://platform.openai.com/agent-builder. Depending on what LLM model you select to make use of to your agent, chances are you’ll also have to pass an identification check before you may run any agents, so bear that in mind.
NB: Pay attention to the project name you used when creating your agent. It’s positioned near the highest left of the Agent Builder home screen. We’ll need this when creating our OpenAI API key, because the project under which the API secret’s made must match the project during which your agent is built. I used to be working on all my tasks under the Default project.
Click the Preview button at the highest right of the page to make sure that your agent is working as expected. If you’re satisfied, click the Publish button, positioned near the highest right of the page. Fill within the name of your agent and click on the Publish button again. If you do that, a pop-up will seem like this:
You’ll need the workflow ID later, so please be aware of it now. Also, notice the Clone sample app link near the underside of the pop-up. We’ll use that in the subsequent step.
Step 3 — Fork OpenAI’s sample ChatKit app to your individual GitHub repo
To assist with deploying agents using ChatKit, OpenAI provides some example starter kit code in a GitHub repository. We’d like to fork that app (i.e copy it) to our own GitHub repo and deploy it to the online.
For the deployment stage, we’ll use Vercel. Vercel is a cloud platform for deploying and hosting web applications.
To fork the OpenAI app, use the Clone Sample app link within the pop-up from Step 2. This may take you to the suitable OpenAI GitHub page. Now, click the Fork button on the repo. It’s just above and to the best of the green Code button.
You’ll be prompted to enter a reputation to your latest repository, if you happen to’d like, or you may leave it because the default.
Step 4 — Deploy your fork of OpenAI’s sample ChatKit app to Vercel
For this step, you’ll need a Vercel account if you happen to don’t have already got one. It’s free to establish and use for the limited example we’ll be showing here. Head over to https://vercel.com and create your account now.
When you’re logged in, go to the dashboard and click on the Add Latest->Project button to start out a brand new project. You could find the link to the dashboard underneath your user profile icon at the intense top left of the page.
The primary time around, you’ll have to authorise Vercel access rights to your GitHub account, so click the Proceed with GitHub button. You’ll then be asked to authorise Vercel. Decide to allow Vercel access to all of your repos or simply a person repo. Once that’s accomplished, you’ll have the opportunity to import your GitHub repository into Vercel. After the import is complete, the ultimate stage is deployment. Nevertheless, before you proceed, that you must add a few environment variables. The link to do that is just above the deploy button.
The environment variables that you must add are:
OPENAI_API_KEY — This have to be an API key created inside the same project as your Agent Builder. To get your API key, head over to
https://platform.openai.com/api-keys
Create or reuse an API key, ensuring the Project Name matches the one from the Agent Builder.
NEXT_PUBLIC_CHATKIT_WORKFLOW_ID — That is the ID of the workflow you created in Agent Builder, which starts with wf_…
After that, you may click the Deploy button on Vercel. This may take a minute or two, but once it’s finished, we are able to test our chatbot. Once the deployment is complete, return to your Vercel dashboard. Make sure you’re on the proper project, and you must see a button labelled Visit, which can take you to your ChatBot. Before we click on it, we now have another thing to do. We must let OpenAI know the domain of our chatbot app on Vercel for security reasons.
Copy the Vercel URL to your project and return to your OpenAI agent builder project.
Next, click the Code button near the highest right of the screen to display the Chatkit details pop-up. Click the “Add Domain” button. On the mini popup screen that appears, enter the Vercel domain URL into the sector, after which click the “Generate Key” button.
Now, back on Vercel, click the “Visit” button to check your chat app. That is what mine looked like.
Step 5—Modify our original Lovable and HuggingFace web sites to include the brand new chatbot.
That is our final step, which involves generating embed code that we are able to insert in our own web pages. We achieve this by modifying the index.html file of our web application. I got ChatGPT to create the code we’d like to inject.
You possibly can get the domain URL of your chatbot from the Vercel dashboard.
Here is my ChatGPT conversation. Replace my domain URL together with your own.
That is the domain URL of my chatbot: openai-chatkit-starter-app-blue.vercel.app
I would like some deployment code to go in my website's index.html page within the
HEAD section that can enable me to run the chatbot on my websiteAnd GPT’s response was this.
Perfect 👌 - since your chatbot is hosted at
https://openai-chatkit-starter-app-blue.vercel.app
the cleanest option to embed it in your website is to make use of an I took the above code and manually edited the index.html file in my repository that was created by Lovable when it generated my original web page. I inserted the above embed code into the section of my index.html file and saved the file contents. After that, I redeployed the repo to my lovely domain, and you may see the outcomes below. As expected, a bit of speech bubble icon was created in the underside right-hand corner of the page, and after I clicked on this, the Chatbot dialogue screen appeared, and I used to be capable of interact with it.
Lovable ( https://little-react-wave.lovable.app/ )
I did an analogous operation on my web page on HuggingFace. You possibly can edit the index.html file in your HF website by clicking the Files link in your space, then clicking the index.html file link that’s displayed.
I added the identical embed code to my HF index.html file as I did with lovable, and after committing the changes, my latest web page appeared as follows, with the identical Chatbot icon and capability.
Hugging Face ( https://huggingface.co/spaces/taupirho/chatkit )
Not too shabby!
