Welcome to our tutorial, where we demystify the integration of Chipp with Bubble to handle pay-per-use credits in your no-code AI projects. You can watch the tutorial in this video and read through the tutorial below.

‍

‍

What is Chipp?

‍

For those new to Chipp, it simplifies the monetization of AI tools. With Chipp, setting up credit packages and charging for the usage of your GPT or AI app becomes effortless. Plus, you get paid directly through Stripe.

‍

Overview of the Integration Process

‍

Building your AI no-code app involves three major steps:

‍

1. Setting Up Chipp

2. Preparing Bubble and OpenAI

3. Integrating Chipp with Bubble

‍

Let's dive into each step.

‍

Step 1: Setting Up Chipp

‍

First, head to chipp.ai and click 'Get Started.'

‍

After registering, navigate to 'Applications' and select 'New Application.' Define your application's name and decide on the number of free trial credits for new users—I chose 100.

‍

Next, under the 'Packages' tab, create your credit packages and preview your checkout page in the 'Branding and Checkout' tab.

‍

Step 2: Preparing Bubble

‍

Now, switch to Bubble.

‍

This tutorial will use a simple use case to demonstrate the setup. Our app includes two input fields for product description and desired tone of voice, which OpenAI processes into Facebook ad copy.

‍

Ensure your app has a signup and login flow, as Chipp needs a unique identifier (like an email or UUID) for each user. To test, set up an accounts page displaying the user's details and a button for buying more credits.

‍

Step 3: Installing the Chipp Plugin in Bubble

‍

In Bubble, go to the 'Plugins' tab and add the Chipp plugin. This plugin simplifies credit-based payments into three actions:

‍

1. Current Credit Balance Action: Creates a new consumer in Chipp and issues free credits.

‍

2. Record Transaction Action: Deducts credits post-AI generation.

‍

3. Get Payment URL Action: Generates a payment page for credit top-ups.

‍

Remember to input the necessary parameters and your Chipp API key for authentication.

‍

Step 4: Setting Up OpenAI

‍

In Bubble, install the API connector plugin and set up an OpenAI account.

‍

Use OpenAI's playground to test and configure your prompts. For example, to generate Facebook ad copy, set your prompt and model (like text-DaVinci-003), and use the code generated in Bubble's API connector.

‍

Step 5: Integrating OpenAI with Bubble

‍

This step involves ensuring correct data passage between Bubble and OpenAI. In Bubble, add another API with OpenAI's credentials and set up the action for generating ad copy—configure variables to allow dynamic user inputs.

‍

Step 6: Building AI Functionality in Bubble

‍

In Bubble, create your AI interface with input fields and a response display area. Set up workflows to trigger OpenAI's action and display the output.

‍

Step 7: Setting Up Chipp Credit Management on Signup

‍

In your signup workflow, include actions to sign users up and trigger Chipp's 'Get Current Credit Balance' action. Display the user's credit balance on the account page.

‍

Step 8: Displaying User's Chipp Credits in the App

‍

Using Chipp's action, set up a workflow to display the user's current credit balance. Use dynamic data to show the credit balance in the app.

‍

Step 9: Deducting Credits Post AI Usage

‍

Post AI usage, deduct credits using Chipp's 'Record Transaction' action in your workflow. Test to ensure credits are deducted correctly.

‍

Step 10: Setting Up Top-Up Payment URLs

‍

Finally, enable users to buy more credits. Set up a workflow for the 'Buy Credits' button using Chipp's 'Get Payment URL' action, directing users to the payment page.

‍

Summary

‍

Congratulations!

‍

Your Bubble app is now fully integrated with Chipp, ready for efficient transaction handling.

‍

For more insights, head over to Chipp for tutorials on integrating Chipp with your favorite no-code tools. Let's build and monetize seamlessly!