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

Now let's register the server with Codex. In your terminal, run this command:

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

…or using the remote URL server:

codex mcp add --transport http bannerbear https://mcp.bannerbear.com/ --header "Authorization: Bearer <your_actual_api_key>"

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"]

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

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 instead of the steps above, 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:

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!