Overview

This page discusses how to configure Anthropic as a provider for the AI Writing Assistant AddOn within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the Switch Providers section of the AI Writing Assistant page to enable Anthropic as your new provider.

Prerequisites

Prior to getting started, ensure you have the following:

• A Superpowers or Enterprise Beefree SDK plan

• The AI Writing Assistant AddOn enabled in the Beefree SDK Developer Console.

• An API Key for Anthropic

  • Note: Refer to Anthropic’s documentation for instructions on creating an account and generating your API key.

Configuration Steps

Take the following steps to configure this provider:

1. Log in to the Beefree SDK Developer Console.

2. Navigate to the application with the AI Writing Assistant enabled.

   1. Click Details.

3. Navigate to the AddOns under Application configuration section.

   1. Click View more.

4. Click the Manage Providers tab.

5. Click Add provider.

6. Complete the required information.*

7. Click Save to save your provider configuration.

*Reference the Required Provider Information section of the AI Writing Assistant AddOn page to reference what information is required to configure Anthropic as a provider.

Shared Logic Considerations

Consider the following shared logic when integrating the AI Writing Assistant AddOn and Anthropic as a provider:

• Methods: The methods used for the Anthropic provider are inherited from the AI Writing Assistant AddOn. These include functionality for generating content for supported block types (Title, Paragraph, List, Button) and for handling metadata.

• Events: The integration supports all events from the AI Writing Assistant, such as tracking user actions and processing content generation requests.

• Callbacks: All callbacks associated with the Anthropic provider are inherited from the AI Writing Assistant. They manage notifications for successful or failed content generation attempts.

Additional Considerations

• Billing: Refer to Anthropic’s pricing documentation for more information.

Overview

This document discusses the data flow of your API key from the moment you activate an AddOn with AI functionality within your Beefree SDK Developer Console. In this document, you learn more about Beefree SDK’s security practices, frameworks, and protocols in reference to protecting your sensitive data assets.

Data Flow Diagram

The following diagram provides a visualization of the data flow for your AI AddOn API key. In the following diagram, OpenAI is shown as an example. However, this same flow applies to other AI provides available through Beefree SDK AddOns.

These providers include:

• Azure OpenAI

• Azure Cognitive Vision

• DeepL

• Stability AI

• Anthropic

This data flow diagram illustrates the flow of data and the key components involved in securing the API key from developer input to end user interaction.

The following list shows each component within the data flow diagram along with the component’s description.

• Developer Console: This is where the developer inputs the API key, initiating the process.

• AI AddOn: This is where the developer enters their API key that they received from their AI Provider, and activates the AddOn for their host application.

• Data Store: The encrypted API key is stored securely in the data store.

• End User: The end user interacts with the host application.

• HA AddOn: The frontend user interface of the AI AddOn that the end user engages with.

• Proxy: The proxy receives and forwards requests to the API, and sends responses to the AI AddOn within the host application.

• AI Provider: The AI Provider processes requests and provides responses.

Data Management Details

The flow and management of your API key is designed to ensure its security. Security measures are implemented as soon as you enter your API key into the Developer Console. Once you enter your API key, it is immediately encrypted over TLS. From there, the encrypted API key is securely stored in the Beefree data store. Your API key remains encrypted both at rest and during transit.

When the end user types a prompt into the AddOn, their prompt is forwarded through a proxy. The proxy receives the request, retrieves the API key, and forwards both the API key and the prompt to the AI Provider. The AI Provider processes the request and forwards the response to the proxy. The proxy then delivers the response to the AI AddOn, which displays the response in your application’s frontend to the end user.

Note: The proxy does not log any personal data and only facilitates secure communication from request to response. Throughout this process, the API key remains in the backend, preserving its security and ensuring no personal data is processed by the application. This approach is GDPR compliant.

For additional information, we recommend you reference our Terms of Service and our AIF third-party providers' policies.

AI Writing Assistant Overview

Use this AddOn to enable the AI Writing Assistant for your end users. This AddOn allows users to generate text within their designs using AI, helping them complete their designs faster and more efficiently. This AddOn integrates with OpenAI, Azure OpenAI, or Anthropic as the providers for this feature.

With this feature, your end users will see a Write with AI button for Title, Paragraph, List, and Button content blocks. Beefree SDK processes your end users' prompts, sends them to your AI provider, and returns the response to the end user. They can then decide to apply or regenerate the response.

By integrating the AI Writing Assistant, you provide your end users with a powerful tool to complete their designs quickly, which helps them maintain a competitive edge. This AddOn is quick and simple to integrate.

The following image provides an example of how the AI Writing Assistant looks to your end user:

Visit our Integrated AI Assistant White label end user guide to learn more about how this feature works on the frontend for your application's end users.

How to activate the AI Writing Assistant

This section discusses the prerequisites and steps you need to take to get started with this feature. You can watch the following How to change your AI provider | Beefree SDK video for visual steps on how to activate the AddOn and add or change providers. Or, you can continue reading the documentation in this section for a step-by-step breakdown of how to activate the AddOn and add or change providers.

Prerequisites

• Azure OpenAI, OpenAI, or Anthropic account and credentials.

• AI Writing Assistant AddOn enabled in the Developer Console.

Switch Providers

Take the following steps to switch providers:

1. Log in to the Beefree SDK Developer Console.

   1. Navigate to the application you'd like to use.

   2. Navigate to the application's AddOns section.

2. Click on the Edit button for the AI Writing Assistant AddOn .

   1. Click Manage providers.

   2. Click Add provider.

      1. Complete the required information*.

3. Click Save.

*The following information is required for each provider.

Required Provider Information

Manage Providers

You can also manage your existing providers within the Developer Console. By taking the same steps mentioned in the Switch Providers section and navigating to your application's AddOns, you can manage your configured providers.

When managing your providers, you will have the following options:

• Edit

• Deactivate

• Delete

Additional considerations

• Azure OpenAI, OpenAI, and Anthropic are the only provider options for the AI Writing Assistant.

• Cognitive Vision is the provider for the Alt text generation with AI feature.

Customize the AddOn's Configuration

In certain scenarios, you may find the need to personalize both the user interface (UI) and the operational features of the AI Writing Assistant 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 AI Writing Assistant AddOn. This becomes important when your usage is high, and you must keep a budget check. Learn more about configuring Token Upselling.

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 AI Writing Assistant 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.

5. Token Upselling: The AI Writing Assistant AddOn can be configured to guide your end users to purchase additional tokens when they run out of available tokens. This feature is called Token Upselling.

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:

AI Writing Assistant Configuration Example

const beeConfig = {
    uid: 'string',  // Unique identifier for the user
    ... 
    addOns: [
      {
        id: "ai-integration",  // Identifier for the AI integration add-on
        settings: {
          tokensAvailable: tokensAvailable,  // Total tokens available for user consumption during the session
          tokensUsed: tokenCounter,  // Number of tokens consumed by the user during the current session
          tokenLabel: 'tokens',  // Label for the token usage, customizable by the host app
          isPromptDisabled: false,  // Whether to lock the prompt interface
          isSuggestionsDisabled: false,  // Use to remove prompt presets, decide whether to hide the suggestions popup 
          isUpsellEnabled: true,  // Whether Token Upsell feature is enabled
          metadataGeneration: true  // Whether AI-Generated Meta Tag fields feature is enabled (enabled by default)
          submitOnEnterKey: false // Enables submitting the prompt by hitting the Enter button on the keyboard
        }
      },
    ],
    ...
}

Monitor Usage

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

You can also monitor when the user applies a prompt response.

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

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

                // User applied prompt
                case 1001:
                    // Get the prompt id
                    const promptId = data.detail.promptId
                    // Get the module id the prompt was applied to
                    const moduleId = data.detail.moduleId
                    // Get the content of the prompt response
                    const content = data.detail.content
                    
                    // --> Add logic to handle data 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.

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 the AI Writing Assistant 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.

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

Disable AddOn Per User

To disable the AI Writing Assistant 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 AI Writing Assistant AddOn is available for the following content blocks:

• Title

• Paragraph

• List

• Button

You may utilize the Advanced Permissions configuration to disable AI Writing Assistant AddOn per content type.

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

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

Prompt Suggestions

The AI Writing Assistant 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, in case you’d like to revise the prompt through our custom languages feature.

Paragraph

Button

List

Title

Additional considerations

Prior to configuring the AI Writing Assistant AddOn, consider the following:

• Scrolling behavior

• AI Providers and Data Security

Scrolling Behavior

This section will discuss how to manage an odd scrolling behavior related to the AI Writing Assistant AddOn. At times, the AI Writing Assistant side panel opens and requires the end user to scroll down to reach the prompting area.

The following image shows an example of this behavior:

If you encounter this behavior, take the following steps to avoid the need for scrolling to access the prompting area:

1. Navigate to your CSS code.

2. Change the height of your container using the calc() function as shown in the following examples:

Example A:
height: calc(100% - 100px); // offset for 100px footer

This sets the height of the element to be the full height of its parent (100%) minus 100px, which accounts for an offset such as a footer.

Example B:
height: calc(100%);  // no offset needed

This sets the height of the element to be exactly 100% of its parent's height with no offset.

The calc() function allows for mathematical expressions in CSS values, making it versatile for dynamic layouts.

1. Save your updated CSS.

You can now access the prompting section of the AI Writing Assistant on the front end without scrolling down the side panel.

The following image shows an example of this result:

AI Providers and Data Security

Visit our AI Providers and Data Security page to learn more about the flow of your end user's information from prompt creation to generated response.

Overview

This page discusses how to configure OpenAI as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable OpenAI as your new provider.

Prerequisites

Prior to getting started, ensure you have the following:

• An OpenAI account and API Key.

• The AI Writing Assistant AddOn enabled in the .

• Beefree SDK .

Configuration Steps

Take the following steps to configure this provider:

1. Log in to the .

2. Navigate to the application with the AI Writing Assistant enabled.

   1. Click Details.

3. Navigate to the AddOns under Application configuration section.

   1. Click View more.

4. Click the Manage Providers tab.

5. Click Add provider.

6. Complete the required information.*

7. Click Save to save your provider configuration.

Shared Logic Considerations

Consider the following shared logic when integrating the AI Writing Assistant AddOn and OpenAI as a provider:

Additional Considerations

Overview

The provides your application's end users with access to the the Write with AI button for text-based content blocks within the builder. When your end users click this button, a modal appears prompting them to submit a prompt to the AI Assistant. This is the portion of their journey that interacts with the provider that you configured within the . Beefree SDK offers a variety of providers as options for enabling the AI Writing Assistant AddOn for your application's end users. These providers each include their own set of benefits, and ultimately, the one you select for your configuration should be the provider with the set of benefits that most closely aligns with the goals you have for your application.

This page outlines and discusses each of the available provider options, and their corresponding set of benefits.

Available Providers

This section discusses each of the available providers.

OpenAI

is a versatile and widely recognized provider in the AI space. By integrating OpenAI into your application through the , your end users gain access to advanced generative text capabilities powered by GPT models. These models are known for their ability to create natural-sounding, coherent text across various use cases, such as marketing copy, email drafts, and creative writing. OpenAI's API also supports a high level of customization, allowing you to fine-tune the model's behavior to align with your application's goals.

Benefits of using OpenAI:

• Access to industry-leading GPT models for advanced text generation.

• Broad support for a variety of languages and writing styles.

• Extensive documentation and community resources to support implementation.

• Highly scalable infrastructure capable of handling large user bases.

Azure OpenAI

combines the power of OpenAI’s GPT models with Microsoft’s Azure cloud platform. This integration provides robust enterprise-level security, compliance, and availability while delivering powerful AI capabilities to your application's end users. With Azure OpenAI, you also benefit from seamless integration with other Microsoft services, making it ideal for organizations already using the Azure ecosystem.

Benefits of using Azure OpenAI:

• Enterprise-grade security and compliance standards, including regional data hosting options.

• Integration with other Azure tools and services for enhanced functionality.

• Flexible scaling to accommodate varying levels of user demand.

• Support for high-availability setups, ensuring consistent performance.

Anthrophic

Benefits of using Anthropic:

• A strong emphasis on safety, ethical considerations, and AI alignment.

• Excellent for conversational use cases and creative writing needs.

• Simplified integration process with clear documentation and support.

• Scalable solutions that maintain consistency and reliability.

Additional Considerations

Other Resources

Overview

This page discusses how to configure Azure OpenAI as a provider for the within the Beefree SDK Developer Console. If the AI Writing Assistant AddOn is already enabled for your application, and you'd like to switch providers, take the steps outlined in the section of the to enable Azure OpenAI as your new provider.

Prerequisites

Prior to getting started, ensure you have the following:

• Beefree SDK .

• An Azure OpenAI account, API Key, URL Provider, and Deployment ID.

• The AI Writing Assistant AddOn enabled in the .

Configuration Steps

Take the following steps to configure this provider:

1. Log in to the .

2. Navigate to the application with the AI Writing Assistant enabled.

   1. Click Details.

3. Navigate to the AddOns under Application configuration section.

   1. Click View more.

4. Click the Manage Providers tab.

5. Click Add provider.

6. Complete the required information.*

7. Click Save to save your provider configuration.

Shared Logic Considerations

Consider the following shared logic when integrating the AI Writing Assistant AddOn and Azure OpenAI as a provider:

Additional Considerations

Overview

The Token Upselling feature is a notification banner that you can integrate within your OpenAI AddOn. This notification banner informs your application end users of when their available tokens are running low and when they are completely out. Both notification banners display an option for the end user to purchase additional tokens. These notification banners support a healthy token management workflow, and help avoid any potential interruptions in the end user’s workflow through transparently informing them about their available tokens.

The following notification banner will appear to an end user when their tokens are running low. “Running low” is defined as when an end user has a remaining token balance equal to or less than 20 percent of their initial token count.

Note: You can edit the notification banner trigger to a remaining percentage other than the default 20 percent. Reference the Customize Notification Trigger to learn more about how to change this percentage.

The following notification will appear to an end user when they no longer have any remaining tokens. This is triggered when tokenCounter is greater than or equal to tokensAvailable. For reference, tokenCounter refers to the amount of tokens an end user has used since their initial token balance.

The text inside the banner notifications is customizable. Reference the Customize Notification Banner Text section to learn more about customizing the notification banner text within your application.

Read this article to learn more about configuring token upselling within your host application.

Prerequisites

Prior to getting started with the configuration, ensure you have the following:

• Superpower or Enterprise plan

• An OpenAI AddOn within your application

Configuration Steps

This section discusses the configuration steps you need to follow to integrate the Token Upselling feature into your web application.

To integrate the Token Upselling feature into your application, take the following steps:

Enable Token Upselling

To enable Token Upselling, you need to pass your configuration code to the AI Integration AddOn within the Developer Console.

When you pass your code, ensure you define the following variables:

• tokenCounter: Counts how many tokens an end user has used in total

• tokensAvailable: Displays how many remaining tokens an end user had

• isUpsellEnabled: A boolean that confirms whether or not the Token Upsell feature is enabled

Note: If you do not provide tokenCounter and tokensAvailable, the end user will have unlimited access to the AI functionality within your application.

The purpose of the following code is to initialize and track the number of tokens available and the number of tokens used. It also checks if the upsell feature is enabled.

Limit Usage

When you define tokensAvailable and tokenCounter, you limit the end user’s token usage.

isPromptDisabled automatically disables the ai-integration when the number of tokens used by an end user (tokenCounter) is greater than or equal to the number of tokens available (tokensAvailable).

The following code displays an example of the AddOn AI Integration configuration code.

onInfo Callback

The purpose of the onInfo callback in the following code snippet is to handle information messages related to the usage of the ai-integration AddOn. It checks if the code of the infoMessage is 1000 and if the handle is ai-integration. If both conditions are met, it updates the AddOn settings and reloads the configuration.

The code works by:

1. Retrieving the handle from the infoMessage.

2. Checking if the handle is ai-integration.

3. If the handle is ai-integration, retrieve the totalTokens from the infoMessage.

4. Updating the tokenCounter by adding the totalTokens.

5. Creating a newConfig object with the updated tokenCounter and other settings.

6. Reloading the configuration by calling bee.loadConfig(newConfig).

Trigger the Handler Function

The purpose of the "upsell" action is to trigger the handler function, which, based on the following code sample, increases the number of tokens available by 1000 and returns an object with updated settings for the ai-integration add-on.

The handler function is a function that is executed when the upsell action is triggered. It has two parameters: resolve and reject. The resolve parameter is a function that is called when the handler function successfully completes its task, and the reject parameter is a function that is called when the handler function encounters an error or fails to complete its task.

Content Dialog Config

Configure the content dialog and upgrade path to enable the token upselling notification banner. This configuration is important because it defines the steps the end user takes to purchase more tokens.

The following code displays an example of how to configure the content dialog.

Configure Resolve

Ensure you define how your host application will resolve the upsell feature. You can do this by returning the configuration on how to handle the content dialog within the addOn configuration. The code provided in the previous step displays an example of this.

Settings, Data Types, and Defaults

The following table shows a list of what your web application can pass to the Beefree SDK in the addOn configuration of ai-integration.

Disable the Regenerate Button

The regenerate button appears after an end user submits their first prompt to OpenAI through the OpenAI AddOn. This button enables the end user to resubmit the same prompt to OpenAI in order to receive a newly generated response. This is helpful when an end user may want a variety of prompt responses to select from. However, each regenerated response incurs additional token usage and costs. This section will discuss how to disable the regenerate button in the event you would like to remove it from your application’s user interface.

Image 1.0 shows the regenerate button as an example at the bottom of an AI generated prompt response.

To achieve this, configure the isRegenerateEnabled setting to false.

The following example displays the sample code for the regenerate button.

Customize Notification Banner Trigger

The default trigger for the upsell notification banner is when an end user has used 80% of their initial tokens, and only has 20% of their initial tokens available. These percentages are customizable based on your use case. You can edit the notification banner to trigger at any percentage of the initial token count that best works for your host application.

Take the following steps to customize your notification banner trigger:

1. Pass upsellTrigger to the initial AddOn configuration

Customize Notification Banner Text

This section discusses how you can customize the notification banner text. For reference, the notification banner has the following default message:

“You’re out tokens. Purchase more”

To edit the notification banner text, take the following steps:

1. Identify the Template: Locate the notification template you want to customize. In this example, the template is specified with a custom language ID: `bee-common-component-ai.no-token-message`.

1. Understand the Template: Read and understand the original template text, which is "You're out of {tokenLabel}. {ctaLabel} to continue." This template includes two placeholders: {tokenLabel} and {ctaLabel}.

1. Understand the Default Behavior: Understand that by default, the template includes a Call-to-Action (CTA) button represented by the `{ctaLabel}` placeholder.

2. Determine Your Customization Needs: Decide what changes you want to make to the template.

   Options include:

   1. Removing the CTA button entirely.

   2. Changing the CTA button label.

   3. Reordering the text within the template.

3. Create a Custom Language Entry: If you want to customize the template, create a custom language entry. This entry should have the same custom language ID: `bee-common-component-ai.no-token-message`.

1. Modify the Template: Customize the template in your custom language entry according to your needs. For example:

   • To remove the CTA: "You're out of {tokenLabel}."

   • To change the CTA label: "You're out of {tokenLabel}. Click here to refill."

1. Implement the Custom Language Entry: In your web application code, replace the default template with the custom language entry you've created. Ensure that you use the correct custom language ID when accessing the text.

Configure Image Tokens

Code Explanation

1. AddOns Configuration: This section defines the available add-ons, each with a unique identifier and specific settings related to tokens and images.

2. onInfo Callback: This function handles info messages (with code 1000) and updates the settings for the relevant add-on based on usage.

3. Content Dialog (Upsell): This section manages upsell interactions, increasing the available tokens or images and updating the settings accordingly.

Feature Limitations

This section discusses the Token Upselling feature limitations:

• Customization features only extend to the text within the notification banner, and are not available for the design of the notification banner.

Billing

The only billing related to this feature is on OpenAI’s end with token purchasing through use of your OpenAI API key.

Error Handling

This section discusses the error handling for token upselling. If an error occurs, end user’s will receive the following message:

“Something went wrong. Retry your request after a brief wait.”

The following image shows an example of how this message will appear within the user interface.

Additional Considerations

Read this technical documentation to learn more about how to configure AI within your host application.

Overview

AI addresses common issues in crafting effective subject lines, pre-headers, and titles, such as vague messaging, lack of urgency, and limited personalization. By utilizing AI, users can generate compelling copy for email campaigns and landing pages. The key benefits include optimizing title formats for character count and mobile responsiveness, avoiding common mistakes, and expediting the copy creation process. This tool aims to enhance efficiency in marketing endeavors by providing a solution to errors commonly encountered in title and subject line composition. The feature is applicable to both Page and Email applications within the builder.

Prerequisites

• Beefree SDK Superpowers or Enterprise plan subscription

• OpenAI API Key

• within your Beefree SDK Developer Console

Activation Steps

Learn more about how activate this feature for email and page builder respectively.

Email Builder

To activate AI Generated Meta tag fields for your email builder application, take the following steps:

1. Sign into your

2. Navigate to your application’s settings

3. Toggle on Enable Subject - Meta tag

4. Toggle on Enable Preheader - Meta tag

Page Builder

To activate AI Generated Meta tag fields for your page builder application, take the following steps:

2. Navigate to your application’s settings

3. Toggle on Enable Title - Meta tag

4. Toggle on Enable Description - Meta tag

Configuration Steps

This section outlines the steps for configuring this feature within your host application.

To configure AI Generated meta tag fields within your host application, take the following steps:

1. Enable the “ai-integration” AddOn

2. Add the metadataGeneration parameter

3. Set the parameter to true is your configuration code

The following code displays an example of the enabled feature.

Disable AI Generated Meta Tag Fields

To disable the AI Generated Metadata feature, set metadataGeneration to false in your code.

The following code sample displays the disabled feature.

Multi-Language Templates Compatibility

AI Generated Titles, Descriptions, Preheaders, and Subject Lines is compatible with Multi-language templates.

To use both Multi-language templates and AI-Generated Titles, Descriptions, Preheaders, and Subject Lines, take the following steps:

1. Perform the Multi-language Configuration Steps

2. Perform the AI-Generated Titles, Descriptions, Preheaders, and Subject Lines Configuration steps

3. Test the AI-generated content in a few different languages

4. Confirm everything works as intended

Troubleshooting

If AI-driven generation fails, check the OpenAI AddOn configuration. Ensure your OpenAI API key is working properly, and that the AddOn is configured correctly within your Beefree SDK developer Console.

Additional Considerations

• Customers will be billed through their OpenAI accounts for AI generation-related features. This is done through connecting their OpenAI API key in the Beefree SDK Developer Console.

Introduction to Brand Tone

The Apply a Brand Tone feature is an optional enhancement to the . This feature allows your application's end users to define which brand tone they want the AI Writing Assistant to use when generating text. This definition provides OpenAI with additional brand tone context it considers when generating text to return to your end user. The result is more precise, accurate, and useable copy for your application's end users.

By configuring the to reflect a specific brand tone, you empower end users to create designs that consistently align with their brand identity, reducing the need for manual adjustments to the AI's responses. This feature can improve workflows through organic and beneficial adoption of the , positioning your application as a powerful tool.

To learn more about the end user experience and what it looks like to utilize this feature on the frontend, visit the white label end user documentation. The markdown file is also available in our .

Prerequisites

Prior to getting started, ensure you have the following:

• A

• The AI Writing Assistant AddOn enabled in the .

• OpenAI API Key

Integrating Brand Tone

This section will walk you through how to add the Apply brand tone option to the integrated within your host application.

At a high-level, this section will cover how to take the following steps and successfully integrate Brand Tone:

Configure the AI Writing Assistant with the Brand Tone Settings

Take the following steps to configure the AI Writing Assistant to include Brand Tone:

1. Add the ai-integration AddOn to your beeConfig object under the addOns array.

2. Add the isBrandTonesEnabled setting and set the boolean to true. This is the only required setting to enable this feature.

3. (Optional) Customize the settings for the Brand Tones feature to allow users to add, edit, delete, or select tones based on your application’s needs.

Sample Code for Brand Tones Settings

Available Settings for Brand Tone

You can control the different settings for the Brand Tone using the following booleans. You can use these boolean flags to allow or restrict user actions.

For example:

• Set isBrandTonesEnabled: true if you want to enable the Brand Tones feature.

• Set canDeleteBrandTones: false to prevent end users from deleting existing tones.

The following table provides details about each setting and how you can customize them.

Add Hooks for Data Storage

This section explains how to add hooks for data storage and management.

Introduction to Hooks

Hooks allow your application to store and manage Brand Tone data. By defining the brandTone hook, you ensure communication between your system and Beefree SDK, enabling users to create and manage Brand Tones effectively.

Step-by-Step Instructions

1. Define the Hook

Add the brandTone hook to your beeConfig object. This hook handles all Brand Tone-related actions like retrieving, saving, and deleting tones.

Sample Code:

2. Implement the Handler Logic

The brandTone hook supports various actions.

The handler receives the resolve and reject methods to fulfill the Promise for the requested data or action. Use reject only for issues encountered on your application's side, such as errors in data retrieval. Always call resolve after processing the data within your system.

Alongside resolve and reject, the handler also receives an object containing action and data properties. The action determines the specific scenario in the Brand Tones flow, while the data is used to store any necessary changes.

Refer to the table below for details on when and how each action will be triggered.

Additional Considerations

• The Brand Tone feature is available only through the AI Writing Assistant AddOn with OpenAI as the provider.

• Configuring hooks for data storage is required to enable this feature successfully.

• Thoroughly test your implementation to ensure smooth communication between the SDK and your system.