Hey Bubble community,
I’m trying to use OpenAI’s new GPT-4o Vision model to generate hair color formulas based on two uploaded images: current hair and desired inspiration.
Here’s the stack:
• Frontend: Bubble (users upload 2 images)
• Backend: Xano (handling the API call to OpenAI)
I’m stuck on the Xano side. When I try to use an External API Request to send both image URLs to GPT-4o, the params field doesn’t let me input structured JSON — only plain text. Even when I switch it to object, it still acts like a raw string.
Here’s the payload I’m trying to send:
{
“model”: “gpt-4o”,
“messages”: [
{
“role”: “system”,
“content”: “You are a professional hair colorist helping stylists match formulas based on client hair and inspiration photos.”
},
{
“role”: “user”,
“content”: [
{
“type”: “text”,
“text”: “Based on this client’s current hair and this inspiration photo, give a formula using pro color brands.”
},
{
“type”: “image_url”,
“image_url”: { “url”: “https://example.com/current.jpg” }
},
{
“type”: “text”,
“text”: “Here is the desired look:”
},
{
“type”: “image_url”,
“image_url”: { “url”: “https://example.com/inspo.jpg” }
}
]
}
]
}
Questions:
1. Has anyone successfully sent image inputs to GPT-4o using Bubble + Xano?
2. Is there a way to format and send this from Bubble’s API Connector directly?
3. Should I run the GPT call through Bubble instead of Xano?
Thanks in advance — I’ve got everything working except this last part. Any advice or working examples would mean the world!