How to create an AI content generator using the best Firebase alternative

In this tutorial, we’ll walk through how to build a powerful AI image generator web application using only frontend code and Skapi. No setup, no custom backend, no server deployment - the best alternative to Firebase and Supabase.

With this project, a user can generate stunning AI-generated artworks by simply entering a custom prompt and selecting an artist style of their choice, such as Van Gogh, Picasso, Frida Kahlo, or any other artist style you like.

We’ll use JavaScript, HTML, CSS and Skapi’s secure backend-as-a-service to handle user authentication and image generation requests.

If you're looking for a step-by-step walkthrough of how to build the full web app, check out our detailed video tutorial. It covers everything from setting up a label combinator, building a form that triggers image generation, running a live server in VS Code, logging responses to the console, and more.

To build the wrapper app, all you need are two files: index.html and styles.css, both available in this GitHub repo.

Now let’s go deeper into how to seamlessly connect a backend service to your frontend using Skapi, no server code and setup required.

What You’ll Need to Get Started

An OpenAI+ Account

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

Now jump into Skapi and sign up.
-Create a new service (there’s a free trial version with all the functions you need for prototyping)
-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.

Step-by-Step Breakdown

1.First, let’s grab our service ID and owner’s ID of our service.

Jump into your Skapi dashboard, open your service, and navigate to the Getting Started section. Copy both your Owner’s ID and Service ID - these are essential for initializing Skapi in your frontend.

Now, in your index.html, drop those key values into your script to initialize the Skapi client.

<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 it’s time to connect our app to the OpenAI API.

To keep things secure and serverless, we’ll use Skapi’s clientSecretRequest() method. This allows us to make authenticated requests to external APIs (like OpenAI) without exposing any secret keys in the frontend.

The first parameter is client_secret_name, which should match the alias you gave your OpenAI API key when saving it in Skapi’s Client Secret Keys section. For example, if you saved it as "openai", that’s what you’ll reference here - but any name will work as long as it matches.

Next, we’ll define the target API endpoint. Head to platform.openai.com, go to Documentation → API Reference → Chat → Getting started, and select the curl tab to view the request structure.

From there, copy the Chat Generations endpoint URL, typically:
https://api.openai.com/v1/chat/generations

and use it in your Skapi request.

skapi.clientSecretRequest(
  {
    clientSecretName: 'openai',
    url: 'https://api.openai.com/v1/images/generations',
    ...
  }
)

3.Next, let’s configure the HTTP method and headers for our request.

Set the method to POST, since we’re sending data to the OpenAI Chat Generations endpoint. For the headers, you’ll need two key-value pairs, both of which you can reference directly from the OpenAI API docs.

Normally, the Authorization header would include your actual OpenAI API key. But since we’re using clientSecretRequest() via Skapi, we’ll substitute it with the placeholder $CLIENT_SECRET. Skapi will automatically inject the correct secret key (the one you saved in your Skapi Client Secret Keys) when the request is executed, keeping everything secure and off the frontend.

skapi.clientSecretRequest(
  {
    clientSecretName: 'openai',
    url: 'https://api.openai.com/v1/chat/generations',
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $CLIENT_SECRET'
    },
    ...
  }
)

4.Finally, let’s add the request payload.

This is where we pass in the actual data, including the user’s prompt. To generate an image in a specific artist's style, we’ll dynamically construct the prompt using template strings like this:

skapi.clientSecretRequest(
                {
                    clientSecretName: 'openai',
                    url: 'https://api.openai.com/v1/images/generations',
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Bearer $CLIENT_SECRET'
                    },
                    data:{
                        prompt: `${description} in ${artist} style`,
                        n: 1,
                        size: '256x256'
                    }
                }
)

We’ll define a constant (description), and (artist) to hook into the user’s prompt input and select elements from our AI chat form, so we can pass the input value directly to the image generation logic.

This formats the user’s input (description) with the selected artist style (artist), which we’ll send to the OpenAI model to guide how the image should be created. The resulting prompt tells the model what to generate and how it should look stylistically.

Results

And there you have it - a fully functional, frontend-only AI image generator that securely connects to the OpenAI API without writing a single line of backend code. We used Skapi to handle everything from authentication to secure API proxying, all while keeping our secret keys out of the code.

Unlike Firebase or Supabase, which require backend setup, complex SDKs, or server logic, Skapi gives you full backend functionality: user management, secret key storage, external API requests with zero server maintenance. It’s a game-changer for frontend developers who want to build full-stack apps.

If you liked this case, make sure to follow us on our socials (LinkedIn, Threads, Instagram, X, Facebook) for more tutorials, updates, and creative use cases using Skapi. This is just the beginning - we’re preparing more projects you won’t want to miss.