LogoLogo
Documentation
DocumentationUptiq Agents
Documentation
DocumentationUptiq Agents
  • Getting Started
    • Introduction
    • Sign up to Developer Edition
    • Build Your First Agent
    • Developer Support
  • Core Concepts
    • Agent
      • Knowledge
      • Webhook
    • PII Masking
    • Sub-Agent
    • Intent
    • Workflow
      • Node
        • Input
        • Output
        • Loader
        • Display
        • API Node
        • Web Crawler
        • Table Write
        • Table Read
        • Ruleset
        • Upload Document
        • Javascript
        • Workflow
        • Loop
        • Document To Image
        • External Database
        • Storage Write
        • Storage Read
        • Fetch Document
        • Prompt
        • RAG Query
        • Vector Search
        • Emit Event
    • RAG
    • Model Hub
      • Entity Recognizers
    • Data Gateway
    • Rulesets
    • Code Snippets
    • Tables
    • Storage
    • Widget
  • Overview of GenAI
    • Introduction
    • Key concepts
      • Intent Classification
      • Inference
      • Generative AI Models
      • Large Language Models (LLMs)
      • Prompt Engineering
      • AI Agents
      • RAG (Retrieval Augmented Generation)
      • AI Workflow Automation
      • AI Agents vs LLM-based APPs
Powered by GitBook
On this page
  • Overview
  • Configurations
  • Example Use-Cases
  • Key Takeaways for Developers
Export as PDF
  1. Core Concepts
  2. Workflow
  3. Node

Display

Overview

The Display Node is designed to help developers show output messages or content to users during a conversation. It enables workflows to interact dynamically with users by presenting relevant information or actionable options.

The Display Node supports multiple content types, including:

  • Plain text messages.

  • Suggestions for quick replies.

  • Clickable links.

  • Charts (using Chart.js V4).

  • Report summaries.

  • Summary grids.

  • Tables with structured data.

This versatility ensures that the Display Node is adaptable for a variety of user-facing scenarios, from simple notifications to complex data visualizations.

Configurations

  1. Type: Defines the type of content to be displayed. Options include:

    • Text: Displays a plain text message.

    • Suggestions: Displays a list of quick reply options.

    • Link: Includes a clickable link with custom text and URL.

    • Chart: Displays data visualizations using Chart.js configurations.

    • Report Summary: Summarizes content with rich text and charts.

    • Summary Grid: Displays a grid-like layout for summary items.

    • Table: Presents structured data in tabular format.

  2. Text: The plain text message to be shown to the user.

  3. Suggestions: A list of actionable suggestions or replies for the user to select from.

  4. Link:

    • Link Text: The displayed text for the clickable link.

    • Link URL: The URL that the link navigates to.

  5. Chart:

    • Chart Label: Title for the chart.

    • Chart Config: Chart.js V4-compatible configuration object.

    • Height/Width: Optional dimensions for the chart.

  6. Report Summary:

    • Summary Label: Title for the summary.

    • Summary Content: JSON array with summary items (charts, rich text, etc.).

  7. Summary Grid:

    • Summary Label: Title for the grid.

    • Summary Content: JSON array with summary items in grid format.

  8. Table:

    • Table Label: Title for the table.

    • Columns: JSON array defining table columns.

    • Data: JSON array containing rows of table data.

    • Enable Export: Option to allow data export in CSV format.

Example Use-Cases

Example 1: Use of Display Node Text Type & Link Type. In this example, the Display Node is configured to present a clickable link to the user in a workflow. This setup demonstrates how the Link Type can be effectively used to deliver actionable content or provide access to external resources in a conversation. Workflow Steps:

  1. Fetch Document Node:

    • The workflow begins with the Fetch Document Node, which retrieves a financial contract file and provides its URL as part of the output.

  2. Show Clickable Link Node:

    • The Display Node is configured with the Link Type to present the user with a clickable link.

    • Link Text: The text displayed to the user is labeled as "Contract Summary".

  3. Show Message Node:

    • A Text Type Display Node follows, informing the user: "Use the link above to download the summary."

User Interaction in Chat Interface:

  • The user initiates the workflow by uploading a financial contract.

  • The system processes the file and displays the clickable link with the text "Contract Summary".

  • Upon clicking, the user is redirected to download the summary.

In this example, the Link Type and Text Type are used in tandem to deliver a seamless user experience:

  • The Link Type provides the user with direct access to a dynamically generated resource, such as the contract summary. This clickable link is clear and actionable, enabling the user to immediately download the required file.

  • The Text Type complements the link by offering a simple, guiding message that explains the purpose of the link and directs the user on the next steps.

Together, these types ensure that the user interaction is both intuitive and informative, with actionable links supported by clear contextual guidance. This combination highlights how different Display Node types can work together to enhance user engagement within a workflow.

Key Takeaways for Developers

✅ Versatility in Output: The Display Node can handle a wide range of content types, making it ideal for diverse use cases.

✅ User Engagement: Suggestions, links, and charts improve user interactivity and experience during conversations.

✅ Structured Information Delivery: Tables and summary grids present complex data in an organized manner, enhancing readability.

✅ Customization and Flexibility: Chart configurations, summary layouts, and export options allow developers to tailor the display to specific needs.

✅ Simple Configuration: With just a few fields to configure, the Display Node integrates seamlessly into workflows.

PreviousLoaderNextAPI Node

Last updated 21 days ago

Link URL: The URL is dynamically retrieved from the previous node’s output using the variable $input.url.

This ensures the user understands the purpose of the link provided.

A subsequent message guides the user about the action, improving clarity.