How to Set Up Bannerbear MCP in Codex

With the Bannerbear MCP, instead of writing API calls to generate images from templates, you can now just ask your AI assistant or coding agent like Codex to do it for you, whether it’s in ChatGPT, your IDE as an extension, or straight from the terminal with the Codex CLI.

No matter where you use Codex, we’ll show you how to set up Bannerbear MCP and run your first generation request in this article. Let's jump right into it!

What is Bannerbear?

Bannerbear is a tool that allows you to automatically generate custom images, videos, and more from templates. A design template can consist of:

• Static objects - These remain the same in every generated image (e.g., a company logo)
• Dynamic objects - These change based on data you provide (e.g., text, images)

Here’s an example:

Bannerbear offers APIs and libraries in various popular programming languages, including Node.js, Ruby, and PHP, to make integrating image generation and other media manipulation functionalities into your application/project effortless.

And with the Bannerbear MCP, you can now generate images directly using text prompts within your AI assistant or coding agent like Claude Code, Codex, and OpenClaw, instead of going through raw HTTP requests.

What Can You Do with Bannerbear MCP?

In short, the Bannerbear MCP lets you chat with Bannerbear to generate images from templates. Instead of looking up endpoints or writing a script, just ask your AI assistant in plain English, and it figures out which tools to call.

For example, you can ask things like:

• "Which template is suitable for Instagram?"
• "Generate an image from this template using this text."
• "Pass data from this CSV to Bannerbear using the batch feature."

Your AI assistant should handle everything from pulling the template details, validating your layers, to calling the right endpoint, and you just need to wait for the result to be returned.

Getting Started

These are what you need to set up your Bannerbear MCP in Codex:

• Codex in whichever form you use it
• Node.js and npm, since the MCP server runs via npx
• A Bannerbear account (sign up for free here)

We’ll use Codex CLI's codex mcp add command and the ~/.codex/config.toml file for setting up the MCP. Since the CLI, IDE extension, and ChatGPT app all share the same config on your machine, you only need to set this up once. That said, for Codex in ChatGPT, you can also configure it in Settings.

Setting Up Bannerbear MCP in Codex

Step 1. Get Your Bannerbear API Key

Log in to your Bannerbear dashboard and go to Developers → API Keys. Create a new API key or grab your existing one, and make sure that the correct permission is set to access your templates.

Copy it somewhere safe. We'll use it in the next step.

🐻 Bear Tip: Your API key should start with bb_ak_v5_.

Step 2. Set Up Bannerbear MCP in Codex CLI

Now let's register the server with Codex. You can use the remote server URL, or run the server locally via npx.

Option 1: Using the Remote Server URL

First, export your Bannerbear API key in the terminal:

export BANNERBEAR_API_KEY='bb_ak_v5_your_key_here'

Then, run the command below to add the Bannerbear MCP to your Codex:

codex mcp add bannerbear --url https://mcp.bannerbear.com/ --bearer-token-env-var BANNERBEAR_API_KEY

Option 2: Run the Server Locally via npx

In your terminal, run this command:

codex mcp add bannerbear --env BANNERBEAR_API_KEY=bb_ak_v5_your_key_here -- npx -y @bannerbear/mcp

You can also add it directly in config.toml, which can be located at ~/.codex/config.toml on macOS, Linux, and WSL, or %USERPROFILE%\.codex\config.toml on Windows:

[mcp_servers.bannerbear]
command = "npx"
args = ["-y", "@bannerbear/mcp"]
env = { BANNERBEAR_API_KEY = "bb_ak_v5_your_key_here" }

If you'd rather keep the key out of config.toml or the shell history, export it in your terminal instead:

export BANNERBEAR_API_KEY=bb_ak_v5_your_key_here

Then, pass it through by reference:

codex mcp add bannerbear -e BANNERBEAR_API_KEY=$BANNERBEAR_API_KEY -- npx -y @bannerbear/mcp

Or in config.toml:

[mcp_servers.bannerbear]
command = "npx"
args = ["-y", "@bannerbear/mcp"]
env_vars = ["BANNERBEAR_API_KEY"]

Verify Installation

To verify the installation, run codex and type /mcp to check whether bannerbear is in the list.

The Bannerbear MCP should also show up in your IDE. To verify the installation in your IDE, open the Codex panel and run /mcp (or your extension's equivalent) to check that bannerbear shows up in the tool list:

As for the ChatGPT app, you’ll see Bannerbear added to the MCP list under Plugin → Settings → MCPs :

Step 3. Set Up Bannerbear MCP in the ChatGPT App

If you'd rather add Bannerbear MCP directly through the ChatGPT app interface, go to the MCPs page and click Add → Add MCP server:

Then, enter the configuration details below but with your own Bannerbear API key:

After you click “Save” , the MCP server will be added and connected.

Trying Out Bannerbear MCP

With the server connected on whichever interface you're using, open a new chat with Codex and try something like:

Find a square template in my Bannerbear account using the MCP

Codex calls list_templates behind the scenes and returns the result it found:

This is the template returned, shown in the Bannerbear dashboard:

You can also do other tasks like generating a new image by swapping out the image, text, and more. The screenshot below shows an image generated with a new product name, directly from the chat:

More Bannerbear MCP Examples in Codex

Besides the examples above, there are more things you can do with Bannerbear MCP in your Codex. Here are a few more prompts to try:

Generate a Batch of Images

Generate a batch of 10 images from the Tweetagram template, using different
quotes about art for each.

Codex will find the template, build the batch payload, and hand it off to create_batch. All 10 variations will get generated in one go instead of 10 separate requests:

Here are some of the images returned:

Check a Template's Details

How many objects are there in the Tweetagram template?

Codex will fetch the template's config with get_template and return the answer to your query:

Here’s the template opened in the template editor, for comparison:

Edit a Template

On my Tweetagram template, add an object for "author" under the quote, using the same font style and color but a smaller font size.

Codex will pull the current config with get_template, updates the template following your request, and sends the full config back through upsert_image_template:

Without touching the template editor at all, the template gets updated:

List Recent Generations

List my last 5 generated images.

Codex will call list_media and return the last 5 generated images, with the newest being the first:

Run a Workflow

Run my "video editing" workflow with this video: https://bannerbeartutorial.s3.ap-southeast-1.amazonaws.com/workflow+sample+video.mp4

Codex will look up the specific workflow with list_workflows, then trigger it with run_workflow:

If the video is not returned, further prompt Codex for the result:

🐻 Bear Tip: Workflows let you chain multiple steps—tools, image and animation renders into a single automation.

Conclusion

That's it! You've got Bannerbear MCP connected to Codex. Feel free to explore further, like asking Codex to build a new template, batch-generate a few hundred certificates from a spreadsheet, or wire image generation straight into a script it writes for you.

If you don't have a Bannerbear account yet, you can sign up for free here. And if you’re using other AI like Claude Code, check out the Bannerbear MCP Setup for Claude Code too!