Want to generate custom images with Bannerbear without touching the dashboard or writing a single API call? In this tutorial, I'll show you how to set up the Bannerbear MCP (Model Context Protocol) inside Claude Code so you can create images, manage templates, run batch generations, and trigger workflows — all by just chatting in plain English.
What we cover:
• What Bannerbear MCP does and why it's useful
• Two ways to connect: local NPX server vs. Claude Directory
• Generating a single image from a template
• Batch-generating multiple image variations at once
• Checking and editing template layers without the visual editor
• Triggering multi-step Bannerbear workflows from Claude Code
Prerequisites:
• Claude Code installed and working
• Node.js and NPM on your machine
• A Bannerbear account (free trial includes 30 API credits)
If you found this helpful, drop a like and subscribe for more tutorials like this! We'll also be making guides for other AI assistants, so stay tuned.
Links: Bannerbear sign-up link: https://bannerbear.com/v5/pricing Bannerbear MCP: https://www.npmjs.com/package/@bannerbear/mcp Bannerbear MCP in Claude Directory: https://claude.ai/directory/bannerbear
Video Transcription
[00:00:00] If you've ever wanted to generate images with Bannerbear without using the dashboard or writing a single API call, you can do it now with Bannerbear MCP. In today's video, I'm going to show you how to set up the Bannerbear MCP inside Claude Code, so you can create images, manage templates, run batch generations, and more, right from your Claude Code just by using plain English Before we set up anything, let's quickly talk about what Bannerbear MCP can do and why it's useful.
Bannerbear is a tool for automatically generating custom images, videos, and more from templates, and every template can have two kinds of elements:
[00:01:00] static objects, like a logo that stays the same every time, and dynamic objects, like text or images that can change based on the data you feed in. Normally, to use Bannerbear programmatically, you'd call its API directly or use one of its client libraries like Node.js, Ruby, or PHP libraries.
But now, with Bannerbear MCP, you can just chat with an AI assistant like Claude Code, Codex, or OpenClaw about what you want, and it figures out which tools to call for you. Instead of writing code, you can literally just ask things like, "Find me five templates that are suitable for Instagram," or, "Generate an image from this template using
[00:02:00] this text."
Your AI assistant will handle everything from pulling template details, validating your layers, to returning the final result Now let's set it up. Before you start, make sure you've got Claude Code installed and working, Node.js and NPM on your machine, and a Bannerbear account If you don't have a Bannerbear account, there's a link in the description where you can sign up for one and get a free trial with 30 API credits.
There are two ways to connect Bannerbear MCP: running the server locally via npx, or adding it straight from the Claude directory. I'll walk you through both methods. Let's
[00:03:00] start with the first one from the Claude Code CLI. You'll need your Bannerbear API key. Log into your Bannerbear dashboard and head to API keys.
Create a new key or grab your existing one, and make sure that it has permission to access your templates Copy it somewhere safe
Then open up your terminal and run this command, replacing the API key with your actual API key. If you'd rather not paste your key directly into the command, you can export it as an environment variable first. Then reference it like this That way it stays out of your shell history.
[00:04:00] Once that's done, start Claude Code and run the /MCP command You should see Bannerbear listed as a connected server.
If it's not showing up, double-check your key by running Claude MCP get Bannerbear to see the stored config If you prefer using Claude Desktop instead of the CLI, you can add Bannerbear MCP straight from the Claude directory Just go to Settings Customize Then connectors. Click discover And search for Bannerbear.
Click on the result and click Connect to Claude
[00:05:00]
When a permission screen opens up, click Allow to authorize access, and you're done. You should be able to see Bannerbear in the connectors list Now, quick note on which method to use. If you need Bannerbear to access your file system, for example, to upload local files, go with the local NPX version. The hosted version added through the Claude directory can't do that Now, let's try generating something.
I'll show you the basic image generation flow, then walk through a few more examples, like generating a batch of images at once, checking a template's details, editing a template, and running a full workflow.
[00:06:00] You can ask Claude Code something like, "Generate an image using the gradient Tweetagram template with the title 'Hello from Claude Code.'"
Behind the scenes, Claude Code calls the list templates tool to see what's available. Get template to check the layer structure and generate image to actually produce the image If you want a whole batch of images at once, try generate a batch of 10 images from the gradient Twittergram template using different quotes about art for each Claude Code will find the template, build the batch payload, and hand it off to the create batch tool.
[00:07:00]
Instead of 10 separate requests, all 10 variations get generated in one go. With the MCP, you can also work with the template directly from Claude Code. For example, if you can check a template's details by asking how many objects are there in the gradient Tweetagram template, Claude Code will call the template's config and give you the answer directly
You can even edit the template without touching the editor. Something like on my gradient Twittergram template, remove the username handle layer and add an object for author under the quote using the same font style and color, but smaller font size
[00:08:00] Claude Code will pull the current config, update it based on your request, and send the full config back through the upsert image template tool
And if you've got a multi-step workflow like this setup, you can also trigger it from Claude Code. Something like run my video editing workflow with this video. Claude Code will look up the workflow, trigger it, and return the result And that's it. Bannerbear MCP is up and running inside Claude Code. Once you're connected, you can explore all the available tools by running /MCP, selecting Bannerbear, and choosing View
[00:09:00] Tools.
It will show you all the tools that the MCP has access to. If you found this helpful, drop a like and subscribe for more tutorials like this. We'll also be making guides for other AI assistants, so make sure that you're tuned in. I'll see you in the next one
