[agent builder] Update chat UI page and update all screenshots #4551

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

leemthompo merged 9 commits into main from leemthompo/agent-builder-chat-updates

Jan 13, 2026

explore-analyze/ai-features/agent-builder/agent-builder-agents.md

-Original file line number
+Diff line change
@@ Expand Up / @@ -39,12 +39,14 @@ @@
     - Start chatting with an agent or perform other actions:
         - **Elastic AI Agent**: you can **chat** or **clone** the default agent using the chat or clone buttons. The default agent cannot be edited directly.
           :::{image} images/chat-and-clone-buttons.png
+          :screenshot:
           :alt: Chat with agent and clone agent buttons
           :width: 120px
           :::
         - **Custom agents**: You can **chat**, **edit**, **clone**, or **delete** an agent from the management overview.
           :::{image} images/chat-edit-clone-delete.png
+          :screenshot:
           :alt: Agent context menu showing Chat, Edit, Clone, and Delete options
           :width: 130px
           :::
@@ Expand All / @@ -64,6 +66,7 @@ @@
     Select the **New agent** button to being creating a new agent.
     :::{image} images/new-agent-button.png
+    :screenshot:
     :alt: Select the New agent button to create a new agent
     :width: 150px
     :::
@@ Expand Down Expand Up / @@ -108,6 +111,7 @@ @@
     Select **Save** to create your agent, or **Save and chat** to create the agent and immediately begin a conversation with it.
     :::{image} images/save-and-chat-buttons.png
+    :screenshot:
     :alt: Save and Save and chat buttons
     :width: 270px
     :::
@@ Expand Down @@

explore-analyze/ai-features/agent-builder/chat.md

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -14,6 +14,13 @@ applies_to:
  
    The chat GUI and programmatic interfaces enable real-time communication where you can ask questions, request data analysis, and receive immediate responses from your configured agents.

    <!-- 

    :::{note}

    TODO: Uncomment once page is live.

    The chat UI is available in both standalone and flyout modes. For more information, refer to [Chat UI modes](standalone-and-flyout-modes.md).

    ::: 

    -->

    ## Get started

    :::{tip}

    @@ -26,42 +33,97 @@ You can also search for **Agent Builder** in the [global search bar](/explore-an
  
    This takes you to the chat GUI:

    :::{image} images/agent-builder-chat-UI-get-started.png

    :::

    :screenshot:

    :alt: The main Agent Chat GUI showing the chat window, message input box, and agent selection panel

    :::

    ## Agent Chat GUI

    ### Chat and select agent

    Use the text input area to chat with an agent in real time. By default, you chat with the built-in Elastic AI Agent.

    :::{note}

    Conversations with agents consume tokens. To understand how usage is calculated, refer to [Token usage in Elastic Agent Builder](monitor-usage.md).

    :::

    :::{image} images/agent-builder-chat-input.png

    :screenshot:

    :alt: Text input area for chatting with agents

    :width: 850px

    :width: 650px

    :::

    #### Agent selector

    :::{note}

    Conversations with agents consume tokens. To understand how usage is calculated, refer to [Token usage in Elastic Agent Builder](monitor-usage.md).

    :::

    #### Select a different agent

    ```{applies_to}

    stack: ga 9.3+

    ```

    Use the agent selector to switch agents, to navigate to the agent management section, or to create a new agent.

    Use the agent selector to switch agents, to navigate to the agent management section, or to create a new agent. An agent's behavior is defined by its custom instructions and available tools. Switch agents when you need different capabilities for your tasks.

    :::{image} images/agent-builder-agent-selector.png

    :screenshot:

    :alt: Agent selector dropdown and message input field

    :width: 850px

    :width: 650px

    :::

    #### Select a different model

    ```{applies_to}

    stack: ga 9.3+

    ```

    Use the model selector to switch the underlying [model](models.md) the agent uses to generate responses. Switch models to prioritize faster responses, lower costs, or more complex reasoning, depending on your use case.

    :::{image} images/model-selector.png

    :alt: Image description

    :width: 650px

    :screenshot:

    :::

    ### Access key actions

    ```{applies_to}

    stack: ga 9.3+

    ```

    This menu is your hub for key management actions. You can quickly access important pages from here.

    :::{image} images/more-actions.png

    :screenshot:

    :alt: More actions menu button

    :width: 150px

    :::

    This opens a panel with links to key actions and management pages including agent, tool, and settings management.

    :::{image} images/more-actions-menu-options.png

    :screenshot:

    :alt: The expanded more options menu panel

    :width: 250px

    :::

    ### Find conversation history

    Use the left sidebar to access previous conversations.

    Use the chat history panel to access previous conversations.

    :::{image} images/agent-builder-chat-history.png

    :screenshot:

    :alt: Chat history panel showing conversation list

    :width: 250px

    :width: 450px

    :::

    ### Inspect tool calls and reasoning

    Expand the **Reasoning** section to see how the agent handles your request. This provides a detailed breakdown of the agent's reasoning steps, the tool calls it makes, and the responses it receives. The agent runs tools in a loop until it achieves its goal or [exceeds the maximum conversation length](limitations-known-issues.md#conversation-length-exceeded).

    :::{image} images/reasoning-steps.png

    :screenshot:

    :alt: Reasoning panel showing tool calls and execution steps

    :width: 650px

    :::

    Select **Inspect response** to view detailed information about individual tool calls and responses.

    Select **View JSON** to view the full raw response data. For more information, refer to [Monitor token usage](monitor-usage.md).

    ## Agent Chat API

    The Agent Chat API provides programmatic access to chat functionality through REST endpoints.

    @@ -72,7 +134,7 @@ For a quick overview of the REST API for conversations, refer to [Chat and conve
  
    ### API reference

    For the complete API reference, refer to the [Kibana API reference](https://www.elastic.co/docs/api/doc/kibana/operation/operation-get-agent-builder-conversations).

    For the complete API reference, refer to the [{{kib}} API reference](https://www.elastic.co/docs/api/doc/kibana/operation/operation-get-agent-builder-conversations).

explore-analyze/ai-features/agent-builder/images/agent-builder-agent-selector.png

Sorry, something went wrong. Reload?