How to split Claude AI response into text + HTML?

Need help APIs
1

Hey all :waving_hand:

I’m using Claude 3 via API to generate landing pages in Bubble.

Claude returns a single JSON string inside response.content[0].text,

I want to:

  • Show the title as plain text (in a repeating group)
  • Show the html inside an HTML other element

The problem is: both values come inside one text field, so I need to extract them separately.

I’ve tried using :extract with Regex, but it’s messy and unreliable.

What’s the cleanest way to split this in Bubble?

Thanks :folded_hands:

2

Could you provide an API response example? Let’s see how it is structured and so how it can be treated.

3

Since Claude 3 returns everything inside response.content[0].text as a single text string, Bubble cannot automatically parse it like standard JSON. The best way to split the title and HTML is by extracting them separately using one of these methods:

If the response format is consistent, you can use Bubble’s “Find & Replace” to clean up the text and pull out the values manually. Another option is “Extract with Regex,” which works if the response always follows a pattern. A good Regex pattern would be:

"title":"(.*?)" to extract the title

"html":"(.*?)" to extract the HTML content

A better solution (if possible) is to modify the API response so that Claude 3 returns structured JSON instead of embedding everything in a text field. This would allow Bubble’s API Connector to automatically recognize title and html as separate fields, making it much easier to display them correctly.

If modifying the API isn’t an option, Regex or Find & Replace should still work, but they may require some fine-tuning depending on the response format.