# How to build advanced applications using Flow

{% embed url="<https://youtu.be/qR-3QyQ6UKo>" %}
Quick tutorial with steps to build an app using Flow
{% endembed %}

After selecting Flow as your orchestration method on the App Details page, click the ‘Next’ button at the bottom right corner to proceed. This will direct you to the Configure Bot page, where you can seamlessly integrate your selected Flow and fine-tune your bot’s settings.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FKrqM1qqWZ8CQB1m0Lenq%2Fimage.png?alt=media&#x26;token=5d326e3d-eb7c-419d-abc2-421329550c24" alt=""><figcaption></figcaption></figure>

### **Configure Bot** <a href="#configure-bot" id="configure-bot"></a>

In this section, you can fine-tune and personalize your bot’s settings by integrating the chosen orchestration method and configuring essential parameters to meet your unique business needs. These adjustments ensure smooth bot operation within your workflow, offering a streamlined, personalized, and outcome-focused experience.

**Steps to configure the bot:**

#### **Select the Flow** <a href="#select-the-flow" id="select-the-flow"></a>

The flow defines the behavior and interaction patterns of your bot. From the available list of flows, choose the one that best matches the desired interaction model for your bot.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FUaYLoQUiZXlK5ew2Cz7r%2Fimage.png?alt=media&#x26;token=163b265a-6053-47fb-91ed-968620e25561" alt=""><figcaption></figcaption></figure>

**How to add Flow:**

* Click ‘Add’ to open the flow selection dialog.
* Choose an existing flow from the list to start building a ZBrain AI app.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2F735nSvfpaPAjdwylgyDI%2Fimage.png?alt=media&#x26;token=d177496e-c470-4762-9f1a-3954f7720ce6" alt=""><figcaption></figcaption></figure>

* Upon selection, the flow governs task execution and subsequent user interactions within the application.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2Fh9TKrJTvXbjCeKUSmOT6%2Fimage.png?alt=media&#x26;token=d050ffea-ccb3-47d8-880c-e59330aaef20" alt=""><figcaption></figcaption></figure>

### **Add guardrails** <a href="#add-guardrails" id="add-guardrails"></a>

Guardrails act as the app’s built-in protective layer, ensuring every interaction stays compliant, secure, and aligned with the organization's standards. Enabling them proactively helps prevent policy violations and jailbreak attempts before they ever reach production. To add a guardrail, follow the steps below:

* Click ‘**＋ Add Guardrails’**.
* A right-hand side panel titled **Add Guardrail Parameter** appears.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FyUitRxqjqSy0qQRp7qVy%2Fimage.png?alt=media&#x26;token=4c016b1e-32c3-4d19-bab2-ecb2400acb58" alt=""><figcaption></figcaption></figure>

Toggle on one or both options:

* **Input Checking** – screens every user prompt for policy violations (jailbreak detection, hate, self-harm, disallowed content) and blocks or sanitizes the request/response.
  * You can enable Input Checking to activate content-moderation filters, sexual content, harassment, hate, and dangerous content. Each filter is adjustable with intuitive slider controls, giving users fine-grained control over moderation thresholds.

    Each category can be tuned using a three-level slider:

    * **Block None** – No filtering applied. All content is allowed.
    * **Block Few** – Minimal filtering applied. Only severe or explicit cases are blocked.
    * **Block Most** – Strict filtering applied. Most flagged content is blocked.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FmQUn1z2GA06jPxgxQn1N%2Fimage.png?alt=media&#x26;token=9eda5a2c-cfbc-4318-91ae-583edaf64e67" alt=""><figcaption></figcaption></figure>

**Jailbreak Detection** – looks for prompt-injection patterns that try to override your system instructions and blocks or sanitizes the request/response.

* You can find the following jailbreak categories for more granular control and security oversight. You can enable or disable each category for Jailbreak Detection filtering based on your requirements:
  * System Override
  * Code Injection
  * PII Access

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FP4CThVVfeDbqYNt65aNO%2Fimage.png?alt=media&#x26;token=f4f0bb2b-eac5-4bc4-8d14-d4cacc90ba8b" alt=""><figcaption></figcaption></figure>

* **Output Checking** - ensures that your AI application's responses are factual, safe, and aligned with your knowledge base. This feature is particularly useful in retrieval-augmented generation (RAG) setups, where validating both the factual fidelity and safety of LLM outputs is essential. Output Checking evaluates model responses for the following risks:
  * Misinformation - Detects and flags outputs that may contradict the retrieved knowledge base content or include unsupported claims.
  * System Prompt Leakage - Identifies and prevents exposure of internal system prompts, hidden instructions, or instructions that could compromise the integrity of your application.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FYXkmc7rQQmsaIEf7YPCn%2Fimage.png?alt=media&#x26;token=d1073680-69bb-4966-8f72-d4fd3a8b3f22" alt=""><figcaption></figcaption></figure>

* **Hallucination Detection -**&#x54;his feature automatically validates AI-generated outputs against the linked Knowledge Base to detect factual inconsistencies or unsupported claims. If hallucination is detected, the app returns a fallback message, ensuring that only accurate, trusted responses are delivered. The following risks are evaluated through Hallucination Detection:
  * Irrelevant Content - This check identifies responses that do not address the user’s query or fall outside the intended context of the conversation.
  * Extra Speculation - This check identifies responses that contain unsupported assumptions, hypothetical claims, or unverifiable statements that are not substantiated by the provided knowledge base.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FAw63dL0jrwGNVkET7iGK%2Fimage.png?alt=media&#x26;token=05d0e327-9b7b-4308-9adb-d1b760a4d0d5" alt=""><figcaption></figcaption></figure>

Once guardrails are enabled, they appear in the main panel with a lock icon, indicating that they are active. You can reopen the panel at any time to disable or re-enable them.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FTaoQZWDgjyWSFjFkAlaL%2Fimage.png?alt=media&#x26;token=c910f5bf-a335-4d3d-b8c7-d16191c4f13b" alt=""><figcaption></figcaption></figure>

**Note:** The ‘＋ Add a guardrail parameter’ button remains available so you can attach future guardrail types as they become available in ZBrain.

After selecting the flow, click ‘Next’ to proceed to the Appearance page, where you will customize the visual and user interface elements of your app.

**From response to recall: Building context-aware apps with Flow integration**

Creating an effective app using ZBrain Flow involves more than just designing the logic; it requires thoughtful handling of how responses are delivered and conversations are managed across sessions. Two critical components in this process are app output and app previous conversations. While app output ensures that the right responses are returned to the app after a flow executes, app previous conversations help maintain continuity by referencing past interactions. These should be configured as part of the Flow to ensure the app delivers high-quality responses and retains contextual awareness across user sessions.

**App output**

The app output component returns the final flow's output to the app after executing the interaction. This step ensures the bot's responses are appropriately delivered and aligned with the defined flow behavior.

**Key fields to configure:**

* **Result:**\
  The chatbot’s response to the user will appear in this field.
* **Context:**\
  Specify the context or summary of the interaction. This provides valuable insights for reviewing past conversations and understanding user intent.
* **Instructions for the LLM:**\
  Provide specific instructions or prompts for the Large Language Model (LLM). These guide how the response should be crafted, whether you want it to be concise, detailed, empathetic, or task-oriented.
* **Model used:**\
  Choose the appropriate LLM that will generate the bot's response. This selection determines how advanced or creative the responses will be.
* **Temperature:**\
  Adjust the model’s creativity level.
  * A lower value (e.g., 0.2) delivers more deterministic and factual responses.
  * A higher value (e.g., 0.8) produces more diverse, creative, and open-ended replies.

> **Note:** The following fields, context, instructions for the LLM, model used, and temperature , will be logged in the query history logs of the application. These entries help ensure transparency, reproducibility, and improved review of past interactions.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FduMDDLGjvZxrtjMWe6mm%2Fimage.png?alt=media&#x26;token=a38094bd-f402-4aa0-a826-f33c0aa9160e" alt=""><figcaption></figcaption></figure>

**Managing conversational flow**

To make conversations feel continuous and intelligent, your app needs to remember what was previously discussed. The app previous conversations component in ZBrain allows your app to retrieve and use historical data to provide more personalized, context-aware interactions.

**Key fields to manage conversations:**

* **API key:**\
  Input your API key to authenticate access to the conversation logs and ensure secure data retrieval.
* **Select app:**\
  Choose the app whose historical data you want to access, especially important when working across multiple applications.
* **Select app sessions:**\
  Pick a session ID to retrieve specific past conversations. This helps your bot tailor its responses based on prior interactions from the same user.
* **Limit**:\
  Set how many past messages should be fetched (e.g., the last 10 queries). This keeps the context relevant without overwhelming the flow with too much history.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2Fe1OW4U455q16cZ4DBPNZ%2Fimage.png?alt=media&#x26;token=640c3d7e-ea36-4e18-9a4e-b1bad735b481" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FIWDSh7fbDl4TVsd7a6jC%2Fimage.png?alt=media&#x26;token=f0d3119d-4ab0-49b3-bab2-6a4dabcb782f" alt=""><figcaption></figcaption></figure>

**Why managing conversational flow matters:**\
By integrating past interactions, your app can maintain continuity, avoid repetitive responses, and build a more human-like relationship with users. This significantly improves the user experience by:

* Keeping responses relevant to the conversation’s history
* Personalizing outputs based on previous inputs
* Allowing the app to handle complex, multi-step interactions over time.

**2. Set appearance**

Here you can personalize the visual identity and the user interface of your app. The appearance settings help ensure that your app aligns with your brand's design guidelines, making it easier for users to engage with the bot.

**Steps to set the appearance:**

1. **Welcome message**
   * This message is shown to users when they first launch the app. It's their first interaction with the bot, so it should be welcoming and informative.
   * Enter a short, engaging welcome message that introduces the bot and guides users on what to expect.
   * **Example:** “Hello! I’m your virtual assistant. How can I help you today?”
2. **App name and description**
   * This helps users understand what the app is about right from the beginning. The app name and description provide context for the bot’s purpose.
   * Enter a name for your app.
   * Provide a brief description that clearly explains the app’s functionality and what users can achieve with it.
   * **Example:**
     * **App name:** "Smart Support"
     * **App description:** "A personal assistant to help you with customer service queries, 24/7."
3. **Sample questions**
   * Sample questions guide users on how to interact with the app, making the interaction smoother and more intuitive.
   * Add up to nine sample questions that users can refer to when they need guidance on what to ask the bot.
   * You can either enter these questions manually or click ‘Generate questions’ to have sample questions generated based on the bot’s capabilities.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FX5Uc9I7KDLJSQ6PALi5L%2Fimage.png?alt=media&#x26;token=6ae89014-5af7-403f-902b-7389b3e461db" alt=""><figcaption></figcaption></figure>

4. **Upload app logo and theme**
   * Branding is essential for a consistent user experience, and this setting allows you to upload your app’s logo and select a theme that reflects your brand’s identity.
   * **Upload app logo:** Click ‘Upload’ to choose an image file for your app's logo. This will be displayed at the top of the app and in other relevant sections.
   * **Select theme:** Choose a color theme that matches your brand’s design scheme. You can either select from predefined themes or customize the color palette to your liking.
5. **Bot name and icons**
   * This step allows you to personalize the bot itself by giving it a unique name and choosing icons that reflect its identity within your app.
   * **Bot name:** Enter the name you want your bot to be called. This name will be displayed when the bot interacts with users.
   * **Bot icon:** Choose an icon that represents your bot visually. This icon will appear in the app interface where the bot is visible.

<figure><img src="https://3781630280-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIbuSicczDKTyHzwzicar%2Fuploads%2FZxxLZyamOAGRRkjXO2qn%2Fimage.png?alt=media&#x26;token=2011588a-313c-4bfc-aea1-825218a1ac86" alt=""><figcaption></figcaption></figure>

### **Finalizing setup**

Once you have finished the customizations mentioned above, you will have the following options:

* **Click ‘Done’**
  * This will save all your settings and complete the configuration of your app. You will then be directed to the Overview Page, where you can manage other aspects of your application, such as monitoring bot performance or reviewing user interactions.
* **Click ‘I will do later’**
  * If you are not ready to finalize the appearance settings, you can choose to skip this step and configure the appearance at a later time. You can always return to the Appearance Page to make updates.
