Help Needed: Displaying OpenAI API Response in Text Element on Bubble.io

Bugs
1

Hi Bubble community,

I’ve been working on integrating OpenAI’s GPT API into my Bubble.io project, and I’m so close to making it work. The API call itself is functional and GPT generates a response when triggered, but I’m struggling with displaying the response in a text element on my page. I’ve spent hours troubleshooting and would greatly appreciate any guidance.

What’s Working:

  • The API call successfully generates a response.
  • I can see the response in debug mode, so I know it’s being returned correctly.
  • The API call is initialized with a proper JSON structure.

What’s Not Working:

  • I’m unable to bind the API response to a text element to display it dynamically.
  • The dynamic field options for my text element don’t seem to include the response data structure (e.g., choices:first item’s message:content).
  • When attempting to save the response to a custom state or database field, it doesn’t seem to save or display as expected.

Setup Details:

  • API Connector:
    • Endpoint: https://api.openai.com/v1/chat/completions
    • Body:
{
  "model": "gpt-4",
  "messages": [
    {
      "role": "system",
      "content": "You are a legal expert practicing law in the United Kingdom. Provide concise, professional answers based on user queries, citing relevant laws and cases where possible."
    },
    {
      "role": "user",
      "content": "<dynamic user input>"
    }
  ],
  "max_tokens": 1000,
  "temperature": 0.3
}
  • Headers:
    • Authorization: Bearer <API Key>
    • Content-Type: application/json
  • Workflow:
    • Button triggers the API call.
    • Attempting to save Result of Step 1's choices:first item's message:content to a custom state or directly bind it to a text element.

Error-Free but Not Functional: There are no HTTP errors now, but the response simply doesn’t display in the text box, and I’m not sure if it’s a binding or parsing issue.

What I Need Help With:

  1. Correctly binding the API response to a text element.
  2. Ensuring the dynamic data path for choices:first item's message:content is recognized in Bubble.
  3. (Optional) Best practices for saving and displaying API responses dynamically.

Thank you so much in advance for any advice or help! Please let me know if more details or screenshots would be helpful.

Best regards,
John

3

This topic was automatically closed after 14 days. New replies are no longer allowed.