.jpeg)
As a YouTube creator, you know that thumbnails can make or break your video's performance.
Eye-catching thumbnails get clicks. While the generic ones blend wth the wall of videos and get sidelined. No matter how good your content is.
But creating great thumbnails eats up hours of your time if you’re DIY-ing inside Canva/Photoshop or money if you’re hiring a designer.
Now, if you’re publishing content weekly (or more), the design challenge adds up fast.
As a brand, we faced the same challenge and decided to build our way out of it.
Introducing our YouTube thumbnail generator that runs atop best-in-class image gen models: Nano Banana 3.0 and GPT-Image Image. Built using WeWeb for the frontend, Gumloop for the AI workflow, and Supabase for securely connecting the two using Edge Functions.
The best part? We’ve already created free templates on both the WeWeb and Gumloop marketplaces so you can build your own YouTube thumbnail generator in <15 mins:
Grab the templates and let's get building!
We built the thumbnail generator app using powerful no-code tools with integrated AI assistants. So, regardless of your coding skills, you can leverage AI and automate your thumbnail generation process with this setup.
WeWeb is an AI-driven no-code web app builder, and for our YouTube thumbnail generator app, it handles:
You can create a free workspace here.
Gumloop is an AI automation platform, and for our use case, it:
Gumloop offers a free tier, but to use its Webhook capabilities for this app, you’ll need to upgrade to a paid plan.
Bonus: The paid tiers offer higher credits if you don’t have Gemini and OpenAI API keys.
Supabase is an open-source backend on top of PostgreSQL. Its edge functions act as secure middleware for this app, allowing us to trigger Gumloop Webhook without exposing API keys in the frontend.
You can create a free Supabase project here.
Here’s how the app works when someone uses the published app today (+ more on how to improve it later, stay tuned!):
The user starts by entering the main hero text. Optionally, they can input a sub-text, select a font, and define the text placement.
The user can pick a background color as per their brand or preference.
The user can upload their channel face to adapt to the reference thumbnail's expression.
The user has the option to pick between GPT-Image or Nano Banana models.
The user uploads a reference YouTube thumbnail for the AI to emulate. Optionally, they can explain details to add, modify, or remove from the reference style.
As the user clicks on the Builder button, the inputs are sent to the Gumloop workflow. After 3-4minutes, Gumloop responds back with the AI-generated thumbnail.
The user can preview and download the thumbnail or regenerate further
We’ve created free templates so you don’t have to start from zero.
Clone the templates below and get building:
Inside the WeWeb project you just cloned, navigate to the “Backend” tab and click “Edit configuration” to connect Supabase:
Click on “Connect Supabase” and Authorize WeWeb AI to manage your Supabase backend:
Lastly, select your project or create a new one directly from WeWeb, and click “Continue”:
Since we’re not storing any data in Supabase tables, we’ll skip adding a collection.
Click anywhere in the UI to proceed further.
Next, switch WeWeb AI to Supabase mode and prompt it to create an Edge Function for securely calling the Gumloop workflow via Webhook:
When copying your Webhook URL from Gumloop, make sure to toggle on the authorization headers:
That way, your API key is not part of the URL parameter, exposing it to the AI.
Enter your private key when prompted by the AI and store it as Secrets in Supabase, like so:
Once done, hit “Deploy”.
You can review the Edge Function directly inside WeWeb under the “API” section in the “Backend” tab:
In order to invoke the above Edge Function from the UI, update the global workflow “Call Gumloop Workflow”:
Moving on, let’s set up the Edge Function to retrieve the AI-generated image. Copy the prompt below:
Copy-paste the user_id from Gumloop’s dashboard like so:
Once done, hit “Deploy”:
You can review the Edge Function inside WeWeb under the “API” section in the “Backend” tab, like so:
Like before, update the global workflow “Call Gumloop Polling Workflow” to invoke the above created function:
In preview mode, enter the text, background, face, model, and style inputs and click on the “Builder” button.
Review the AI-generated image and modify the prompt in Gumloop as needed to fit your use case.
Once everything is set, publish the app for free:
Alright, hopefully you found this guide helpful!
The WeWeb and Gumloop workflows are just starting points, though. You can always expand it to match your exact process. Even turn it into a real SaaS and monetize it.
Here are some feature ideas:
Happy building
With the pre-built templates, you can have your thumbnail generator up and running in 15-20 minutes. Follow the step-by-step instructions detailed above.
Both Nano Banana and GPT-Image models produce great results. Nano Banana is faster and more cost-effective, making it ideal for high-volume generation. GPT-Image excels at detailed rendering, which works better for complex designs. We recommend testing both with your reference thumbnails to see which matches your aesthetic.
No. The setup above uses powerful no-code tools: WeWeb and Gumloop. Moreover, we've created free templates on both marketplaces so that you can get up and running in less than 15 minutes. More there, you can build on the features to suit your thumbnail generation workflow or even launch it as a SaaS.
