The Chat Playground
Overview
The Chat Playground is a core component of the aifusion web application that provides developers with an intuitive, ready-to-use chat interface for testing and interacting with their AI agents.
The Chat Playground user interface and actions can be customized and branded, as explained here.
Accessing the Chat Playground
Navigate to the aifusion web application and select Chat from the top navigation menu. The Chat Playground is located alongside the Evaluation and Observation modules in the main navigation.
User Interface Components
Header Section
The header displays the demo branding (e.g., 'EliteBank' for the banking demo) along with a welcome message. Few action buttons are available in the upper-left corner:
- User Profile: Opens a side pane displaying the current customer context. This pane demonstrates how organizations might use a chat tool to support call center representatives, allowing them to view brief customer information generated by an LLM in natural language. This helps them predict why the customer is reaching out.
- Chat Summary: Opens a side pane displaying a summary of the chat so far.
- Restart: Resets the conversation to start a fresh session with the agent.
Chat Area
The central chat window displays the conversation between the user and the AI assistant. Each message shows:
- The sender identity (user or assistant name, e.g., 'Elite Assistant')
- The message content with formatted responses, including bullet points, dates, and monetary values
- Feedback icons (thumbs up, thumbs down, comment) allowing users to rate and annotate responses
Input Field
At the bottom of the chat area, an input field with the placeholder text 'Ask me anything…' allows users to type questions. Messages can be submitted by pressing Enter or by clicking the blue send button.
Trace Pane
Clicking the Trace button on the right edge of the screen opens a detailed debugging pane, revealing the agent's internal processing flow.
The Trace Pane: Understanding Agent Execution
The Trace pane is a powerful debugging feature that provides complete transparency into how the agent processes each query. It displays:
Session Information
Session information appears at the top of the Trace pane.
- Chat ID: Unique identifier for the conversation session
- Started: Timestamp of when the conversation began
- Customer ID: The customer IID being used
Execution Pipeline
Each query displays the processing pipeline of the agentic workflow, showing its stages. For example, when a sub-agent path is chosen, the process typically involves the following stages:
- Reflect: on user query — initial query reflection and understanding
- Goal Refiner — determines the intent and refines the goal for the sub-agent
- [Domain] Agent — the specialized sub-agent that handles the request (e.g., 'Credit Card Agent')
- Responder — formats and delivers the final response
Detailed Metrics
For each stage, the Trace shows:
- Execution time (e.g., 1.3s, 8.3s)
- Token consumption, which is displayed as input tokens, cached tokens, and output tokens.
Expandable Details
Each of the main workflow stages, representing agents, can be expanded to reveal:
- System (goals, instructions and context): The system prompt, role definition, and objectives given to the agent
- User: The user's input
- LLM Response: Each iteration of the language model's response, including any tool calls made
- Tool Calls: Specific tools invoked throughout the workflow according to the LLM’s instructions
- Tool Execution Results: The outcome of each tool call, along with its execution duration
Agentic Flow Visualization
The Trace pane demonstrates how agents operate iteratively, making multiple tool calls to gather the required information before formulating a response. For example, answering "Can I increase my credit card balance?" may involve:
- Retrieving customer identification (using getSSN)
- Fetching credit score information (getCreditScore)
- Executing queries to check current credit card limits (queryExecute)
- Multiple LLM iterations to process results and determine the response
The Chat Playground
Overview
The Chat Playground is a core component of the aifusion web application that provides developers with an intuitive, ready-to-use chat interface for testing and interacting with their AI agents.
The Chat Playground user interface and actions can be customized and branded, as explained here.
Accessing the Chat Playground
Navigate to the aifusion web application and select Chat from the top navigation menu. The Chat Playground is located alongside the Evaluation and Observation modules in the main navigation.
User Interface Components
Header Section
The header displays the demo branding (e.g., 'EliteBank' for the banking demo) along with a welcome message. Few action buttons are available in the upper-left corner:
- User Profile: Opens a side pane displaying the current customer context. This pane demonstrates how organizations might use a chat tool to support call center representatives, allowing them to view brief customer information generated by an LLM in natural language. This helps them predict why the customer is reaching out.
- Chat Summary: Opens a side pane displaying a summary of the chat so far.
- Restart: Resets the conversation to start a fresh session with the agent.
Chat Area
The central chat window displays the conversation between the user and the AI assistant. Each message shows:
- The sender identity (user or assistant name, e.g., 'Elite Assistant')
- The message content with formatted responses, including bullet points, dates, and monetary values
- Feedback icons (thumbs up, thumbs down, comment) allowing users to rate and annotate responses
Input Field
At the bottom of the chat area, an input field with the placeholder text 'Ask me anything…' allows users to type questions. Messages can be submitted by pressing Enter or by clicking the blue send button.
Trace Pane
Clicking the Trace button on the right edge of the screen opens a detailed debugging pane, revealing the agent's internal processing flow.
The Trace Pane: Understanding Agent Execution
The Trace pane is a powerful debugging feature that provides complete transparency into how the agent processes each query. It displays:
Session Information
Session information appears at the top of the Trace pane.
- Chat ID: Unique identifier for the conversation session
- Started: Timestamp of when the conversation began
- Customer ID: The customer IID being used
Execution Pipeline
Each query displays the processing pipeline of the agentic workflow, showing its stages. For example, when a sub-agent path is chosen, the process typically involves the following stages:
- Reflect: on user query — initial query reflection and understanding
- Goal Refiner — determines the intent and refines the goal for the sub-agent
- [Domain] Agent — the specialized sub-agent that handles the request (e.g., 'Credit Card Agent')
- Responder — formats and delivers the final response
Detailed Metrics
For each stage, the Trace shows:
- Execution time (e.g., 1.3s, 8.3s)
- Token consumption, which is displayed as input tokens, cached tokens, and output tokens.
Expandable Details
Each of the main workflow stages, representing agents, can be expanded to reveal:
- System (goals, instructions and context): The system prompt, role definition, and objectives given to the agent
- User: The user's input
- LLM Response: Each iteration of the language model's response, including any tool calls made
- Tool Calls: Specific tools invoked throughout the workflow according to the LLM’s instructions
- Tool Execution Results: The outcome of each tool call, along with its execution duration
Agentic Flow Visualization
The Trace pane demonstrates how agents operate iteratively, making multiple tool calls to gather the required information before formulating a response. For example, answering "Can I increase my credit card balance?" may involve:
- Retrieving customer identification (using getSSN)
- Fetching credit score information (getCreditScore)
- Executing queries to check current credit card limits (queryExecute)
- Multiple LLM iterations to process results and determine the response
