How to Build an AI-Powered Quote Generator with ChatGPT and Bannerbear (Node.js Tutorial)

Did you know that visual content gets shared 300% more often than plain text? That’s why visuals are such a powerful way to expand a brand's reach organically. And here’s the thing—even if your main content is text, you can still turn it into an image, like a quote graphic or a styled post, and even automate the entire process!

By combining ChatGPT’s text generation with Bannerbear’s visual automation, you can easily build a quote generator that churns out professional-quality visuals at scale, like these:

In this tutorial, we’ll walk you through how to automatically generate meaningful quotes using ChatGPT's API and transform them into stunning visual graphics using Bannerbear. Whether you’re a developer who wants to make content creation more efficient or a business owner looking to automate social media posts, this project will give you a powerful tool that saves time without compromising on quality consistency!

Understanding the Technology Stack

To build our quote generator, we’ll be using APIs from OpenAI and Bannerbear:

• ChatGPT (OpenAI) - Generates motivational quotes.
• DALL·E (OpenAI) - Creates text-free backgrounds that complement the quotes (you can also use a stock image service).
• Bannerbear - Takes the quote, author name, and background image, then merges them into a beautiful branded template.

Here’s an example of a Bannerbear design template:

By passing different data to the API, you can alter the values of the dynamic objects in the template and mass-produce unique but consistently branded visuals.

🐻 Bear Tip: Bannerbear provides APIs and SDKs in multiple languages (Node.js, Ruby, PHP), making it easy to be integrated into any project to automate media creation.

Setting Up Your Environment

Make sure you have the following tools set up:

• Node.js and npm installed on your machine
• An OpenAI platform account with API credits
• A Bannerbear account (sign up for 30 free API credits here!)

We’ll also need API keys from both platforms…

Creating an OpenAI API Key

Visit the OpenAI Platform and navigate to the API section to generate a new API key:

Give the new secret key a name and click “Create secret key” :

Copy the generated secret key and save it somewhere safe:

Creating a Bannerbear API Key

Log in to your Bannerbear account and create a new project. Go into the project page and click “Settings/API Key” on the top right corner:

From there, you will see your project API key. Copy and save it somewhere safe:

Creating a Bannerbear Design Template

Let’s create the design template that defines how every quote image will look. You can create a design template from scratch by clicking “Create a Template” from your project page:

…or start faster by duplicating a pre-made template like this one (click on it to duplicate):

The template contains dynamic objects like quote, author_name, and background_image. The values of these objects can be changed using Bannerbear’s API to generate different quote images:

Once you’ve created your template, click on the three dots at the top right corner to see your template ID. We’ll need it in the code later.

🐻 Bear Tip : For the template design, focus on using typography, colours, and background that support the message without stealing the spotlight.

Building an AI-Powered Quote Generator with ChatGPT + Bannerbear

Step 1. Create a New Node.js Project

Create a new project directory and initialize a new Node.js project in it by running the command below in your terminal/command prompt:

mkdir quote-generator
cd quote-generator
npm init

This creates a package.json file with default settings.

Step 2. Install Required Dependencies

Run the command below to install all the packages that we need for the project:

npm install openai bannerbear dotenv

Then, create a .env file in your project root to store your API keys:

OPENAI_API_KEY=your_openai_api_key_here
BANNERBEAR_API_KEY=your_bannerbear_api_key_here

🐻 Bear Tip: Always store your API keys in a .env file. Never commit them to GitHub or share them in screenshots to keep them safe!

Step 3. Write the Code

Create index.js in your project root. At the top of the file, import the packages, initialize their instances, and set your Bannerbear template ID as a constant:

require('dotenv').config();
const OpenAI = require('openai');
const { Bannerbear } = require('bannerbear');

const TEMPLATE_ID = 'your_template_id';

const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
const bb = new Bannerbear(process.env.BANNERBEAR_API_KEY);

Generating Quotes

Create a function for generating motivational quotes using the OpenAI API:

async function fetchQuotes() {
  const response = await client.responses.create({
    model: 'gpt-5',
    input: `
      Generate 3 motivational quotes from famous people...
      Return it in this JSON format: [{"quote": "...", "author": "..."}]
    `,
  });

  return JSON.parse(response.output_text);
}

The function will return an array containing JSON objects with the quote and the author’s name:

[
	{
		"quote": "...",
		"author": "..."
	},
	{
		"quote": "...",
		"author": "..."
	}
]

Generate Background Images

Create another function and use the DALL·E model to generate the background image:

async function generateBackgroundImage() {
  const response = await client.images.generate({
    model: 'dall-e-3',
    prompt: 'Create a general inspirational quote background image that I can pair with quotes from famous people with no text on it',
    size: '1024x1024',
  });

  return response.data[0].url;
}

The function will return the URL of the generated image.

Generate Quote Images

Next, create the final function that generates the quote image by combining the results from the first two functions using Bannerbear:

async function generateQuoteImage(quote, author, backgroundImg) {
  const result = await bb.create_image(
    TEMPLATE_ID,
    {
      modifications: [
        { name: 'quote', text: quote },
        { name: 'author_name', text: author },
        { name: 'background_image', image_url: backgroundImg },
      ],
    },
    true
  );

  return result.image_url;
}

This sends the quote, author’s name, and background image to Bannerbear to modify the design template, and outputs a final image URL.

Finally, put them together:

(async () => {
  try {
    const quotes = await fetchQuotes();

    for (const { quote, author } of quotes) {
      const backgroundImg = await generateBackgroundImage();
      console.log('Background image:', backgroundImg);

      const finalImage = await generateQuoteImage(quote, author, backgroundImg);
      console.log('Final image:', finalImage);
    }
  } catch (err) {
    console.error('Error generating images:', err);
  }
})();

🐻 Bear Tip: View the full code on GitHub.

Step 4. Test the Code

Run the command below in your terminal/command prompt to execute the script:

node script.js

You’ll see URLs printed in the terminal/command prompt. Paste them into your browser to view them:

You can also check your Bannerbear dashboard for all the generated images:

Next Steps

Now that you’ve got the basics working, here are some ways to level up:

• Cache backgrounds : Pre-generate 10 backgrounds and reuse them across multiple quotes to save credits.
• Batch scheduling : Connect Bannerbear → Buffer (via Zapier/Make) to auto-post weekly.
• Generate for different platforms:  Batch-generate images in different dimensions automatically.
• Multi-language quotes: Create the same posts in various languages.

This simple project shows just how useful API integration can be for automated content creation. Not only that you save a lot of manual effort, maintaining high quality output is effortless!

The same workflow can be applied to other tasks, like creating X posts, planning social media campaigns, or even generating personalised marketing content. If you need more ideas, check out our blog!