AI has taken the world by storm over the past 18 months with many people utilising it in many ways. One of the most popular ways of interacting with AI is using ChatGPT. Like most modern software OpenAI’s ChatGPT offers a free tier as well as their subscription called ChatGPT Plus which offers more features and a selection of Large Language Models.

A friend of mine has been using ChatGPT Plus. Key reasons he was paying for the Plus subscription was to ensure he had access to it whenever he needed which is something that is not guaranteed on the free tier. However at $20 a month he is questioning if he used it enough to warrant paying the monthly subscription cost. He said if the cost was lower he would be happy to continue paying for it. I had to agree with him as a casual user myself I could never justify that expense. This is when I went to explore the option of building a ChatGPT Plus like experience at a lower cost.

How did I do this

To grant ourselves access to our very own ChatGPT like experience we are going to use 2 tools:

• Open WebUI
• OpenAI API.

Sign up to OpenAI and generate an API Key

If you have not done so already create an account at https://platform.openai.com/. Once you’ve done this navigate to the API Key Page. There is a bizarre restriction which means you need to enter a mobile phone number before you can generate your first API Key. As this is only used one time, I purchased a sim card at the supermarket and registered that number against the account. Feel free to use your own personal phone number if you wish. Once this is done generate an API Key.

You need to go and add credit to your account to actually be able to use the API. To do this navigate to the billing page and add some credit to your account. I decided on just adding the minimum to my account which is $5 + VAT.

You now have an account and access to OpenAI’s API.

Set up Open WebUI

There are a number of ways to set up Open WebUI but the recommended process is using Docker so before you go any further ensure you have got this set up. Once that has been completed run the command below. Make sure you’re replacing <your_generated_api_key> with your OpenAI API key that you have generated.

docker run -d -p 3000:8080 -e OPENAI_API_KEY=<your_generated_api_key> -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

Start prompting

Navigate to http://localhost:3000 in your web browser. Create an account, login, select a model of your choice in the dropdown at the top left of the page and start using it as you would with ChatGPT. At the time of writing the gpt-4o-mini model is OpenAI’s most cost effective model.

How does it compare

Cost

I created the prompt “Can you give me the number of workdays between December and April. I do not work weekends or UK bank holidays.” using the gpt-4o model and that costs approximately $0.01. You would have to put 2000 equivalent requests within a month to break even with the ChatGPT Plus subscription cost. If you put the same request through gpt-4o-mini it costs $0.0005 which means you would need to put 40000000 equivalent requests to break even.

If you’re heavy user you may exceed the 2000 requests but if you’re a casual user such as myself then the API proves to be considerably better value than ChatGPT Plus. I would be surprised if many exceed the gpt-4o-mini break even cost.

Convenience

ChatGPT Plus wins here but as you can see it does not take an awful lot of effort to get this up and running. Personally for me the small convenience sacrifice pays off considerably in terms of fiscal savings for the casual user.

Quality of response

My friend still had access to his ChatGPT Plus subscription so we have done some comparisons to check the quality of the responses from the API against the responses from ChatGPT Plus. All responses below were ran against the gpt-4o model.

• What are 5 creative things I could do with my kids’ art? I don’t want to throw them away, but it’s also so much clutter.

  ChatGPT Plus Response

  Finding creative ways to preserve and display your kids’ art can be a wonderful way to honor their creativity while managing clutter. Here are five ideas:

  1. Create a Rotating Gallery: Designate a space in your home, like a wall or a bulletin board, as a rotating gallery for your kids’ artwork. You can frame a few pieces or use clipboards, wire with clips, or magnetic strips to easily change the display. This way, the art can be regularly updated, and older pieces can be stored or used in other projects.

  2. Make a Digital Archive and Photo Book: Scan or photograph your children’s artwork and create a digital archive. You can use these images to make a photo book, which is a compact and organized way to keep the art accessible. Many online services allow you to customize and print these books, making them a wonderful keepsake.

  3. Create Art Collages or Murals: Take pieces of their artwork and cut out favorite sections or elements to create a large collage or mural. This can be a fun project for the whole family and a unique way to blend different pieces into one large, cohesive artwork.

  4. Turn Art into Gifts or Home Décor: Transform their art into gifts or home décor items. You can print their drawings on mugs, t-shirts, cushions, or even create custom puzzles. These make great personalized gifts for family members or unique decorative items for your home.

  5. Make an Art Book or Portfolio: Create a special art book or portfolio for each child where you can store and organize their artwork. This helps in reducing clutter and makes it easy to look back on their creative growth over the years. You can categorize the pieces by date or theme and add notes or stories about each piece.

  These ideas can help you cherish your children’s artistic expressions while keeping your home organized and clutter-free.

  OpenAI API Response

  Absolutely, finding creative ways to preserve and showcase your kids’ artwork can be both fun and practical. Here are five ideas:

  1. Create a Rotating Gallery: Dedicate a wall or a section of a wall in your home to be a gallery for your kids’ artwork. Use frames, clipboards, or a wire with clothespins to create a rotating display. You can change the displayed pieces every few weeks or months, giving each piece its moment to shine without overwhelming your space.

  2. Make a Photo Book: Scan or photograph the artwork and create a professional-looking photo book. There are many online services that allow you to design custom photo books. This way, you can keep the original works stored safely while enjoying the collection in a compact, accessible form.

  3. Turn Art into Gifts: Use the artwork to create personalized gifts for family members. Some ideas include:

     • Printing their art on mugs, t-shirts, or tote bags.
     • Using the drawings to create custom calendars or greeting cards.
     • Making a set of coasters with their art laminated or encased in resin.

  4. Create a Digital Slideshow: Digitize the artwork and set up a digital photo frame or a smart display in your home to show a continuous slideshow of the art. It will free up physical space while still celebrating your child’s creativity.

  5. Make Collages or Scrapbooks: Combine several pieces of artwork into a larger collage or scrapbook. This can be a seasonal activity where you make collages that reflect the art produced over a certain period. Kids can get involved in the process, helping to cut, arrange, and glue their works, which makes it a fun and engaging family project.

  These creative ideas can help you manage the clutter while still cherishing and celebrating the special art your kids create.

• Tell me a random fun fact about the Roman Empire

  ChatGPT Plus Response

  The Roman Empire was known for its impressive engineering feats, including the construction of a vast network of roads. One fun fact is that the saying “All roads lead to Rome” originates from the Roman Empire’s extensive road system. By the peak of the empire, this network spanned over 400,000 kilometers (approximately 250,000 miles), with around 80,000 kilometers (about 50,000 miles) of paved roads. These roads were crucial for the movement of troops, trade, and communication across the vast territories of the empire.
  OpenAI API Response

  Sure! Did you know that the Romans had a highly advanced form of concrete that was incredibly durable? One of the key ingredients they used was volcanic ash, which allowed the concrete to set underwater and contributed to the longevity of many Roman structures. This special mix made their piers, aqueducts, and buildings remarkably resilient, many of which still stand today. This ancient recipe has even been studied by modern engineers to improve contemporary construction materials!

• Show me a code snippet of a website’s sticky header in CSS and JavaScript.

  ChatGPT Plus Response

  To create a sticky header for a website, you can use a combination of CSS and JavaScript. Here’s a basic example: HTML

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sticky Header Example</title>
      <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <header id="header">
          <nav>
              <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">Services</a></li>
                  <li><a href="#">Contact</a></li>
              </ul>
          </nav>
      </header>
      <main>
          <section>
              <h1>Welcome to Our Website</h1>
              <p>Content goes here...</p>
          </section>
      </main>
      <script src="script.js"></script>
  </body>
  </html>
  

  CSS (styles.css)

  body, html {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
  }
  
  header {
      background-color: #333;
      color: white;
      padding: 10px 0;
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 1000;
      transition: background-color 0.3s ease;
  }
  
  header.sticky {
      background-color: #000;
  }
  
  header nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
  }
  
  header nav ul li {
      margin: 0 15px;
  }
  
  header nav ul li a {
      color: white;
      text-decoration: none;
      font-size: 16px;
  }
  
  main {
      margin-top: 70px; /* To avoid content overlap with the sticky header */
      padding: 20px;
  }
  

  JavaScript (script.js)

  Copy code
  window.addEventListener('scroll', function() {
      var header = document.getElementById('header');
      var sticky = header.offsetTop;
  
      if (window.pageYOffset > sticky) {
          header.classList.add('sticky');
      } else {
          header.classList.remove('sticky');
      }
  });
  

  Explanation

  1. HTML Structure: A basic structure with a header and main content.
  2. CSS:

  • header is styled to be fixed at the top of the page with a dark background.
  • .sticky class changes the background color of the header when it becomes sticky.
  • main has a top margin to prevent content from being hidden under the header.

  3. JavaScript:

  • The script adds a sticky class to the header when the user scrolls past the header’s initial position.
  • This script listens to the scroll event and checks the page’s Y offset.
  OpenAI API Response

  Certainly! Below is a basic example of how to create a sticky header using HTML, CSS, and JavaScript.

  HTML

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sticky Header</title>
  <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  <header id="header">
    <h1>Sticky Header</h1>
  </header>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <!-- Repeat the paragraph or add more content to create a scrollable page -->
  </main>
  <script src="scripts.js"></script>
  </body>
  </html>
  

  CSS (styles.css)

  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  
  header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    position: sticky; /* CSS `position: sticky` makes the header sticky */
    top: 0;           /* The header sticks to the top */
    width: 100%;
    z-index: 1000;    /* Ensures the header is above other content */
    transition: top 0.3s;
  }
  
  main {
    padding: 20px;
  }
  
  p {
    padding: 20px 0;
  }
  

  JavaScript (scripts.js)

  No JS is strictly required for a sticky header, but you might want to add some JS for additional functionality, such as hiding the header on scroll down and showing it on scroll up. Here’s an example:

  document.addEventListener("DOMContentLoaded", function() {
    var header = document.getElementById("header");
    var lastScrollY = window.scrollY;
  
    window.addEventListener("scroll", function() {
      if (window.scrollY > lastScrollY) {
        // Scrolling down, hide the header
        header.style.top = "-60px"; // Adjust the value to match the header height
      } else {
        // Scrolling up, show the header
        header.style.top = "0";
      }
      lastScrollY = window.scrollY;
    });
  });
  

  Explanation:

  1. HTML: Defines the structure with a header and main content.
  2. CSS:
     • position: sticky with top: 0 makes the header stick to the top of the page.
     • z-index: 1000 ensures the header stays above other content.
  3. JavaScript: Adds interactivity to hide the header when scrolling down and show it when scrolling up, using the scroll event listener and comparing the current scroll position with the previous one.

  This is a very basic example. Depending on your project needs, you might have to make additional adjustments.

As you can see whilst the responses are not the same, the responses are of a similar quality. If I did not label which system the output came out of I think you would probably struggle to determine which system produced it.

Conclusion

As you can see with very little effort I was able to implement a subscription-free, cost effective ChatGPT Plus alternative using the OpenAI API and Open WebUI. In an ideal world you would run the Open WebUI software on a server that only you had access to which I have done.

Whilst Open WebUI is a quality piece of software there are plenty of alternatives you could leverage to get a similar experience. The OpenAI API is doing the heavy lifting of answering your prompts whilst Open WebUI is providing you with a good interface to interact with it.