AI and no-code make an amazing team.

At Bubble, we’re all about making technology accessible and helping people bring their ideas to life. Like no-code, artificial intelligence is a great tool for founders and teams looking to leverage technology’s power. Likewise, for a small team trying to build with AI, no-code can be a huge boost.

Generative AI tools like ChatGPT and GPT-4 make it easier than ever to tap into AI’s prowess for text-based tasks like translation, transcription, and content generation. Image and video generation tools like Midjourney and Runway are doing the same for graphic design, AI photography, and video production. And with the power of Bubble, you can harness this power of AI while building custom applications for yourself, your customers, or your business. And the best part is that you don’t have to write any code.

So, where to start? This guide walks you through how AI and Bubble work together, starting with the basics:

  • What do all of these AI terms in the news mean?
  • What are some ways AI can be used in an app?
  • How do you get started using AI in your Bubble app?

Let’s get into it.

Some common AI terms, defined

Everyone’s talking about using AI these days, which means there are a lot of new terms getting thrown around. But not many people slow down to define them. Here are a few you’ll see pop up a lot:

  • AI (Artificial Intelligence): Refers to machines that perform human-like tasks, such as learning, problem-solving, and understanding natural language.
  • AI Model: A mathematical framework trained to perform specific tasks — like classifying information or generating new information — by learning from data. OpenAI’s GPT-4 is a specific type of model called an LLM (see below), while ChatGPT is a chatbot built on top of it.
  • Generative AI: A subset of AI that uses algorithms to generate new data — like text, images, audio, or video — based on the input it receives.
  • LLM (Large Language Model): A type of AI model designed to understand, generate, and manipulate human-like text by learning patterns and structures in language data. GPT-4 is an LLM.
  • Application Programming Interface (API): A connection that allows two applications to speak a common language and send data back and forth.
  • API Call: A message sent to an API’s server, asking it to perform a service or complete a request.

What are some ways AI can be used in an app?

There are two main ways you can use AI in an app, including one built on Bubble.

First, you can build an interface that lets your users interact directly with AI — chatbots and image generation apps are great examples. Bubble, in particular, is perfect for building user-friendly ways to interact with LLMs and other AI models. Thanks to the Microsoft Azure OpenAI plugin, you can connect your app directly to OpenAI’s AI models without having to use the API Connector.

For example, you could:

  • Connect to an LLM like GPT-4 to build a custom chatbot trained on specific topics or your company’s customer service FAQs.
  • Build a fun, easy-to-use menu maker that asks users what’s in their fridge and returns a few meal options, complete with recipes and illustrations.

Second, you can use AI behind the scenes to enhance your app’s capabilities. Bubble connects to AI models using APIs so that you can leverage the latest and greatest artificial intelligence to power your app behind the scenes.

For starters, you can:

  • Build a storefront on Bubble and use GPT-4 to help generate product descriptions on the fly when you add items to your catalog.
  • Leverage OpenAI’s algorithms to create a recommendation engine that suggests products and services to your customers — or movies, music, and other content to you and your friends — based on their interests and behavior.

Really, though, the sky’s the limit! If you’re looking for more inspiration, check out these examples built by Bubble customers:

  • My AskAI: Create a chatbot trained to answer questions about anything you can upload in a text document.
  • VoicePen: Generate a blog post and transcription from any audio file.
  • AudioPen: Record yourself talking, then have the app transcribe it and clean up and organize the text as concise notes.

Side note: The future looks amazing

Here at Bubble, we firmly believe that anyone should be able to create with technology, and not just consume it. So we should also mention that while this guide focuses on leveraging AI in your app, we’re also actively exploring ways to build AI directly into the Bubble Editor itself. We envision a future where you can do things like describe an application in natural language and have Bubble produce a fully functional no-code web app. (Imagine how many more people could start building if app development happened in this sort of conversational way!)

For more on the future of Bubble x AI, check out this article from our co-founder and CTO, Josh Haas. In the meantime, let’s get hands-on with AI in a Bubble app.

How to get started using AI in your Bubble app

First, let’s make sure you’ve got everything you need. The list is only two items long, so it’ll be easy.

  1. A Bubble account, if you don’t have one yet. Bubble’s free tier lets you build apps, connect them to AI models, and test them out.
  2. A Microsoft Azure account and access to the Azure OpenAI Service. You’ll need both to access the AI models we mentioned earlier.
  • If you don’t have an Azure account, create one here
  • Learn more about accessing Azure OpenAI Service here
    Note: Azure is currently only granting access to users with a business domain email address, but we’re hoping to give all Bubble users access soon. Sign up here to be the first to know when that happens.

New to Bubble and AI? Try a template

If you’re brand new to Bubble and/or AI, templates — pre-made apps that you can import into your project to get things started — are the fastest way to see how artificial intelligence can flow through a Bubble app. Here are three AI-focused templates you can try for free:

  • Microsoft Azure OpenAI: A free, beginner-friendly way to build your own Chat-GPT clone with custom responses.
  • Ez Dashboard + OpenAI: Originally designed for out-of-the-box dashboard functionality, this popular, free template now includes a dozen pre-made OpenAI solutions.
  • AI Dashboard: This paid template offers a friendly, easy-to-use way to access a range of common OpenAI prompts. There’s a free demo version that lets you try most everything hands-on.

Experienced Bubbler ready to add AI? Use a plugin

If you know your way around the Bubble Editor and want to try your hand at building with AI, plugins are a great way to go. If you’ve already explored Microsoft Azure’s plugin, Eden AI offers a master plugin for common AI tasks like text and image generation, text summary and sentiment analysis, text-to-speech, and more. They also offer a range of individual plugins if you’d like to focus on just one of those things, plus templates for some AI functionality, as well.

Head over to the Plugin directory and filter it down to the Artificial Intelligence category for dozens more community-created AI plugins. (One thing to note: You’ll need to upgrade from Free to a paid Bubble plan in order to purchase third-party plugins.)

Comfortable setting up calls? Here’s the API Connector

Ready to take things into your own hands? Bubble’s API Connector plugin gives you full control over sending requests from your app to almost any external system. AI service providers including OpenAI, Runway, and ElevenLabs publish their API documentation so you can craft the right calls to power your apps.

Tutorial: Start Tinkering!

By far the best way to get comfortable with all of this stuff is to try it yourself! We created a step-by-step tutorial that walks through the process of connecting to OpenAI to a fun, movie- and emoji-related example app.

Follow along to get your API connection configured and learn how to set up an API call. Just hover over and click the blue hotspots in the window below (or click the arrow, if you’re on mobile) to check it out.

Have fun, join the conversation in our #ai-community Slack channel, and comment below to connect with fellow no-code and AI enthusiasts. We can’t wait to see what you build!