How to Construct an AI Tool Using Drag-and-Drop Interfaces

How to Craft an AI Tool With No Programming Background Required

4 min readApr 4, 2024

How I Created an AI-Powered Stoic Mentor Without Writing a Single Line of Code

I recently created an awesome AI tool powered by GPT-3 in just a few hours using nothing but no-code editors like Bubble. In this guide, I’ll be showing you step-by-step how to create your own AI tool hosted on a website, ready for you to start selling and building businesses around.

The best part? Throughout this tutorial, I won’t be writing a single line of code! We’ll go from an idea to a final product of having a website that people can interact with and use, leveraging powerful large language models like GPT-3.

I know it may sound overwhelming at first, but I’ll break it down for you in the simplest way possible. By following this step-by-step guide, you’ll learn how to harness the power of AI and create your own tool without any coding experience. Let’s dive in and start with stage one: coming up with an idea for the site.

We strongly recommend that you check out our guide on how to take advantage of AI in today’s passive income economy.

Developing the Idea

In my entrepreneurship guide, I mentioned that one of the viable business models is a prompt-based business. Today, we’ll be building a prompt-based AI tool that takes user input from the website, combines it with a pre-written prompt, sends it off to the API, and returns the response back to the user.

As an avid reader and fan of stoic philosophy, I decided to create a tool that allows users to input their struggles, such as a breakup or business challenges. The tool will then use the power of the large language model to generate a recommended stoic quote to inspire and provide guidance during difficult times.

Crafting the Prompt

Now that I have my idea — a stoic AI-powered life coach — it’s time to start writing a prompt and using prompt engineering to interact with the large language models and generate the desired responses.

Using a website called Promptable.ai, which is similar to the OpenAI playground but with a more user-friendly interface, I began crafting my prompt. The main functionality of the site is to allow users to input their struggles, hit the “Get Wisdom” button, and receive a generated stoic quote to help them out.

Zero-Shot Prompting

I started with a basic zero-shot prompt: “Give me a quote from one of the great stoic philosophers Marcus Aurelius, Seneca, or Epictetus that helps me with struggling with my business.” Running this prompt returned a decent quote, but I felt it could be improved.

Few-Shot Prompting

To refine the output, I used few-shot prompting. I wrote a more detailed prompt that included role-playing as a stoic life coach and provided examples of question-answer pairs to guide the model. This covered a range of topics like financial struggles, breakups, and unmet expectations.

Building the Website with Bubble

With the prompting complete, it’s time to head over to Bubble, the no-code platform I’ll be using to build the site.

Setting Up the Application

Create a new app in Bubble and give it a name (e.g., “Stoic Mentor”).
Set up the basic structure of the website by dragging and dropping elements like headers, hero images, and input forms.
Customize the form to take a single input and add a “Get Wisdom” button.

Connecting to the OpenAI API

Install the API Connector plugin in Bubble.
Create a new API called “Stoic Request” and configure it as a POST request.
Add the necessary headers, including the content type and authorization (using your OpenAI API key).
Set up the request body using the prompt created earlier, replacing the input placeholder with a dynamic value.
Test the API call to ensure it returns the expected response.

Displaying the Generated Quote

Add a text element to the page where the generated quote will be displayed.
Set up a workflow that triggers when the “Get Wisdom” button is clicked.
In the workflow, call the “Stoic Request” API and extract the generated text from the response.
Update the state of the quote text element to display the generated text.

Finalizing the Website

With the core functionality in place, I focused on polishing the website’s appearance and user experience. This involved:

Creating a logo for the Stoic Mentor
Adding appropriate text and context about the stoic philosophers
Styling the input form and quote display
Ensuring smooth navigation and responsiveness

Conclusion

And there you have it! In just a few hours, I created an AI-powered Stoic Mentor website without writing a single line of code. By leveraging powerful tools like GPT-3 and no-code platforms like Bubble, you too can bring your AI-based business ideas to life quickly and efficiently.

If you’re interested in building AI-based businesses, I encourage you to dive in, experiment with these tools, and push yourself to create and launch products rapidly. The key is to build fast, get things out there, and learn along the way.

I hope this guide has provided you with valuable insights and the confidence to embark on your own AI entrepreneurship journey. If you have any questions or need further guidance, feel free to reach out. Happy building!