AI Chat

This article describes the AI Chat component and its properties

The AI Chat Widget is a component that allows for conversation with AI, connecting with OpenAI via an OpenAI API key.

AI Chat Properties

The AI Chat component properties are organized into LAYOUT & POSITIONING, GENERAL, MODEL SETTINGS, STYLING, and DYNAMIC VISIBILITY sections.

This guide will describe all sections besides the Layout & Positioning and Dynamic Visibility sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this Set Property Values article for more information on using the different methods.


GENERAL

  • OpenAI Key - Enter a key generated by OpenAI. This can be done via OpenAI on their API Platform. Click this link to create your own API key.

  • Placeholder Text - Generate placeholder text for the message bar. When nothing has been typed in, this text will display.

  • Rows in Message Input - define the number of rows of text that are displayed in the Message input before the input starts to scroll.

  • Personality - Select an item from the dropdown to define an AI personality. These options provide pre-canned, editable content for the Personality Description field.

For example: ChatGPT Default -

"You are a helpful and friendly AI assistant. Your goal is to assist users with a wide range of questions, from technical topics to general conversation. You provide clear, engaging, and informative responses while maintaining a professional yet approachable tone."

  • Personality Description - Define your own, or edit a pre-canned personality description.

AI personalities can be used to customize the AI chat responses and conversations to fit the specific user experience. For example, you could prompt the AI to respond as if it were a storyteller or an analytical expert, and each of its responses would be adapted to that style.

The AI Chat widget with the personality "You are a storyteller, big on descriptive words and expressive language."
  • Enable live response - Select this option to enable live responses, which disables the 'thinking bubble' and allows responses to appear as they are generated. This is checked by default.


MODEL SETTINGS

  • Model - Select from the dropdown and define the OpenAI model used.

OpenAI offers many models, each serving a specific purpose. GPT-4.1 and GPT-4.1 mini are the most flexible, which is why they power ChatGPT. o3, o3-pro, and o4-mini deliver advanced reasoning for solving complex problems, while GPT-4.1 nano focuses on speed and affordability. There is certainly a significant amount of overlap in the capabilities of the different models, but generally, one should stand out as the best balance between power and price.

  • Temperature - adjust the creativity of the AI model. Ranges from 0 to 2, from least to most creative. The higher the value, the more inconsistent and ambiguous it can be.

  • Max Tokens - Define the maximum number of tokens that can be used with the AI Chat model.

  • Tokens are units of text that AI models use to understand and generate responses.

    • 1 token = ~ 4 characters or ¾ of a word

      • 1 million tokens = ~750,000 words (about a whole book)

      • You can use tools such as Tozenizer to see how units of text are ready by OpenAI

  • There are input tokens (your prompt) and output tokens (the model's response)

    • Example: If you send 100 tokens as input and receive 200 tokens as output, you'd be charged for 300 tokens.


STYLING

  • Accent Colors - Use the input to define a color hex code, or select the Color Picker to choose a color. When a color is selected, shades and tints are automatically determined on the component.

  • Opacity - Set the opacity of the AI Chat component. This property can be bound to the properties panel.

  • Font - select from the dropdown to define the font used by the AI Chat component.

Last updated

Was this helpful?