In this tutorial, you'll learn how to connect Bannerbear to ChatGPT using the Model Context Protocol (MCP) — so you can generate and iterate on designs without ever leaving the chat.
What we cover:
• Enabling Developer Mode in ChatGPT
• Adding Bannerbear as a custom plugin via remote URL
• Authenticating with OAuth (no command line needed)
• Creating reusable templates conversationally
• Iterating on designs with text-based prompts
• Generating design variations for A/B testing
• Using responsive sizing to export for multiple platforms at once
No developer experience required — if you can chat, you can design.
Links: Bannerbear's MCP URL endpoint: mcp.bannerbear.com Learn to set up Bannerbear's ChatGPT plugin: bannerbear.com/blog/how-to-set-up-the-bannerbear-mcp-in-chatgpt What's new for nocoders on V5?: bannerbear.com/blog/welcome-to-bannerbear-v5-for-nocoders-marketers
Video Transcription
[00:00:00] Ever wish design iteration felt more like a conversation? No back-and-forth emails, no tool switching, and no rummaging through documentation for obscure commands. By connecting Bannerbear directly to ChatGPT, you can get pretty close. Imagine generating reusable templates, kicking off generation runs, and creating batches of content with easy text-based commands, all conversationally, never leaving the chat.
But before we get all the creative applications of this integration, let's walk through the basics of setting up the Bannerbear MCP in ChatGPT. If you aren't a developer, the prospect of navigating OpenAI's confusing interface or learning how to use the command
[00:01:00] line interface might feel overwhelming, but we've got good news.
It's simpler than you think. This tutorial walks you through it step by step using our remote URL. You can be set up in a few minutes. In ChatGPT, connecting an MCP works just like adding a custom plugin. First, we'll start by enabling developer mode. Go to the settings menu. Keep in mind that if you're on a team plan, this differs from workplace settings.
From there, navigate to Security and Login, scroll down and find Developer Mode
toggle
[00:02:00] it on Now that we've got developer mode enabled, we can add custom plugins Exit the Settings menu and click the Plugins menu on the left sidebar
Add a new plugin by clicking the plus button on the top right corner
In the plugin creation window fill in the required fields name, description server URL, which you can copy from the video description
an authentication method. Select OAuth. This lets you simply log in and approve access instead of managing a personal access token
Click Create.
[00:03:00] You'll then sign into Bannerbear to complete authentication and review the permissions needed. Scroll down and click Allow
Your plugin is now ready to go. Start a new chat and tag your plugin with an @ symbol or find it from the dropdown menu. You may need to refresh your session for ChatGPT to recognize the latest plugins
Now, you're ready to start designing. So let's take a look at some ideas to get you started. Need to create reusable templates but don't have time to build from scratch?
[00:04:00] You can design right from the chat by describing what you need. Let's say we want a graphic for new feature releases. We describe the theme, design direction, and dynamic fields that we need
ChatGPT then reads Bannerbear's documentation, builds the template structure and generates a design that matches the brief
Take a look at the output
It's a pretty great start Now let's say there are some changes we want to make to a design Instead of going into the editor and going layer by layer,
[00:05:00] we can iterate right in the chat by describing the changes needed Going back to our example, we've got a solid foundation, but it needs stronger branding So let's give ChatGPT more to work with by providing a color palette and asking it to use a more appropriate key design element
ChatGPT will tell you the changes made based on the prompt you gave. And while it isn't always perfect, it can get you a lot closer in less time. Here's the output
Sometimes you've nailed a design, but you need it in multiple versions, different text, different messaging, different
[00:06:00] context. Rather than manually tweaking each one, you can iterate conversationally and let ChatGPT handle the variations. Take a look. We've locked in a design. Now we need a variation with different text.
Provide the new content and context, and ChatGPT adapts the dynamic fields accordingly. The results look like this
A/B testing demands variations, subtle shifts in color, text, or tone to test what resonates. Creating these using modification inputs is possible if you have a workflow already set up, but tedious otherwise. In
[00:07:00] ChatGPT, you can batch generate them conversationally We're working with the same template from before.
Now we want variations with slightly different colors and text to test different moods and messaging
ChatGPT gave us a few variations to work with based on our brand palette. Take a look at the output
One final use case for your inspiration makes use of our responsive sizing feature, which scales your design for many sizes and ratios without breaking. Think graphics for Twitter, LinkedIn, and Instagram all rendered from one versatile template We've got a responsive template ready.
[00:08:00] We tell ChatGPT what sizes we need and it handles the rest
And instantly we have the design prepped for an entirely different platform in seconds With the MCP, you've got Bannerbear live in ChatGPT. That means faster iterations, fewer tool switches, and quicker access to templates that scale with your needs. The core functionality hasn't changed, but the way you work has.
Ready to try it? Sign up for your free trial today and connect your MCP
