# Getting Started


# Introduction

InteraxAI is a no-code platform that allows you to integrate AI-powered widgets to your website, without having to write any code.

We currently offer 3 types of widgets for your website:

* Text Completion (Form-based bot that generates text in [Markdown](https://www.markdownguide.org/getting-started/?ref=interaxai.com) format)
* Chat Completion ([ChatGPT](https://openai.com/blog/chatgpt?ref=interaxai.com)-like chatbot)
* Image Generation (Form-based bot that generates images)

What features does each widget have?

* Configurable OpenAI settings (control how the AI responds to your users)
* Rate Limiter (control how fast your user can generate results)
* Custom Styling (edit your widget's appearance with our widget editor)
* Monetizable (earn money by allowing your users to pay upfront)
* Embeddable (embed anywhere where you can insert an HTML code)
* Embeddings (ability to use content from your file documents to answer user prompts)
* and more...


# Managing API Keys

API keys are used to authenticate your requests to the API Provider. If you do not enter an API key, we will use a shared InteraxAI API key.

We currently have one API provider which is [OpenAI](https://openai.com/). By default, we use a shared OpenAI key for all the widgets. \
\
If you want to create your own API key for better performance, please navigate to <https://platform.openai.com/api-keys>.\
\
Once you have your own API key, please navigate to <https://interaxai.com/account/api-keys> and enter your details.\
\
You will not be able to see your API key after you save it. If you forget your API key, you can always revoke the current one but make sure that none of your widgets are using it.<br>

{% hint style="info" %}
Your API Keys will be kept encrypted and secure. It is recommended that you do not share your API keys with anyone and that you regularly rotate your API keys.&#x20;
{% endhint %}


# Creating a new widget

There are two ways to create a widget on InteraxAI. You can either create one from scratch or our pre-made example list.

## From example list

If you want to create a widget from our example list, please navigate to <https://interaxai.com/app>. At the very bottom of the page, please choose a widget you would like to create. After clicking "Use Widget" you should be able to see the example widget in your widgets list.

## From scratch

If you want to create a widget from scratch for your specific use case, please navigate to <https://interaxai.com/app> and click "New Widget".

Steps:

<details>

<summary>1 - Choose a type</summary>

</details>

<details>

<summary>2 - Basic Information</summary>

</details>

<details>

<summary>3 - Payment Type</summary>

</details>

<details>

<summary>4 - Edit Appearance</summary>

</details>

<details>

<summary>5 - Backend Settings</summary>

</details>

<details>

<summary>6 - Finalize Widget</summary>

</details>


# Configuring a widget

Our widgets are highly customizable, allowing you to change their appearance and the way it operates.

You can configure your widget by navigating to <https://interaxai.com/app> and choosing the widget you want to configure by pressing "..." and "Configure".

## Dashboard

The dashboard is where you can find information about your widget such as the widget type, payment type, LLM model, visibility, and analytics.\
\
You can also find your widget's embed code, which is the code used to integrate InteraxAI into your website, as well as basic usage and view analytics.\
\
Sample Embed code:

{% code lineNumbers="true" %}

```html
<script id="interaxai-widget-config">
  window.INTERAX_AI = {
    id: "<Your Widget ID>",
    theme: "light",
  };
  const _interaxAI=async()=>{const t=await fetch(`https://interaxai.com
  /api/embed/version?widgetId=${INTERAX_AI.id}`).then((t=>t.text())),
  e=document.createElement("script");e.id="inteinteraxai-widget-script",
  e.src=`https://cdn.jsdelivr.net/gh/interaxai/cdn@${t}/dist/bundle.js`,
  document.head.appendChild(e)};_interaxAI();
</script>
<div id="interaxai-widget"></div>
```

{% endcode %}

Sample Iframe code:

{% code overflow="wrap" lineNumbers="true" %}

```html
<iframe src="https://iframe.interaxai.com/<Your Widget ID>" frameborder="0" allowfullscreen="" style="width:100%;height:100%;min-height:500px"></iframe>
```

{% endcode %}

## Style Editor

The style editor is where you can edit your widget's appearance.

<figure><img src="/files/eumzlwlXHGJToloAlEnY" alt=""><figcaption><p>Example of a chat-completion widget on InteraxAI's editor</p></figcaption></figure>

The API Provider tab is where you can control how your widget behaves and responds. See table for definitions.

## API Provider

### Model

The machine learning model that you want to use for the completion/generation. See table for model vs generations used.

| MODEL             | GENERATION DEDUCTION PER RESPONSE |
| ----------------- | --------------------------------- |
| GPT-3.5-Turbo     | 1                                 |
| GPT-3.5-Turbo-16k | 2                                 |
| GPT-4             | 20                                |
| DALL-E            | 2                                 |

### System Prompt

A piece of text that provides instructions to the AI on how to generate a response.

### File Context

A file that contains context for the AI to generate a response with. See table for supported file types.

| File Type | Size Limit (may subject to change) |
| --------- | ---------------------------------- |
| .txt      | 10MB                               |
| .pdf      | 10MB                               |
| .csv      | 10MB                               |
| .docx     | 10MB                               |
| .json     | 10MB                               |

### Vector Count

The number of relevant answers from the embeddings to be used when generating a response.

### Prompt

The text that the model will generate a response to.

### Prompt Filter

A collection of words or phrases that are prohibited from appearing in the prompt. The presence of these items will trigger the widget to refrain from generating a response.

### Memory

How much of the conversation history is used to generate the response. This is only applicable to chat-completion widgets. There are 4 types of memory: standard, recent-context, limited-recall, and tokenized-summary. See the memory guide below for more information.

| Memory Type       | Description                                                                                                                                                                   |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Standard          | The default memory type involves utilizing the complete conversation history to craft a response, with constraints set by the **Max  Tokens** parameter.                      |
| Recent Context    | The model relies solely on the latest information to craft its response, functioning much like a memory system with a limited recall of the three most recent contexts.       |
| Limited Recall    | The model generates responses based on a specific number of previous contexts. You can adjust this number by editing the "Prev. Messages" option next to the memory selector. |
| Tokenized Summary | When the token limit is reached, the model will provide a summary of the entire conversation history, including the three most recent messages.                               |

### Max Tokens

Sets the maximum number of tokens (words or subwords) that the model can generate in response to the prompt.

| Model             | Max Token Limit |
| ----------------- | --------------- |
| GPT-3.5-Turbo     | 4096            |
| GPT-3.5-Turbo-16k | 16384           |
| GPT-4             | 8192            |

### Temperature

Controls the creativity and randomness of the generated text in OpenAI's language model.

### TopP

Determines the probability mass of the most likely next token, used to control the diversity of the generated text.

### Frequency Penalty

Penalizes words that appear frequently in the model's training data to encourage more novel and unique responses.

### Presence Penalty

Penalizes words that have already been used in the input prompt to encourage more diverse and varied responses.

### Stop

A list of tokens (words, subwords, or regex expression) that the model will not generate after the maximum length or other stopping conditions are met.

### Prompt Variables

Variables that you can use within the prompt settings. These variables will be replaced with their corresponding values before generation. See table for reserved variables.

#### Reserved Variables

<table><thead><tr><th width="165">Variables</th><th>Description</th><th>Example Value</th></tr></thead><tbody><tr><td>&#x3C;Date></td><td>the current date</td><td>11/29/2023</td></tr><tr><td>&#x3C;Time></td><td>the current time</td><td>6:47:31 PM</td></tr><tr><td>&#x3C;DateTime></td><td>both current date and time</td><td>11/29/2023, 6:47:56 PM</td></tr><tr><td><mark style="color:blue;">&#x3C;Context></mark></td><td>retrieved text from embeddings</td><td>System Prompt: "Answer the user by using the following context: &#x3C;Context>"</td></tr></tbody></table>

#### Custom Variables

When you navigate to the style editor, on each form input component you will see an "ID" input field under the Content Settings on the right-hand side of the editor. That "ID" will automatically become a prompt variable. See table for widget-type example prompts.

<table><thead><tr><th width="205">Widget Type</th><th>Sample Prompt</th></tr></thead><tbody><tr><td>Text Completion</td><td>Write a detailed blog post about <code>&#x3C;TextInput1></code> in a <code>&#x3C;SelectInput1></code> tone.</td></tr><tr><td>Chat Completion</td><td>n/a</td></tr><tr><td>Image Generation</td><td>A <code>&#x3C;TextInput1></code> that is color <code>&#x3C;SelectInput1></code>, Sigma 85mm f/1.4</td></tr></tbody></table>

## Payments

Select what type of payment you want to receive from your audience.

<table><thead><tr><th width="224">Payment Type</th><th></th></tr></thead><tbody><tr><td>Free</td><td>Widget usage is free for your audience. Your <a href="https://interaxai.com/account/payments">available generations</a> will get deducted. See <a href="#model">deduction per model table</a>.</td></tr><tr><td>Pay per generation</td><td>Your audience will pay for each widget they create, and you won't incur any charges for generating the widget. Direct payments will be set up automatically.</td></tr></tbody></table>

{% hint style="info" %}
You must set up a Stripe Express account to earn money from your audience. To set up your account, navigate to <https://interaxai.com/account/payments> and click "Setup Direct Payments". If you do not connect your Stripe account, direct payments will still be enabled. However, the payment will be sent to us for the generation of your widget.
{% endhint %}

## Leads

Tools that allow you to generate more leads.

### Modal Pop-up

A popup modal will appear once your user hits the specified generation limit. What you can configure:

* Heading/Title
* Description
* Call to action button text and link
* Generation limit and its expiration in minutes
* Whitelisted 'data-ms-content' IDs (Modal will not popup if you dynamically add the 'data-ms-content' attribute on your script code)

## Usage

Configure how your widget will be used

### Usage Limit

Control how much your widget can be used each month (Hard Limit) or get email notifications when you've reached a certain specified threshold (Soft Limit).

### Request Limit

Configure the maximum number of requests that can be made to your widget per interval.

### Auto Save

Automatically save widget inputs and results in the cloud, which is displayed on the History tab. Note: Widget results are saved on the browser's local storage by default.

### Auto Reset

Automatically reset the form input elements after a successful generation.

## Team

Manage your team members and their roles. When adding a team member already registered with us, the system will seamlessly integrate them. For those who are not yet registered, an automated email will be sent to prompt them to complete the registration process.

## Settings

Change basic information about your widget such as name, language, and more. What you can configure:

* Name
* Language
* Toggle InteraxAI Branding (Hide or display InteraxAI branding)
* Allowed hosts (Websites that can host your widget)
* Visibility (Private: only you, Unlisted: only those with the link, Public: everyone)
* API Key (Key used to authenticate requests to OpenAI)
* SDK Version (Adjust the version of your widget manually)
* Widget ID (Mostly for support)

You can also duplicate and delete your widget on this tab.


# Integrations


# Webflow\.com

Detailed instructions on how to integrate your InteraxAI widget into a Webflow website.

### Integration with Webflow

[Webflow](https://webflow.com/) is a No-Code web design and development platform that allows users to create professional and responsive websites. It offers a drag-and-drop interface, which allows users to easily design and customize their websites using pre-built elements or by creating custom elements.

Follow the steps below to integrate InteraxAI with your Webflow site:

* [x] Create a new site or open an existing site. Open designer mode.
* [x] Navigate to the left panel and click on the plus icon.
* [x] Drag embed from the advanced section and drop it on the canvas.
* [x] Double-click on the embed element to open the embed settings.
* [x] Copy and paste the script and embed code from InteraxAI inside the HTML code input.
* [x] Publish your site.

{% embed url="<https://www.youtube.com/watch?v=2umigemplRQ>" %}
Step by step tutorial on making an AI startup in 6 minutes with InteraxAI and Webflow.
{% endembed %}


# Bubble.io

Detailed instructions on how to integrate your InteraxAI widget into a Bubble website.

### Integration with Bubble

[Bubble](https://bubble.io/) is a no-code platform that allows users to create web applications without writing any code. Bubble web apps are typically created using a visual drag-and-drop editor, where users can add different elements to their apps and configure their behavior through various settings and workflows.

Follow the steps below to integrate InteraxAI with your Webflow site:

* [x] Create a new site or open an existing site. Click Edit.
* [x] In the left sidebar, under Visual elements, drag and drop the HTML element on the canvas.
* [x] Copy and paste the script and embed code from InteraxAI inside the code input.
* [x] Publish your site.

{% embed url="<https://www.youtube.com/watch?v=MUp_GDq1ewo>" %}
Step by step tutorial on making an AI website in 3 minutes with InteraxAI and Bubble.
{% endembed %}


# Memberstack.com

Detailed instructions on how to integrate your InteraxAI widget with Memberstack for subscription plans.

## Requirements

* [Memberstack](https://www.memberstack.com/) account
* InteraxAI Widget

## How it works

Memberstack allows code injection into your website based on your user's subscription plan by adding an `data-ms-content` attribute to any HTML element. This empowers your subscribed users with exclusive access to your InteraxAI widget, ensuring a personalized and enhanced experience, while your regular users remain unaffected.

## Instructions

### Add Memberstack to your no-code website

To add Memberstack to your website, you need to copy the code snippet provided by Memberstack and paste it into the `<head>` section of your website. You can find the code snippet by going to the "Settings" page of your Memberstack account and clicking the "Install Code" tab.

### Enable modal popup on your InteraxAI widget

You can enable and configure the generation limit modal popup by navigating to your widget's configuration page and then going to the [Leads](/getting-started/configuring-a-widget#leads) tab.

When enabled, you will see an input for "Whitelisted `data-ms-content` IDs". The ID you put here should be the same ID you configured on your MemberStack.

### Bypassing the popup for your subscribed users

You can bypass the popup by adding a `data-ms-content` attribute to your InteraxAI script code. See the following example:

<pre class="language-html"><code class="lang-html">&#x3C;script id="interaxai-widget-config" data-ms-content="<a data-footnote-ref href="#user-content-fn-1">&#x3C;content id></a>">
  window.INTERAX_AI = {
    id: "&#x3C;Your Widget ID>",
    theme: "light",
  };
  const _interaxAI=async()=>{const t=await fetch(`https://interaxai.com
  /api/embed/version?widgetId=${INTERAX_AI.id}`).then((t=>t.text())),
  e=document.createElement("script");e.id="inteinteraxai-widget-script",
  e.src=`https://cdn.jsdelivr.net/gh/interaxai/cdn@${t}/dist/bundle.js`,
  document.head.appendChild(e)};_interaxAI();
&#x3C;/script>
&#x3C;div id="interaxai-widget">&#x3C;/div>
</code></pre>

[^1]: Change `<content id>` to the ID you configured with Memberstack. [Click for more details.](https://www.memberstack.com/data-attributes)