ChatGPT Clone
Documentation
Template Configuration
Welcome to the guide for using the ChatGPT Clone template. This guide is designed to help you make the most out of your purchase and ensure a smooth experience in setting up and customizing your chatbot solution. Follow the step-by-step instructions provided in each section to effectively utilize the features of the template. Let’s get started!
1) Acquiring the Template
To start using the ChatGPT Clone template, you’ll first need to ensure you have an account on Bubble.io. Here’s how you can acquire the template and set up your initial application:
Create a Bubble.io Account:
- If you don’t already have an account, visit Bubble.io and sign up.
Purchase the Template:
- Once your account is set up, purchase the ChatGPT Clone template through the following link: Purchase Template.
Create Your Application:
- After purchasing, Bubble.io usually creates a new application using the template automatically. If this does not happen:
- Go to the Bubble.io homepage.
- Click on Create an app.
- In the popup, look for the dropdown labeled Start from a template.
- Select the ChatGPT Clone template from the dropdown.
- Enter a title for your new application and click Create.
- After purchasing, Bubble.io usually creates a new application using the template automatically. If this does not happen:
Congratulations, you have completed the first step!
2) Adding Essential API Keys
From this point forward, it’s recommended to follow these steps on both the test (development) and live versions of your application. Note that your application must be subscribed to a paid Bubble plan for the functionalities to work as intended.
Ensure Your Application is on a Paid Plan:
- Subscribe your application to a paid Bubble plan if you haven’t done so already.
Access the Plugin Settings:
- In the editor, navigate to the “Plugins” section.
- Select the API Connector plugin and then expand the “AI” section. You should see fields similar to those shown in the screenshot 1 provided.
Add Your OpenAI API Key:
- Locate the “Private key” field.
- Enter your OpenAI API Key in the following format:
Bearer YOUR-OPENAI-API-KEY
(ensure it starts withsk-...
). - Here’s a screenshot to guide you through this process:
Add Your Stripe API Key:
- In the API Connector, collapse the “AI” section and expand the “Stripe Customer Portal” section.
- Similarly, in the “Private key” field, enter
"Bearer YOUR-STRIPE-API-KEY"
(ensure it starts withsk-...
). - Navigate to the “Stripe” plugin and update the “Live Secret key” (starting with
sk-...
) and “Live Publishable Key” (starting withpk-...
) with your corresponding Stripe API keys. (Screenshot 2)
Congratulations, you have completed the second step!
Screenshot 1 :
Screenshot 2 :
3) Integrating a Stripe Subscription Product
This section focuses on integrating an already created Stripe subscription product into your platform. We’ll assume that you have already set up a subscription product on Stripe. Here, we’ll configure the integration for the “Plus” subscription tier on your platform.
Locate Your Stripe Product ID:
- Ensure you have the Product ID of your Stripe subscription product handy before proceeding.
Navigate to the Workflow Section:
- In the Bubble editor, go to the “Workflow” section.
Configure the User Login Event:
- Find the event titled User is logged in. It is represented by an orange square and is the sixth event from the start.
Set Up the Subscription Product ID:
- Click on the first action named set state.
- Then, click on format as text.
- Replace the existing fields with your Stripe Product ID as shown in screenshot 3.
Congratulations, you have completed Step 3!
Screenshot 3 :
4) Modifying General Platform Information
This step involves updating the general information for your platform, including the company name that owns the platform, the name of the platform or AI, the names of any derivative versions of your AI, and the platform’s logo. We have made these variables dynamic within the template, so you only need to change the information once to apply the updates across the entire platform.
- Access the Data Section:
- In the Bubble editor, navigate to the “Data” section.
- Modify General Information or Logos:
- Click on Option sets.
- Select General Informations or Logos depending on what you need to update.
- Find the piece of information you want to modify and click on Modify attributes next to it, as shown in screenshot 4.
Congratulations, you have completed Step 4!
Screenshot 4 :
5) Publishing the Platform to Live and Creating an Admin Account
After completing the first four steps of this guide, you’re ready to publish your platform to the live version and create your admin account.
Deploy to Live:
- In the Bubble editor, click on Main in the top right corner.
- Select Deploy to Live. After the deployment, a popup will appear.
- Click on Go to Live Site in the popup.
Create Your Account:
- On the live site, you may see a popup stating “Your session has expired.” Click on Login and create your account on the platform.
Set Up Admin Access:
- Return to the editor and switch to the live version as shown in screenshot 5.
- Navigate to Data and then App Data as shown in screenshot 6.
- Select All Users. Find the account you just created and change the “Admin” field from no to yes.
Verify Admin Access:
- Go back to the main page of the live site and open the menu in the top right corner.
- You should see a blue Access Admin button. Click it to access your administrative dashboard within the platform.
Congratulations, you are now an admin!
Screenshot 5 :
Screenshot 6 :
6) Configuring the AI Settings
To set up the AI for your platform, you’ll need the OpenAI API key previously entered in the API Connector and to have created a versatile “base” assistant on the OpenAI platform. This assistant will handle most conversations on your platform, so ensure it is well-rounded. (You can find tutorials on how to create an assistant on OpenAI easily.)
Access the Admin Page:
- Go to the main page of your new platform.
- Click on your profile picture in the top right corner to open the menu, and access the platform’s admin page.
Navigate to AI Settings:
- Once on the admin page, access the “AI Settings” from the sidebar menu.
Enter the API Key:
- On the AI Settings page, you’ll see fields for “API KEY” and “Default Assistant ID” as shown in the screenshot 7.
- Fill in the “API KEY” field with the same API key you used earlier in the API Connector.
Set the Default Assistant ID:
- Enter the ID of the assistant you created for your AI into the “Default Assistant ID” field.
Configure Free and Paid AI Models:
- Below on the page, locate the “Free model id” field.
- We recommend using the least expensive model for free users of your platform, currently gpt-4o-mini.
- Create at least one model for paid users of your platform. You can use the models shown in screenshot 8 as a guide.
Congratulations, your AI settings are now configured!
Screenshot 7 :
Screenshot 8 :
Perfect! You have completed all the essential steps necessary for the successful operation of your new platform. Below, you will find optional guides designed to further enhance and customize your platform.
Accessing and Modifying Style Variables
To customize the look of your platform by adjusting the color scheme and font, follow these steps carefully to ensure you only change the intended variables.
Navigate to a Page in the Editor:
- Open any page of the template in the Bubble editor.
Access the Style Variables:
- Go to the “Styles” section.
- Select “Style Variables” to view all the customizable style elements of the template.
Modify Color Variables:
- Scroll through the list to find the color variables.
- Focus on modifying only the following variables to tailor the color scheme of your platform:
- Dark Ascent
- Dark Background
- Dark Darker Background
- Primary
- Success
- Alert
- Destructive
- Ensure you do not change any variables outside of these specified to maintain the integrity of the template’s design.
Change the Platform’s Font:
- In addition to color variables, you can also modify the font used across the entire platform. This option is available within the same “Style Variables” section.
- Select the font setting and choose your desired font to create a consistent look that matches your brand’s aesthetic.
By following these steps, you can effectively customize both the color and font aesthetics of your platform to better align with your brand or preferred style.
Final Notes
Voilà! We have covered all the essential steps to set up and customize your platform. As you continue to explore, you’ll discover many more features and capabilities on your own. However, should you encounter any issues or need guidance on specific functionalities, do not hesitate to reach out to our customer support team. You can contact us via email at support@andromastudios.com.
Please note that we do not offer template customization for this template unless a specific quote is defined, and the cost is above €2000.
We hope you enjoy your new platform! We constantly update this platform to stay as close as possible to the official version of ChatGPT. If you have suggestions for features that would make it more aligned with the official platform, please let us know.