# Bubble Plugin

This tutorial demonstrates how to leverage [emno's vector database plugin](https://bubble.io/plugin/emno-vector-database-1703083795292x688497857715241000) 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](https://emno.io/).

### 2. Get your API Keys

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

* Open the [dashboard](https://www.emno.io/app/) 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.

<figure><img src="/files/tJQTj19iBsg0BVQ9KWiB" alt=""><figcaption></figcaption></figure>

### 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.&#x20;
* **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-002`model for a dimension of `1536`.&#x20;

<figure><img src="/files/gylsM9tYlvwDX1WraFF3" alt=""><figcaption></figcaption></figure>

### **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.&#x20;

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

<figure><img src="/files/30QaUiP7ueXjGepASEVz" alt=""><figcaption></figcaption></figure>

### **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:

<figure><img src="/files/B94g5b6oCqKbXYnWVpbX" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/BE7OMLpnf2OGM5np3GGj" alt=""><figcaption></figcaption></figure>

### **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.

<figure><img src="/files/24I82Ya2FG4bQ1cOpOUb" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/Th2ksFw07ldjX6yDtIw7" alt=""><figcaption></figcaption></figure>

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.

<figure><img src="/files/Rn2fNttXVz1kjYyvhnRB" alt="" width="563"><figcaption></figcaption></figure>

## 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.emno.io/emno/getting-started/bubble-plugin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.