Limited Time Offer: Watch All Our Bubble Tutorial Videos for Only $99 per Year!

OpenAI, Markdown & Bubble.io

Learn how to integrate OpenAI with your Bubble.io app to create a more visually appealing presentation of your data using Markdown.

Integrating Markdown and OpenAI into your Bubble app

My thanks to our amazing YouTube community for sending in this question regarding Markdown and OpenAI and integrating that into your Bubble app.

Getting started with OpenAI integration

For example, I've just got a really simple, it's not pretty, but it works. OpenAI integration going on with my bubble app. If you want to see how to do that through the API connector, we've got those videos on that. I'll put a link down in the description to get you started.

Presenting OpenAI's response

But effectively I'm asking OpenAI to respond with some data and saying respond with a table in Markdown. And this is the response that I get back, and it's not very pretty. In fact, if I was building like a chat GPT clone, I'd want to present this much in a much more beautiful manner than is currently available.

Using Markdown Pro plugin

So let me show you how we can do this. And it really is quite simple. So I go back into the editor, I've installed a plugin called, well, I just searched for markdown called Markdown Pro, and what this allows me to do is add a element to the page. And the reason that a lot of plugins rely on you adding an element to a page is because there's a script library, there's some code behind them, and by adding it to the page you're saying let's load in this code, because there's going to be a library of code behind this that takes Markdown and converts it into HTML.

Converting custom state to HTML

So what am I converting? Well, if I go into my workflow, you can see I send the message to OpenAI and then its response I'm saving in a custom state. This is just so that it's nice and quick. Custom states are like a temporary holding cell for data. Nothing's being written to my database because I'm not demonstrating how to make a chat GPT clone here. I'm actually just showing how to get Markdown and make it look good.

Adding Markdown output to the page

So let's go back and it means that my source, if I'm going to just drag this into there, into here, I'm wanting to convert the custom state, which I believe I've got on the page get reply. So I'm taking the text that is the result of the chat GPT, sorry, the OpenAI API call, and I'm putting it into the plugin and I've got all of these options, they're enabled by default. So then instead of outputting just the custom states text, I will take a code block or HTML block. I'm going to add it in here then, just looking at the structure of my page let's group these together into a column because I want to be able to compare the HTML with the actual text. Make this 100% width go.

Using the plugin element to convert Markdown to HTML

So in here I put the result of my plugin because the plugin element on the page is going to take the whole output of the OpenAI API response and is going to turn that into HTML. And then by placing that in an HTML element on my page, I'm going to make that, you know, it just runs the HTML, it puts the HTML on the page.

Viewing the converted HTML

So let's go back to our demo, refresh it, and I say submit. Okay, there we go. So here's our difference. We've got our raw output here and we've got the what gets put into the HTML block. And let's just inspect this so I can show that what's really going on. You can see we actually do get a table and rows and that's the plugin doing its job of taking markdown and converting it to HTML.

Improving the styling of the table output

Now this doesn't look that pretty, but it is definitely the first step to getting there because we now have an actual HTML page rather than just text with all of these indentations and spaces, because that's the output of OpenAI. So I think I'm going to stop things there, but I will in a follow-up video demonstrate how we can add some CSS to this and improve the styling of this table output.

Latest videos

crossmenu