Deploy an OpenAI Agent Builder Chatbot to a Website – Towards Data Science
Publish AI, ML & data-science insights to a global community of data professionals.
Using OpenAI’s Agent Builder ChatKit
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.
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.
There are several prerequisites, but most of them are free to set up.
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.
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,
Lovable 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.
The URL link to your HF website will be something like:
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.
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.
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.
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.
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.
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.
And GPT’s response was this.
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!
Written By
Share This Article
Towards Data Science is a community publication. Submit your insights to reach our global audience and earn through the TDS Author Payment Program.
A human-centric guide to AI automation for product managers.
Stop guessing your statistical test. Let this AI do it for you.
Automating model tuning in Python with Gemini, LangGraph, and Streamlit for regression and classification improvements
Built over 14 days, all locally run, no API keys, cloud services, or subscription fees.
Tool masking for AI improves AI agents: shape MCP tool surfaces to cut tokens and…
How timeouts, truncation, and result sanitization keep Cypher outputs LLM-ready
Learn how to build production ready systems using AI agents
Your home for data science and Al. The world’s leading publication for data science, data analytics, data engineering, machine learning, and artificial intelligence professionals.
