(https://bannerbear.com/)
In this tutorial, you'll learn how to set up Bannerbear MCP inside Codex so you can create templates, generate images, and run workflows—just by talking to your AI assistant in plain English. No API calls or code required.
We cover three setup methods (Codex CLI, config file, and ChatGPT desktop app), then walk through five practical examples: generating a single image, batching 10 images at once, inspecting template details, editing a template, and triggering a multi-step workflow.
🔗 Links: Sign up for a free Bannerbear account: https://www.bannerbear.com/v5/pricing/ Duplicate template in the video: https://app.bannerbear.com/v5/p/nWY2Gb70RxY5pek6zL Workflows documentation: https://developers.bannerbear.com/v5/
Video Transcription
[00:00:00] Hey everyone, welcome back. In today's video, we're going to set up Bannerbear MCP inside Codex so that you can create templates, generate images, or even run workflows just by talking to your AI assistant. Whether you use Codex in the CLI, IDE extension, or the ChatGPT desktop app, this video will cover everything you need to set up Bannerbear MCP in your Codex.
Before we set anything up, let's quickly cover what Bannerbear is and what its MCP does. Bannerbear is a tool for automatically generating custom visuals from templates. Here's an example template open in the Bannerbear editor. Every template can have two kinds of objects: static
[00:01:00] objects, like a logo, that stays the same every time, and dynamic objects, like text or images that change based on the data you feed in.
Bannerbear already offers APIs and SDKs in Node.js, Ruby, and PHP. But now with the MCP, you don't need to write any code yourself. You can generate images directly using plain text prompts inside Codex. Instead of calling an endpoint, just ask something like, "Find me a template suitable for Instagram" or, "Generate an image from this template using this text."
Codex will handle everything, from pulling template details, validating the template layers, to returning the final result. All right, let's set it up. Here's what you
[00:02:00] need. You'll need three things: Codex, in whichever form you use it, Node.js and npm installed, and a Bannerbear account. If you don't have a Bannerbear account, you can use the link in the description to get a free trial with 30 API credits.
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. We'll need it later. Now, let's register the Bannerbear MCP with Codex. Since the Codex CLI IDE extension and ChatGPT app all share the same config on your machine, you only need to set it up once and
[00:03:00] use the MCP in all of them.
We'll be covering three ways to set it up: using the Codex CLI command, editing the config file, and in the ChatGPT desktop app. Just pick whichever method that fits you Let's start with the CLI command. With this method, you can add the Bannerbear MCP either using the remote server URL or running the server locally via npx.
To add Bannerbear MCP using the remote server URL, just run this command in the terminal with your own API key. To run the server locally via npx, run this command instead
Other than running commands in the CLI, you can also add the MCP directly inside Codex's config file.
[00:04:00] You can find the config file inside the Codex folder in your home directory. Open this file and add this to it After running the CLI command or editing the config file, you can verify the installation using the /mcp command inside Codec CLI, and check whether Bannerbear is in the list It should also show up in your IDE's Codex panel and in the ChatGPT app.
If you prefer to install using a UI, you can also set up the MCP inside the ChatGPT app. Go to plugins, settings. Under the MCP tab, click add server. Enter the MCP name and other configuration
[00:05:00] details with your own Bannerbear API key. Once you hit save, the MCP server should be added and connected. 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. In wherever you're using Codex, open a new chat and ask something like, "Generate an image using the blue pink Twittergram template with the title 'Hello from Codex'."
Behind the scenes, Codex would use all the tools needed to produce the image If you want
[00:06:00] a whole batch of images at once, try something like this Generate a batch of 10 images from the blue-pink Tweetagram template using different quotes about art for each. Codex will find the template, build the batch payload, and hand it off to the create batch tool.
Instead of 10 separate requests, all 10 variations get generated in one go. With the MCP, you can also inspect a template directly from Codex without ever opening the editor. For example, you can check a template's details by asking, "How many objects are there in the blue-pink Tweetagram template?" Codex will call the template's config and give you the answer directly.
[00:07:00]
You can even edit the template without touching the editor. "On my blue-pink 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 all the current config and update it based on your request. This also works for animation and workflow templates.
Last but not least, if you've already got a multi-step workflow set up in Bannerbear, you can trigger that from Codex too. Let's say you've got a multi-step workflow like this setup. You can trigger it from Codex. "Run my video editing workflow with this video." Codex will look up the workflow, trigger it, and return the result.
That's
[00:08:00] it. You've got Bannerbear MCP added to your Codex. Now you can generate images, batch visuals, and even create content workflow just by giving your AI assistant instructions in plain English instead of writing API calls yourself. If you're also using other AI assistants like Claude Code or OpenClaw, we'll also be uploading setup guides for them.
Make sure you're subscribed to the channel so that you don't miss out on them. In the meantime, feel free to check out other tutorials on our channel. I'll see you in the next one.
