Bubble Plugin

Learn how to integrate the emno vector database plugin in your bubble applications

This tutorial demonstrates how to leverage emno's vector database plugin to implement Q&A functionality in your Bubble application. While we won't cover building the UI and an end-to-end application, we'll dive into how to implement key backend features using emno's plugin that can power a context-aware Q&A application.

Overview of How the Sample Q&A Application Works

1. Uploading Custom Data: First, you (or users) upload text sources to emno. These text sources could be any content relevant to your Q&A application's context, such as product descriptions, FAQs, or knowledge-base articles.

2. User-Driven Queries: When users interact with the app, they ask questions related to the uploaded text. The app is context-aware and responds based on your uploaded content.

3. Generating Contextual Responses: The app utilizes emno's nearest neighbor search to find the most relevant uploaded text segments matching the user's query. These matches are then fed into an AI LLM (like GPT) to generate coherent and contextually appropriate responses.

Understanding emno’s Role in the Sample Q&A App

In this tutorial, we focus on two key aspects of emno's bubble plugin:

1. Vectorizing Text Data: This process involves creating and storing vectors for your text data into emno and setting up a knowledge base for the q&a.

2. Semantic Searches for User queries: When users ask questions in the app, the plugin finds the most relevant text segments from your uploaded data.

Finally, we walk through how to link these segments to the OpenAI Completions API for generating contextual q&a responses.

Step-by-Step emno Plugin Integration

1. Signup

If you haven't already, sign up for a free emno account.

2. Get your API Keys

Authenticate your plugin requests with API keys from the emno dashboard.

• Open the dashboard and go to 'API Keys'.

• Create an API Key, and copy it.

3. Install emno's plugin

Install the latest version of the emno vector database plugin.

Give the API key from the previous step as the token in your bubble app.

4. Create a Collection

You can do this via the emno dashboard or directly through the plugin.

• In the emno dashboard: Click the 'New Collection' button and create and save a collection. Copy the collection ID from the dashboard.

• In the plugin: Use the 'Create Collection' action. You can configure the collection according to your use case. At a minimum, give the collection's name and dimension, and you can go with the defaults for the rest of the attributes. By default, emno uses the Mini LM L6 model from HuggingFace for a dimension of 384 and the Open AI Embeddings text-embedding-ada-002model for a dimension of 1536.

5. Optional: Add Integration Key for OpenAI

This step is required if you choose the OpenAI model for your collection. In this case, you must add your OpenAI API key to your menu dashboard's "Integration Keys".

Here are the steps to find your Open AI key: https://help.openai.com/en/articles/4936850-where-do-i-find-my-api-key

6. Configure Vector Upload Action

Here, we are configuring the 'Create Vectors from Text' action from the plugin.

Typically, you will have a multi-line input in your UI where you will accept the source text to serve as the context for your Q&A. In such a setup, you will invoke this plugin action on the button/icon click to upload the text to emno.

Input the ID of the collection to which you want to upload the vectors, the content you wish to upload, and the metadata.

emno automates the chunking of the text, converting the chunks into vectors, and storing the vectors efficiently in the vector database.

7. Configure Semantic Search Action

Next, we configure the action for performing the semantic search.

Typically, your UI will have a multi-line input where users can type in their questions. In such a setup, you will invoke this plugin action as part of the workflow to get the response to the question.

Sample workflow example:

In this workflow, the user's question is first passed to emno's 'Semantic Search by text over Vectors' action. You also pass topK, the total number of similar vectors the database should return based on the search algorithm configured by the collection. Don't forget to pass the collection ID against which you want to run this query.

8. Implement Q&A Functionality

Next, we implement the Q&A functionality and link the search results from the plugin to an AI LLM model for generating responses.

In this example, we are using OpenAI's Completions API.

Here, we are passing the inputs to the OpenAI API. We pass the prompt, user's question, and the context we receive from the Semantic search by emno. You can play around and fine-tune the completions API's prompt based on your use case.

Finally, we present the result from this API in the UI as the app's response. Here, we are saving the result from the Completions API into a custom state to show the response in the UI.

Conclusion

Building this sample chat application with emno's Bubble plugin showcases the ease and power of no-code AI development. By simplifying complex tasks like vector data management, emno enables you to focus on creating innovative apps. Give it a try and witness how emno can enhance your development process.