LogoLogo
Try it outResourcesAPIsAddOnsBook a demo
  • Getting Started
    • Introduction to Beefree SDK
      • Create an Application
      • Installation and Fundamentals
        • Configuration parameters
          • Configuration Reload
          • Workspaces
          • Debugging the Beefree SDK Editor
        • Methods and Events
        • Authorization Process
        • How the UID parameter works
        • Set up two-factor authentication
        • Naming conventions
      • Development Applications
      • Manage Users
      • Manage Subscriptions
      • Installation and Fundamentals
    • Tracking Message Changes
    • Sample Code
    • Release Candidate Environment
  • Visual Builders
    • Email Builder
    • Page Builder
      • Integrating Page Builder
      • Embedding videos in a page
    • Popup Builder
      • Popup Builder - Getting Started
      • Testing and Integrating
      • Setting layout and size
        • Advanced settings
    • AI-Driven Design Creation
  • APIs
    • Content Services API
      • Authentication
      • Export
      • Convert
      • Row Processing
      • AI Collection
      • Brand Style
    • Template Catalog API
      • Authentication
      • Templates
      • Categories
      • Collections
      • Designers
      • Tags
    • HTML Importer API
      • Authentication
      • Import HTML
  • Forms
    • Form Block
    • Integrating and using the Form block
      • Passing forms to the builder
      • Form structure and parameters
      • Form layout customization
      • Allowed form fields
      • Edit form field modal
  • Rows
    • Reusable Content
      • Create Reusable Content
        • Pre-build Reusable Content
          • Implement Custom Rows
        • Save Reusable Content
          • Implement Hosted Saved Rows
          • Implement Self-hosted Saved Rows
            • Self-hosted Saved Rows Concepts and Tutorial
      • Sync Reusable Content
        • Implement Synced Rows
        • Initialize Edit Single Row Mode
      • Manage Reusable Content
    • Storage for Reusable Content
      • Hosted Saved Rows
      • Self-Hosted Saved Rows
  • File manager
    • File manager application overview
      • Mime Types and Groups
  • Server-side configurations
    • Server-side options
      • Toolbar options
      • Storage options
        • Configure your AWS S3 bucket
        • Connect your file storage system
      • Content options
      • Services options
      • Undo & Changes history
      • Custom JavaScript Libraries Injection
  • Other Customizations
    • Advanced options
      • Special Links and Merge Tags
      • Content Dialog
      • Custom Color Palette
      • Font management
      • Roles and Permissions
      • Smart Merge Tags
      • Commenting
      • Custom Attributes
      • Meta Tags
      • Custom Languages
      • Display Conditions
      • Advanced Permissions
      • Custom File Picker
      • Custom Headers
    • Appearance
      • Content Defaults
      • Custom Sidebar Position
      • Content Tile Sorting
      • Content Tile Grouping
      • Loading Spinner Theme
      • Custom Tab Layout
      • Themes
      • Custom CSS
        • Change Log
    • AMP for Email
    • Collaborative Editing
      • Co-editing Integration Guide
    • Mobile Design Mode
    • Multi-language Templates
    • Cards Style and Image Round Corners
    • Hover Effect for Buttons
    • Content Area Padding
    • Line Height
  • Data Structures
    • Getting Started
    • Schema Catalog
    • Simple Schema
      • Template Schema
      • Definitions Schema
      • Row Schema
      • Column Schema
      • Title Schema
      • Image Schema
      • Button Schema
      • Paragraph Schema
      • HTML Schema
      • Menu Schema
      • List Schema
      • Icon Schema
      • Divider Schema
    • Row Metadata
    • Form Validation Schema
    • Comments Schema
      • Change Schema for Comments
  • Builder AddOns
    • AddOns
      • AddOns Overview
      • Partner AddOns
        • Partner AddOns directory
        • Installing Partner AddOns
        • DeepL
        • Stability AI
        • Azure AI Vision - Image Analysis
          • Alternate Text Generation with AI
          • AI Alt Text Bulk Generation
        • AI Writing Assistant
          • Available Providers
            • OpenAI
            • Azure OpenAI
            • Anthropic
          • AI Providers and Data Security
          • AI-Generated Meta Tag Fields
          • Token Upselling
          • Apply a Brand Tone
        • Custom AI Writing Assistant
      • Custom AddOns
        • AddOn Development
        • Contribute to the Partner AddOn Marketplace
      • AddOns Configuration
      • AddOn FAQs
  • Resources
    • Error Management
      • onWarning
      • Beefree SDK Editor Errors
      • File System Provider errors
      • JSON Parser errors
      • Template Validation and Update
      • Template validation and update errors
    • Scheduled maintenances
Powered by GitBook
LogoLogo

Policies

  • Privacy & Cookies
  • Terms of Services
  • GDPR Compliance
  • Trust Center

Contact Us

  • Submit a request
  • Book a demo
  • Report a security issue

Resources

  • Developer website
  • Create a Developer Account

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

On this page
  • Overview
  • Prerequisites
  • Configuration Steps
  • Install and Enable the AddOn
  • Content Dialog Configuration
  • Advanced Permission Management
  • Settings
  • Edit the Button Label
  • Edit Label Example
  • Additional Considerations

Was this helpful?

Export as PDF
  1. Builder AddOns
  2. AddOns
  3. Partner AddOns

Custom AI Writing Assistant

Learn how to connect your large language model (LLM) and create your own AI Writing Assistant with Beefree SDK.

PreviousApply a Brand ToneNextCustom AddOns

Last updated 7 months ago

Was this helpful?

This AddOn is available on Beefree SDK and VPC plans.

Overview

The Custom AI Writing Assistant AddOn enables host applications to integrate their own LLM models with Beefree SDK. This allows host applications to provide their end users with advanced AI writing capabilities that are specific to their domains. Using the , this AddOn employs the same entry points as the , allowing full control over the AI experience within your application. Once your Custom AI Writing Assistant AddOn is fully configured, the displays the modal you created within the user interface when end users click the Write with AI button in the sidebar.

This AddOn is compatible with the following modules:

  • Title

  • Paragraph

  • List

  • Button

With this AddOn, you can deliver a centralized assistant experience that caters to your specific application needs. By integrating your own LLM model, you reduce irrelevant content in AI-generated outputs and ensure consistency in how the AI generates content, all while aligning it with your brand’s voice and tone. This increased level of control helps increase AI adoption and usage across your customer base, because your end users are engaging with an AI tool that feels familiar and reliable.

Integrating your custom LLM also allows for continuous improvement, because the model can be trained and refined based on user feedback and real-world interactions. This results in more accurate suggestions, higher relevance, and greater user satisfaction, empowering your end users to create better content with minimal effort.

The following video displays an example of a with a custom built user interface that is connected to the Custom AI Writing Assistant AddOn.

Prerequisites

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

  • Enterprise plan

Configuration Steps

This section outlines the steps you need to take to integrate the Custom AI Writing Assistant AddOn into your web application.

These steps are the following:

Install and Enable the AddOn

Take the following steps to install and enable the AddOn:

  1. Click on the Details button corresponding to the application you'd like to configure the AddOn for.

  2. Go to the AddOns section and click Browse AddOns.

  3. Search for and select the Custom AI Writing Assistant AddOn.

  4. Once selected, click Install.

  5. After installation, toggle the Enable button and save your changes.

Note: You can revisit this page in the future by clicking Edit in the AddOn card to turn the AddOn on or off as needed.

Content Dialog Configuration

The following code snippet displays an example configuration:

contentDialog: {   
  customLLM: {
    label: 'Custom LLM',
    handler: (resolve, reject, args) => {
      resolve({ generatedText: `This is module ${args.moduleUUID}, I'm a ${args.moduleType} and my content was ${args.moduleContent}` })
    }
  }
},
  1. Args Parameter Details The args parameter contains the following:

    Field
    Explanation

    moduleUUID

    Unique identifier for the module

    moduleType

    Type of the module (e.g., TITLE, PARAGRAPH, LIST, BUTTON)

    moduleContent

    Current content of the module unless it matches the default content. If it does, the value will be an empty string.

  2. Configure Resolve The content dialog must resolve an object corresponding to this interface:

    {
      generatedText: string
    }
    • Handling Lists: If you are working with a list, ensure the generated text separates each item with a line break. The text will then be split on each line break to construct the list in the stage. The syntax for a line breaks is \n.

Advanced Permission Management

addOns: [
  ...,
  {
    id: "custom-ai-integration",
    enabled: true,
    settings: {
      isButtonDisabled: false
    }
  },
]

Disable the AddOn for Specific Blocks

aiIntegration: {
            locked: false,
            show: false
          }

To hide the AddOn for a specific module, the show property should be set to false.

Settings

The table below outlines the settings available for the ai-integration AddOn in the Beefree SDK:

Setting
Data Type
Default
Description

enabled

boolean

true

If false, the “Write with AI” button is hidden

isButtonDisabled

boolean

false

If true, the “Write with AI” button is visible but disabled

Edit the Button Label

After your activate and configure this AddOn, a Write with AI button will appear to your application's end users for the applicable content blocks.

The following video displays how the Write with AI button inside the Content Properties once a content block is dragged and dropped onto the stage.

The following section provides an example of changing the Write with AI button text to "Generate copy". You can follow the same approach in the following example, but replace "Generate copy" with the text you'd like to use for your label.

Edit Label Example

To change the "Write with AI" button label to "Generate copy" using the mailup-bee-common-component-ai.config-label, follow these steps:

  1. Set up the BeeFree SDK: Initialize your beeConfig object as usual.

  2. Add the translations object: In your beeConfig, include the translations object where you will specify the label override.

  3. Override the label: Inside the translations object, add the "mailup-bee-common-component-ai.config-label" key and set its value to "Generate copy".

var beeConfig = {
    uid: config.uid,
    // additional configuration properties...
    translations: {
        "mailup-bee-common-component-ai.config-label": "Generate copy"
    },
    // other properties...
};

This will update the button text from "Write with AI" to "Generate copy."

Additional Considerations

Consider the following when using the Custom AI Writing Assistant AddOn:

A custom LLM service to call from within the

Access to the

Log in to the .

Once you activate the Custom AI Writing Assistant AddOn with your own LLM, you cannot activate the , which uses either OpenAI or Azure OpenAI models. Only one of these two AddOns can be active.

To use the Custom AI Writing Assistant AddOn, you need to configure the . This is important for defining how your custom LLM is called and how the response is handled.

You can control the visibility and state of the Write with AI button using settings. For example, disabling the AddOn will hide the button, while turning the button off will keep it visible but non-functional.

The following code snippet displays an example configuration for :

You can disable the Custom AI Writing Assistant for specific content blocks using . As a reminder, this AddOn is compatible with the following content blocks:

You can use to disable access to a specific block using the following:

You can reference the as an example of how engaging with AI features looks like for end users.

We are committed to maintaining the highest standards of security to protect your data at every level. For more information on our security practices, visit our .

Content Dialog
Developer Console
Beefree SDK Developer Console
AI Writing Assistant AddOn
Content Dialog
Advanced Permission
Advanced Permissions
Advanced Permissions
Button
List
Paragraph
Title
Advanced Permissions
AI Writing Assistant
End user documentation
GDPR and Cybersecurity page
Install and enable the AddOn
Configure the Content Dialog
Manage Advanced Permissions
Enterprise
Content Dialog
AI writing assistant
Content Dialog
Content Dialog