OpenAI AddOn

Overview

The OpenAI AddOn is fully functional from the moment it’s enabled via the Beefree SDK Console. For information about enabling OpenAI AddOn click here.

Once enabled, the OpenAI AddOn is available in the side panel for the following content blocks:

  • Title

  • Paragraph

  • List

  • Button

In certain scenarios, you may find the need to personalize both the user interface (UI) and the operational features of the OpenAI AddOn. This is particularly applicable when you want to achieve objectives such as:

  1. Monitoring Token Usage for Cost Management: By tracking the number of tokens being used, you can effectively manage and regulate your expenses related to using the OpenAI AddOn. This becomes important when your usage is high, and you must keep a budget check. Learn more about tokens.

  2. Controlling Access to the Prompt: You might want to limit who can access and manipulate the prompt. In a shared environment, for instance, you may want to restrict certain users from altering the prompt, which is crucial for maintaining consistency and avoiding unwanted changes.

  3. Enabling Per User or Per Content Type: You might want to limit who can access the AI so you can up-sell the feature to end-users. Or, you may only want to enable the AI capability for specific content types, such as paragraphs vs. buttons.

  4. Disabling Automatic Suggestions: The OpenAI AddOn can generate automatic suggestions at the prompt, which may not always be desirable. In such cases, you might want to disable this feature to have more control over the input and output at the prompt.

We’ll cover all of these scenarios in the following sections as we discuss the settings and configuration options available for developers.

General Settings

Note: All settings are optional and may be refreshed, in real-time, via the configuration reload instance method (e.g. bee.loadConfig(settings)) during the active session.

Currently, the following settings are supported:

SettingTypeDescription

tokensAvailable

number

Display only value for the optional Display Usage Widget: The total tokens available for the user to consume during the session. If provided, tokensUsed and tokenLabel are required.

tokensUsed

number

Display only value for the optional Display Usage Widget: The number of tokens that the addon user has consumed during the current session. If provided, tokensAvailable and tokenLabel are required.

tokenLabel

string

Display only value for the optional Display Usage Widget: The API reports token usage, but the host app may refer to tokens as words or any other nomenclature that makes sense to its users. Required when providing usage limits via tokensAvailable and tokensUsed parameters.

isPromptDisabled

boolean

Set to true to lock the prompt. The chat interface will be disabled but allow previous answers to be applied.

isSuggestionsDisabled

boolean

Set to true to hide the suggestions popup

Example


const beeConfig = {
    uid: 'string',
    ... 
    addOns: [
      {
        id: "ai-integration",
        settings: {
          tokensAvailable: tokensAvailable,
          tokensUsed: tokenCounter,
          tokenLabel: 'tokens',
          isPromptDisabled: false,
          isSuggestionsDisabled: false,
        }
      },
    ],
    ...
}
     

Monitor Usage

With each prompt response, the addon will report the usage data provided by the OpenAI API via the editor’s onInfo callback without storing or tracking the data.

Example


const beeConfig = {
    uid: 'string',
    ... 
    onInfo: function (data) {

        // Check information is addon
        if (data.code === 1000) {

            // Check which addon
            const handle = data.detail.handle
            if (handle === 'ai-integration') {
                // Get the total tokens
                const totalTokens = data.detail.usage.total_tokens
                // Update running total in database
                // --> host app code goes here
            }
        }
    },
    ...
}
     

Display Usage Widget

You may choose to track the end-user’s total usage through the aforementioned onInfo callback if desired. Additionally, you may choose to show the usage data to the user via the built-in display widget. To activate the display usage widget, provide the usage data via the addon settings. Since the editor doesn’t track usage, you’ll need to refresh the values via the bee.loadConfig method to keep the display widget data current.

Example


let tokenCounter = 0
let tokensAvailable = 2000

const beeConfig = {
    uid: 'string',
    ...
    // Initial AddOn configuration
    addOns: [
      {
        id: "ai-integration",
        settings: {
          tokensAvailable: tokensAvailable,
          tokensUsed: tokenCounter,
          tokenLabel: 'words',
          isPromptDisabled: false,
        }
      },
    ],
    ...
    // Monitor for information
    onInfo: function (data) {

        // Check information code is 1000 for addon reporting
        if (data.code === 1000) {

            // Check which addon
            const handle = data.detail.handle
            if (handle === 'ai-integration') {
                const totalTokens = data.detail.usage.total_tokens
                tokenCounter = tokenCounter + totalTokens

                // Refresh Usage AddOn Settings
                const refreshedUsageSettings = {
                    addOns: [
                        {
                            id: "ai-integration",
                            settings: {
                                tokensAvailable: tokensAvailable,
                                tokensUsed: tokenCounter,
                                tokenLabel: 'tokens',
                                isPromptDisabled: (tokenCounter >= tokensAvailable) ? true : false,
                            }
                        },
                    ],
                }

                // Reload Config
                bee.loadConfig(refreshedUsageSettings)
            }
        }
    },
}

See below for an example of how the UI will render when provided with the optional display usage widget.

Disable Prompts Per User

To enable OpenAI AddOn, but disable the prompt per user, pass the isPromptDisabled boolean parameter as true.

The following example will disable the prompts for the user with an uid of inactive-user.

Example


const beeConfig = {
    uid: 'inactive-user',
    ... 
    addOns: [
      {
        id: "ai-integration",
        settings: {
          isPromptDisabled: true,
        }
      },
    ],
    ...
}
     

Disable AddOn Per User

To disable the OpenAI AddOn for a particular user, use the following configuration. Ensure the enabled parameter is set to false. To turn the AddOn back on for a user, edit the parameter to true.


const beeConfig = {
    uid: 'inactive-user',
    ... 
    addOns: [
      {
        id: "ai-integration",
        enabled: false
      },
    ],
    ...
}
     

Disable AddOn Per Content Block Type

The OpenAI AddOn is available for the following content blocks:

  • Title

  • Paragraph

  • List

  • Button

You may utilize the Advanced Permissions configuration to disable OpenAI AddOn per content type.

The following example will disable the addon for the paragraph block:

Example


const beeConfig = {
    uid: 'string',
    ... 
    advancedPermissions: {
      content: {
        paragraph: {
          behaviors: {
            canViewSidebar: true,
          },
          properties: {
            aiIntegration: {
              show: false,
              locked: true
            },
          },
        },
      },
    }
    ...
}
     

Prompt Suggestions

OpenAI AddOn includes preset prompt suggestions to facilitate the content creation process. These appear after the initial draft of your text has been formulated and whenever further refinement is needed. Please note that this function applies only when editing existing text through the AI prompt. The suggestions will not appear for placeholder text.

Here’s a simplified step-by-step guide on how to use suggestions, as shown below:

  1. Start with your draft text added to the design area.

  2. If you desire to adjust the tone to be more formal, for example, click on the paragraph, list, title, or button you want to modify.

  3. Navigate to the ‘Write with AI’ option.

  4. Click on the area designated for adding prompts.

  5. You’ll notice the prompt suggestions popup.

  6. Select the ‘Make it [desired tone]’ option, making sure to replace [desired tone] with a value (e.g., funny)

  7. Click ‘Generate’.

The AI will then generate a revised version of your content, matching the tone you entered.

Customize Prompt Suggestions

Below are the preset prompt suggestions we have identified for the different content tiles, along with their corresponding translation key, incase you’d like to revise the prompt through our custom languages feature.

Paragraph

LabelKey

Spell-check the content

mailup-bee-common-component-ai.suggest-check-spelling

Correct grammar mistakes in the content

mailup-bee-common-component-ai.correct-grammar

Translate content to [language]

mailup-bee-common-component-ai.translate

Make it [tone] without changing the format

mailup-bee-common-component-ai.adjust-tone

Use Active Voice

mailup-bee-common-component-ai.use-active-voice

Summarize the content

mailup-bee-common-component-ai.summarize-text

Convert the content to the third person without changing the format

mailup-bee-common-component-ai.convert-third-person

Button

LabelKey

Translate content to [language]

mailup-bee-common-component-ai.translate

Make it [tone]

mailup-bee-common-component-ai.make-it-tone

Use Active Voice

mailup-bee-common-component-ai.use-active-voice

List

LabelKey

Spell-check the content

mailup-bee-common-component-ai.suggest-check-spelling

Correct grammar mistakes and return the content

mailup-bee-common-component-ai.correct-grammar-list

Translate content to [language]

mailup-bee-common-component-ai.translate

Make it [tone] without changing the format

mailup-bee-common-component-ai.adjust-tone

Use Active Voice

mailup-bee-common-component-ai.use-active-voice

Title

LabelKey

Capitalize all letters

mailup-bee-common-component-ai.capitalize-text

Capitalize the first letter of each word

mailup-bee-common-component-ai.capitalize-all-words

Make it [number] words long

mailup-bee-common-component-ai.characters-length

Make it [tone] without changing the format

mailup-bee-common-component-ai.adjust-tone

Translate it to [language]

mailup-bee-common-component-ai.translate-heading

Last updated

Logo

© Bee Content Design, Inc. San Francisco, CA | Part of Growens