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.
Transform raw OpenAI responses into beautiful HTML: Learn how to enhance your OpenAI integration with markdown formatting in Bubble!
Elevate your Bubble app's UI: Discover the power of markdown to create stunning tables and formatted text effortlessly.
From plain text to polished output: Master the art of converting OpenAI's markdown responses into visually appealing HTML elements in your Bubble app.
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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.