One of the simplest and most popular types of AI-powered applications right now is the ChatGPT wrapper. These act as a slick interface between users and the OpenAI API. Think of tools like AI-powered translators, grammar checkers, coding assistants, or even writing style editors. They’re all basically smart UIs that wrap around ChatGPT’s capabilities.
So, what exactly is a “wrapper” in this context?
It’s a lightweight client-side shell (often a single-page app) that handles API calls to OpenAI’s endpoints. Typically, the frontend uses fetch() or axios to send a POST request to https://api.openai.com/v1/chat/completions with a prompt, and renders the response into the DOM. Everything happens in the browser.
Here’s the cool part: now you don’t need to spin up a Node.js server or deploy anything on AWS just to proxy requests or store user data. With tools like Skapi, you can handle authentication, secure API keys, and user management entirely on the frontend. No backend!
In this article, we’ll show you exactly how easy it is to build a ChatGPT wrapper using just HTML, CSS, and Skapi. By the end, you’ll have a fully working, serverless AI Chat Box app you can deploy anywhere.
What You’ll Need to Get Started
-
An OpenAI+ Account (a.k.a. Your Gateway to the APIverse)
First, head over to https://platform.openai.com.
Go to your User API Keys section, create a new secret key, give it any name you like (e.g., OpenAI), and copy it – you’ll need this in the next step. -
A Skapi Account (Our No-Backend Backend)
Now jump into Skapi and sign up (if you haven’t already).
-Create a new service
-Go to the Client Secret Key section
-Click Add Key, put the name of your key, and paste your OpenAI secret key into the value field and save it.
It’s Coding Time
To build this wrapper app, you’ll need just two files: index.html and styles.css.
We’re not diving into CSS in this tutorial, so feel free to grab the styles directly from our GitHub repo – copy, paste, done.
As for the HTML structure and step-by-step walkthrough, check out our full YouTube tutorial. In the video, we cover: how to set up and use Live Server, how to build the HTML containers and forms for your ChatGPT-style UI, how to wire up user input/output for a seamless chat experience, build error functions, console log, and more.
But for this article, we’ll skip the basics and jump straight into the fun part of plugging in your backend, without actually writing one, using Skapi.
1.First, we need to grab our Skapi credentials.
Head over to your Skapi dashboard, open your service, and go to the Getting Started page. There, copy your User ID and Service ID.
Now, let’s paste those into the of your HTML file to initialize Skapi.
Next, we’ll define a constant to access the user input from our chat form.
<script src="https://cdn.jsdelivr.net/npm/skapi-js@latest/dist/skapi.js"></script>
<script>
const skapi = new Skapi('service_id', 'owner_id');
</script>
2.Now let’s connect to the OpenAI API.
To do this, we’ll use Skapi’s clientSecretRequest() method, which lets us securely call external APIs using credentials stored in Skapi and avoiding sharing our credentials in the frontend code.
The first parameter you need to set is the client_secret_name. This should match the name you used when saving your OpenAI secret key in Skapi. For example, if you saved it as „OpenAI“, that’s the name you’ll use here – but it can be anything, as long as it matches what’s in your Client Secret Key section.
We also need to specify the URL for the OpenAI Chat Completions endpoint. You can find this by going to platform.openai.com, navigating to Documentation → API Reference → Chat → Getting started, and selecting the ‘curl’ option — this shows you the format we’ll be using.
We’ll copy the URL from there (typically: https://api.openai.com/v1/chat/completions) and use it in our request.
skapi.clientSecretRequest(
{
clientSecretName: 'openai',
url: 'https://api.openai.com/v1/chat/completions',
3.We also need to add the method.
It should be POST – and then add the headers. We’ll need two headers, which you can copy directly from the OpenAI docs. Normally, to authorization you would paste your OpenAI API key, but since we’re using the Skapi method, we just need to substitute it with the dollar sign $CLIENT_SECRET, and then Skapi will automatically substitute this with your secret key that you’ve saved in your Skapi Dashboard.
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer $CLIENT_SECRET'
},
4.And we also need to add the data.
In this case, we first need to define the model – let’s use GPT-4. We also need to define the messages, and here we need two parts. First, we define the role as ‘system’, and this is where we’re going to put our prompt. You can use your own prompt to create any type of chatbox.
data:{
model:'gpt-4',
messages: [
{
role: 'system',
content: `I am a ${user}. You are a ${partner}. We are a couple and we are in love. Always reply in a lovely and cute way.`
},
{
role: 'user',
content: document.getElementById('chat-input') // user’s chat input
}
And that’s how we connected our app to the OpenAI API.
Results
Now you can test everything – you’ve got a fully working chatbox that talks to OpenAI, responds to your messages, and even lets you define who you are and who (or what) you’re chatting with (if you went through all the writing code steps from our YouTube video). The chatbox includes autoscroll, so it always keeps the latest messages in view, and it also clears the chat when you want to start a new conversation with a different „personality“ or context.
You’ve just built a real AI Chatbot, using nothing but frontend code and a little Skapi magic. No backend. No API key exposure. No server deployment. This is how building apps should look like in 2025.
Drop a comment below and let us know what kind of chatbot you created using this tutorial. Was it helpful? Got feature ideas? We want to hear it all.
Follow us on socials: X, YouTube, LinkedIn. More tutorials, code drops, and dev hacks are coming soon.