OpenAI, Markdown & Bubble.io

Integrating OpenAI and Markdown in Bubble.io

My thanks to our amazing YouTube community for sending in this question regarding markdown and OpenAI and integrating that into your Bubble app. 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 put a link down in the description to get you started. Effectively, I'm asking OpenAI to respond with some data and saying respond with a table in markdown. This is the response that I get back and it's not very pretty. In fact, if I was building like a ChatGPT clone, I'd want to present this in a much more beautiful manner than is currently available.

Installing the Markdown Plugin

So let me show you how we can do this and it really is quite simple. I go back into the editor. I've installed a plugin called markdown pro and what this allows me to do is add an element to the page. 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.

Setting Up the Workflow

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 ChatGPT clone here. I'm actually just showing how to get markdown and make it look good.

Implementing the Markdown Plugin

Let's go back and it means that my source, if I'm gonna just drag this into it, I'm wanting to convert the custom state, which I believe I've got on the page. Yeah, reply. So I'm taking the text that is the result of the OpenAI API call and I'm putting it into the plugin and I've got all of these options there enabled by default. Then instead of outputting just the custom state's text, I will take a code block or HTML block. I'm gonna add it in here.

Structuring the Page Layout

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. 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 it's going to turn that into HTML. Then by placing that in an HTML element on my page, I'm going to make that run the HTML and put the HTML on the page.

Testing the Implementation

Let's go back to our demo, refresh it, and I'll say submit. Okay, there we go, so here's our difference. We've got our raw output here and we've got what got put into the HTML block. Let's just inspect this so I can show 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.

Conclusion and Next Steps

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 gonna 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.