Use case: Using UI Builder Agent

  • Release version: Australia
  • Updated August 11, 2026
  • 2 minutes to read
    • Summarize
    Summarized using AI
    This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.

    Summary of Use case: Using UI Builder Agent

    This use case demonstrates how ServiceNow customers can leverage the UI Builder agent, a conversational AI assistant embedded within the UI Builder page editor, to accelerate page configuration tasks. It focuses on a citizen developer building an employee self-service portal who needs to apply a multi-column layout, add external links via buttons, and verify existing client scripts without interrupting their workflow.

    Show full answer Show less

    Key Features

    • Conversational AI Assistance: The UI Builder agent provides real-time, chat-based help directly within the page editor, enabling developers to ask questions and receive instant, documentation-backed answers.
    • Layout Configuration: Developers can inquire about and apply complex layouts such as three-column designs through simple conversational commands.
    • Component Management: The agent can add and configure components like buttons with custom labels and external navigation links based on user instructions.
    • Script Awareness: Developers can check if client scripts exist on the page, ensuring they understand current configurations before making changes.
    • Direct Page Modification: The agent not only advises but can implement changes instantly, reducing manual steps and potential errors.

    Using the UI Builder Agent

    To use the UI Builder agent, ensure you have installed UI generation and possess the uibuilderadmin role. From the UI Builder experience, open the page editor and activate the ServiceNow Otto chat panel. You can then:

    • Ask about existing client scripts on the page to understand current behaviors.
    • Request explanations of layout options, such as how to apply three-column layouts.
    • Command the agent to apply a multi-column layout directly.
    • Instruct the agent to add specific components like buttons with external links and target behaviors (e.g., opening in a new window).

    Key Outcomes

    • The developer quickly applies a three-column layout and adds an external link button in a single editing session.
    • The workflow remains uninterrupted by documentation searches, significantly speeding up page configuration.
    • Confidence is gained by verifying client scripts before making layout changes, helping avoid unintended issues.
    • Overall, the UI Builder agent enhances productivity and lowers the learning curve for new developers working with ServiceNow UI Builder.

    Learn UI Builder features and accelerate page configuration using conversational AI.

    Scenario

    A citizen developer at a retail company is creating an employee self-service portal using UI Builder. They are relatively new to the platform and are working on a page that requires a three-column layout, along with a button that links to an external HR system. Additionally, they would like to verify whether any client scripts are running on the page before making any layout changes.

    Problem

    The developer is not yet familiar with UI Builder ’s configuration options. Looking up documentation for each task interrupts their workflow and slows progress. They are unsure how to apply a multi-column layout, add a button with an external link, or check whether existing scripts might be affected by their layout changes.

    Solution

    The UI Builder agent is available directly within the UI Builder page editor as a chat-based assistant. The developer can ask questions about features, request page modifications, and get configuration insights — all without leaving the editor. The agent provides instant answers backed by the latest ServiceNow documentation and can directly apply changes to the page on the developer’s behalf.

    Before you begin

    Make sure that you install UI generation and that you have the ui_builder_admin role. For more information, see Install UI generation and Grant UI Builder admin role.

    Configuration steps

    Perform the following steps to use UI Builder agent:
    1. Navigate to All > Now Experience Framework > UI Builder.
    2. Open the employee self-service portal experience.
    3. Open the page to edit and open the ServiceNow Otto panel from the page editor.
    4. In the chat panel, do the following:
      • Ask the UI Builder agent if there are any client scripts on the page: Are any client scripts used on my page?

        The agent provides a detailed breakdown of the page’s current scripts and configurations.

      • Ask the UI Builder agent how you can apply a three-column layout: How can I apply a three-column layout to this page?

        The agent explains the available layout options and relevant steps.

      • Ask the UI Builder agent to add a three-column layout to the page: Apply a three-column layout to this page.

        The agent implements the layout change.

      • Ask the UI Builder agent to add a button with label and navigation: Add a button with the label 'Visit HR Portal' that links to https://hr.example.com in a new window.

        The agent adds and configures the button component.

    5. Review the changes in the page editor and make any necessary adjustments to the styling.

    Outcome

    The developer sets up a three-column layout and adds a linked button component in a single session, with guidance from the UI Builder agent. They also gain confidence in their page's script configuration before making any changes. Tasks that would have typically required multiple searches through documentation are now completed without leaving the editor.