Skip to Content
TutorialAI Text Completion

AI Text Completion

Introduction

  • Goal: To enhance user experience by providing intelligent, real-time text predictions based on initial input.
  • Which Method to Choose?
    • Method 1: Multi-Option List
      • Overview: Provides multiple distinct AI-generated options for the user to choose from, saving all suggestions to the database.
      • Applicable Scenario: Search bar suggestions, AI brainstorming tools, or email subject generators.
    • Method 2: Real-Time Streaming
      • Overview: Offers a single, real-time, character-by-character prediction that acts as an inline suggestion to seamlessly complete the current sentence.
      • Applicable Scenario: Fast chat applications, text editors, or quick form filling.
  • Core Logic:
    • Method 1: Triggered by input -> Async Actionflow -> AI Agent (Structured Array) -> Database Table -> UI List (Subscription mode).
    • Method 2: Triggered by input -> AI Agent (Streaming Output) -> Page Variable -> UI Text component.

Method 1: Multi-Option List

This method generates a list of suggestions stored in the database, allowing users to choose from several distinct completions.

Data Storage

To handle the asynchronous nature of AI generation, we store suggestions in a table so the frontend can “subscribe” to them.

  • Data Model: Create a table named suggestion_record.
Field NameTypeNote
user_inputTextThe fragment typed by the user.
suggested_textTextThe single completion string from AI.
conversation_idBigIntThe unique session ID for the AI generation.

AI Agent Configuration

The agent must return structured data to allow the backend to process multiple options.

  1. AI Studio: Create an agent Agent_Input_Prediction.
  2. Inputs: Add user_input (Text).
  3. Prompt Template:
    • Role: You are a predictive text assistant.
    • Goals: “Based on \{Input.user_input\}, return 3 different completion options. Max 10 words each.”
  4. Output Configuration: Set to Structured. Define an ARRAY(STRING) field named suggestions.

Actionflow Construction

  • Name: AI Predictive Text Input
  • Execution Mode: Set to Async.

  • Nodes:
    1. Input Node: Define user_input (Text).
    2. AI Node: Select Agent_Input_Prediction. Bind its input to the Actionflow parameter.
    3. Loop (loop save suggestions):
      • Datasource: Select the suggestions array from the Agent_Input_Prediction (Agent_Input_Prediction.data.suggestions).
    4. Insert Data (save suggestion): Inside the loop, insert a record into suggestion_record.
      • user_input: Bind to the Actionflow’s user_input.
      • suggested_text: Bind to item (the current suggestion in the loop).
      • conversation_id: Bind to the id from the Agent_Input_Prediction .

UI Construction & Interaction

  1. Input Trigger: On the Text input On change event, add a condition STRING_LEN(Inputs.Text input) >= 3. If met, run the Actionflow.

  1. The List: Place a Conditional Container below the input, setting its display condition to STRING_LEN(Inputs.Text input) >= 3. Inside it, place a List component.

  • Data Source: Remote -> suggestion_record.
  • Request Type: Subscription (Required to see data as it’s inserted). Limit the data to 3.
  • Filter: user_input equals Inputs.Text input.
  • Sort: Sort by ID in Descending order to ensure the latest predictions appear at the top.

  • Bind the text component inside the list to display the suggestion.

  1. Fill Action: On clicking the List item, use “Set input component value” to fill the input with item.suggested_text. (Toggle OFF “Trigger object value change behavior”)

Verification

  1. Trigger: Type a short phrase (at least 3 characters) into the input field.
  2. Observe: After a brief processing moment, a list containing 3 different AI-generated completion options will appear below the input.
  3. Interact: Click on any of the suggested options.
  4. Result: The input field is instantly populated with your selected text, and the suggestion list disappears.

Method 2: Real-Time Streaming

This method provides an immediate, character-by-character prediction that streams directly into the UI.

Logic & State Configuration

Instead of a database, we use a Page Variable for temporary storage and immediate display.

AI Agent Configuration

  1. AI Studio: Create an agent (e.g., Agent_Text_Prediction).
  2. Prompt Template:
    • Role: You are a predictive text assistant.
    • Goals: “Based on the text provided: ‘{Input.user_input}’, predict and complete the content.”
  3. Output Configuration: Set type to Plain text.
  4. Streaming: Toggle Streaming output to ON.

Page Variable Setup

  1. In the Pages -> Data panel, create a Page variable named user_input (Type: Text).

UI Construction & Interaction

  1. The Canvas:

    • Place a Text input for the user.
    • Place a Text component bound to Page variable.user_input.

  2. Streaming Interaction:

    • Select the Text input. Under Interaction -> On change:
    • Condition: STRING_LEN(Inputs.Text input) >= 3.
    • Action: AI -> Start conversation.
    • Config: Select the streaming agent and set Append streaming output to -> Page variable.user_input.

  1. Accept Suggestion:
    • Select the Text component (the suggestion). Under On click:
    • Action 1: “Set input component value” -> Target: Text input -> Value: Page variable.user_input. (Toggle OFF “Trigger object value change behavior”)
    • Action 2: “Set page variable” -> Reset user_input to Empty Text.

Verification

  1. Trigger: Type a short phrase (at least 3 characters) into the input field.
  2. Observe: Below the input box, the predicted text will dynamically generate, appearing character-by-character in real-time.
  3. Interact: Click on the generated prediction text.
  4. Result: The content automatically fills into the main input box, and the temporary prediction below is immediately cleared.
Last updated on
Automated Image Description WorkflowAI Product Image Generator