All we had were fleeting glances of screens and code, and there was no real explanation of how to integrate an agent built with Agent Builder into your own or your business’s website or application.
This is where OpenAI’s other agent builder tool, Chatkit, is supposed to come in. It is just as important 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 might think, I’ll head over and read OpenAI’s documentation on ChatKit. Well, good luck to you. Apart from being poorly written, it requires a considerable amount of programming knowledge and an understanding of GitHub and various other technical processes.
In the remainder of this article, I’ll outline the exact process, step by step, for deploying an agent built using OpenAI’s Agent Builder onto a publicly accessible website.
What we’ll do
This article will be your “missing manual” for Agent Builder deployment. We’ll first create two simple websites, 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 will then deploy it to our new Lovable and HF websites using the Agent Builder ChatKit.
What you’ll need
There are several prerequisites, but most of them are free to set up.
- 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 need to take, but none are complicated. Take your time and follow the steps methodically, and you’ll be fine.
Step 1 — Create our test websites
If you already have a website and you can edit/change the code behind it, feel free to use this.
Otherwise, you can use a tool like lovable.dev, which can not only create a website for you but can also deploy it to the web using one of its own domains or a custom domain that you provide.
Note that the lovable link above is an affiliate link, which means if you sign up to a paid plan using it, I get a small commission.
Here was my prompt to Lovable,
I want a simple "Hello world" type javascript, css, html react pageLovable took around 15 seconds to produce a website, and I deployed it using one of Lovable’s own example domains. Here is what it produced. I’ll put a link to the website at the end of the article.
For those on a tight budget, a free option for creating a webpage is to use HuggingFace (HF) Spaces. Here’s how to do that.
- Create an HF account and log in.
- Click the Spaces link at the top of the home page, then click the New Space button, also towards the top right of the page.
- Fill in the space’s name, choose a licence type, and select ‘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 bottom of the screen when you’re ready. You should see a screen like this appear,
The URL link to your HF website will be something like:
https://huggingface.co/spaces/{Your_HF_username}/{your_HF_space_name}At this point, you should have at least one publicly available website that you can modify to integrate an Agent Builder agent with. But first, we need an agent.
Step 2 — Create an OpenAI Agent Builder Chatbot agent
I won’t spend too much on this step, as there are plenty of tutorials and demos available online on how to do it. Additionally, the OpenAI team covered this part very well at their developer day.
However, my agent builder is as simple as it gets. It will be a straightforward chatbot containing just two nodes: a start node and an agent node. In fact, that is the default setup you get if you click the Create button on the agent builder home page. The only other change I made to the agent node was to select GPT5-nano as my agent LLM, and I updated the agent instructions to this:
You are a helpful assistant. Tell the user an interesting fact about the proposed subject, then tell a “dad joke” about 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 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!To create your own agent, head over to https://platform.openai.com/agent-builder. Depending on what LLM model you choose to use for your agent, you may also need to pass an identification check before you can run any agents, so bear that in mind.
NB: Take note of the project name you used when creating your agent. It’s located near the top left of the Agent Builder home screen. We’ll need this when creating our OpenAI API key, as the project under which the API key is made must match the project in which your agent is built. I was working on all my tasks under the Default project.
Click the Preview button at the top right of the page to ensure that your agent is working as expected. When you’re satisfied, click the Publish button, located near the top right of the page. Fill in the name of your agent and click the Publish button again. When you do this, a pop-up will appear like this:
You’ll need the workflow ID later, so please take note of it now. Also, notice the Clone sample app link near the bottom of the pop-up. We’ll use that in the next step.
Step 3 — Fork OpenAI’s sample ChatKit app to your own GitHub repo
To help with deploying agents using ChatKit, OpenAI provides some example starter kit code in a GitHub repository. We need to fork that app (i.e copy it) to our own GitHub repo and deploy it to the web.
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 in the pop-up from Step 2. This will take you to the appropriate OpenAI GitHub page. Now, click the Fork button on the repo. It’s just above and to the right of the green Code button.
You’ll be prompted to enter a name for your new repository, if you’d like, or you can leave it as 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 don’t already have one. It’s free to set up and use for the limited example we’ll be showing here. Head over to https://vercel.com and create your account now.
Once you’re logged in, go to the dashboard and click the Add New->Project button to start a new project. You can find the link to the dashboard underneath your user profile icon at the extreme top left of the page.
The first time around, you’ll need to authorise Vercel access rights to your GitHub account, so click the Continue with GitHub button. You’ll then be asked to authorise Vercel. Choose to allow Vercel access to all your repos or just an individual repo. Once that’s completed, you’ll be able to import your GitHub repository into Vercel. After the import is complete, the final stage is deployment. However, before you proceed, you need to add a couple of environment variables. The link to do this is just above the deploy button.
The environment variables you need to add are:
OPENAI_API_KEY — This must be an API key created within 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 — This is the ID of the workflow you created in Agent Builder, which starts with wf_…
After that, you can click the Deploy button on Vercel. This will take a minute or two, but once it’s finished, we can test our chatbot. Once the deployment is complete, return to your Vercel dashboard. Ensure you’re on the correct project, and you should see a button labelled Visit, which will take you to your ChatBot. Before we click on it, we have one more thing to do. We must let OpenAI know the domain of our chatbot app on Vercel for security reasons.
Copy the Vercel domain URL for your project and return to your OpenAI agent builder project.
Next, click the Code button near the top 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 field, and then click the “Generate Key” button.
Now, back on Vercel, click the “Visit” button to test your chat app. This is what mine looked like.
Step 5—Modify our original Lovable and HuggingFace websites to incorporate the new chatbot.
This is our final step, which involves generating embed code that we can 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 need to inject.
You can get the domain URL of your chatbot from the Vercel dashboard.
Here is my ChatGPT conversation. Replace my domain URL with your own.
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 websiteAnd GPT’s response was this.
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 -->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 <head> section of my index.html file and saved the file contents. After that, I redeployed the repo to my lovely domain, and you can see the results below. As expected, a little speech bubble icon was created in the bottom right-hand corner of the page, and when I clicked on this, the Chatbot dialogue screen appeared, and I was able to interact with it.
Lovable ( https://little-react-wave.lovable.app/ )
I did a similar operation on my web page on HuggingFace. You can edit the index.html file on your HF website by clicking the Files link on your space, then clicking the index.html file link that’s displayed.
I added the same embed code to my HF index.html file as I did with lovable, and after committing the changes, my new web page appeared as follows, with the same Chatbot icon and capability.
Hugging Face ( https://huggingface.co/spaces/taupirho/chatkit )
Not too shabby!
