Topview Logo
  • Create viral videos with
    GPT-4o + Ads library
    Use GPT-4o to edit video empowered by Youtube & Tiktok & Facebook ads library. Turns your links or media assets into viral videos in one click.
    Try it free
    gpt video

    Build Your Own Voice-Activated AI with No Code in Bubble.io

    blog thumbnail

    Introduction

    In this tutorial, we’ll guide you through building a voice-activated AI assistant using Bubble.io and Vappy, a no-code platform that combines various AI technologies to create a seamless interaction between users and the AI. Our assistant will be conversational and capable of managing tasks such as scheduling and setting reminders—all without writing a single line of code!

    Getting Started

    Before diving into the tutorial, if you have an innovative idea that you want to bring to life using no code, head over to Planet code.com for a plethora of resources tailored just for you.

    Step 1: Set Up Your Vappy Account

    • Start by creating a free account at Vappy.
    • Once your account is set up, navigate to the assistant builder.
    • Name your assistant, for example, "Planet No Code Demo," and choose a blank template to commence the design.

    Step 2: Configure Your Assistant

    Vappy provides various AI features. Here’s how to get started:

    1. Write a simple system prompt, such as:
      You are a helpful assistant, but you speak like a pirate.
      
    2. Choose the AI model—using the GPT-3.5 Turbo model is recommended for this setup.
    3. Be mindful of the potential costs from Vappy and any additional AI model you might select.
    4. For text-to-speech capabilities, select Deepgram Voice as your voice synthesis tool.

    After you have set this up, you should input a test message:

    Hello, how are you?
    

    Then, publish your configurations and test your assistant by clicking "Talk to Assistant."

    Step 3: Integrate with Bubble.io

    Now, let’s add this AI into your Bubble application.

    1. Open your Bubble editor and create a blank page.
    2. Install the Vappy Speech AI plugin (recently released) to link Vappy’s features to your Bubble app.
    3. Drag the Vappy element onto your page and configure its size and settings.
    4. Copy your assistant’s ID from your Vappy account and paste it into the plugin settings.

    Important Note: You need to add your API keys for authentication. Secure these keys as you would your passwords.

    Step 4: Create a User Interface

    To interact with your assistant effectively, you’ll need a button to start the communication:

    1. Drag a button onto your page and label it "Start Call."
    2. Set up a workflow for this button:
      • Use the "Initialize Call" action connected to Vappy.
    3. Copy the button functionality for an “End Call” button as well, giving users the ability to finish the session.

    Step 5: Testing Your Assistant

    With everything configured, click on "Preview" to test your assistant. Engage it by clicking the "Start Call" button and communicate with it. You can ask it to perform tasks or respond to inquiries, like composing a short poem.

    That’s it! You’ve successfully created a voice-activated AI assistant in your Bubble app using Vappy, enabling users to interact with technology hands-free.

    Keywords

    • Bubble.io
    • Vappy
    • Voice-Activated AI
    • No Code
    • Assistant Builder
    • Text-to-Speech
    • API Integration
    • User Interaction

    FAQ

    Q: What is Vappy?
    A: Vappy is a no-code platform that combines various AI functionalities, including voice recognition and speech synthesis, to help users create conversational AI applications effortlessly.

    Q: Do I need coding experience to create an AI assistant in Bubble.io?
    A: No, this tutorial is designed for non-coders. You will use a no-code approach to build your AI assistant.

    Q: Are there any costs associated with using Vappy?
    A: Yes, while Vappy does offer a free account, there may be costs related to the use of certain AI models and text-to-speech features.

    Q: Can I customize the personality of the AI assistant?
    A: Absolutely! You can modify the system prompt to create an AI assistant with various personalities, tones, or functions.

    Q: How do I integrate my AI assistant into my Bubble application?
    A: You can use the Vappy Speech AI plugin within Bubble.io to integrate and configure your assistant seamlessly.

    Now you can create your very own voice-activated AI without any coding skills! Happy building!

    One more thing

    In addition to the incredible tools mentioned above, for those looking to elevate their video creation process even further, Topview.ai stands out as a revolutionary online AI video editor.

    TopView.ai provides two powerful tools to help you make ads video in one click.

    Materials to Video: you can upload your raw footage or pictures, TopView.ai will edit video based on media you uploaded for you.

    Link to Video: you can paste an E-Commerce product link, TopView.ai will generate a video for you.

    You may also like