Agent Builder Demo Application
Agent Builder is in beta. Some features are still in development and are subject to change.
When you create an agent with Agent Builder, you can use the demo agent as a starting point. This guide walks through the architecture of the demo agent and shows you how to modify it to add new behavior.
The demo agent is a sample retail use case. It takes a customer review and uses a series of tools to analyze the review and draft a response to the customer.
In this guide, you will:
- Create a new Agent Builder project
- Tour the demo agent architecture
- Modify the demo agent to add new behavior
If you are unfamiliar with Agent Builder, review the Agent Builder Overview to learn more about the different components of an agent.
Start an Agent Builder project
To create an agent with Agent Builder, log in to AI Studio and follow these steps:
Click the Build an agent button
Click the Build an agent button in the top right of the page.
Select Agent Builder
Next, in the modal that appears, select Get started under Agent Builder.
Edit the new agent
Writer creates a new agent for you asynchronously. Once the agent is created, you’ll see a message that the agent is ready with a link to the Agent Builder interface. Follow the Start editing link to start building your agent.
Return to the Agent Builder interface
You can get to the Agent Builder interface any time by going to the AI Studio homepage and selecting the agent you created.
You’ll see the Configure Deployment page when you select the agent. To get to the edit interface, click the Edit button in the top right corner.
Preview the demo agent
Writer initializes the new agent with a demo workflow that you can use to get started. The demo agent takes a customer review and uses a series of tools to analyze the review and draft a response to the customer.
The Agent Builder contains three views: Preview, Blueprint, and UI. You can switch between views by clicking the tabs at the top of the page.
Before you start editing, preview the agent to see how it works:
Click the Preview tab
Click the Preview tab to see the agent in action.
Copy and paste the example customer review
Copy the example customer review under 1. Copy me and paste it into the input field.
Click Generate response
Click Generate response. You’ll see a status message in the UI that the agent is generating a response. Once the agent has finished, you’ll see the response in the UI.
Tour of the demo agent architecture
The demo agent consists of a UI and a blueprint. The UI and the blueprint are connected through the agent’s state and UI triggers.
- UI: Displays a welcome message and a text input for the customer review. It also contains a button to Generate response and a section to display the agent’s response along with a status message while the agent is generating a response.
- Blueprint: A flowchart-like interface where you connect blocks of logic with transitions from one block to the next based on different conditions or states. The demo agent’s blueprint determines the main topic of the customer’s review and generates a customized response based on the classification. It then displays the response in the UI.
- Agent state: A set of values that’s shared between the UI and the blueprint. Both the UI and the blueprint can reference and update the state.
- UI trigger: A trigger from the UI that starts the agent’s blueprint. In this case, the UI trigger is attached to click events on the Generate response button.
Agent state
The agent’s state is a core component of the agent’s behavior. It contains values that the UI and blueprint can access and update.
You can view the agent’s state from any view by clicking the State explorer icon in the top right of the page.
The section Connecting the UI and the blueprint describes how the UI and blueprint interact with the state to perform the agent’s tasks.
Blueprint view
The Blueprint view is where you define the agent’s logic and behavior. It’s a flowchart-like interface where you connect blocks of logic with transitions from one block to the next based on different conditions or states.
If you have just previewed the agent, you’ll see green boxes highlighting the path that the agent took through the blueprint. The agent took the following steps:
UI Trigger
The blueprint started with the UI Trigger element. In this case, the UI Trigger is configured to run when the user clicks the Generate response button in the UI.
Set state to show the progress message
The agent used the Set state block to set the progress_message
value for the agent state to show that it is generating a response.
Classification
The agent uses the Classification block to analyze the review to determine the primary focus of the review, from the following: Packaging
, Pricing
, Quality
, Delivery
, or Empty
.
The agent determined the review fit into the Quality
category. Classification blocks are built-in blocks that use a Palmyra model to classify the input based on a set of user-defined categories.
Text generation
The agent used the Text generation block to have a Palmyra model draft a response to the customer specifically focused on quality.
Set state for the response
The agent stored the drafted response in the agent’s state so it could use it in the UI.
Set state to clear the progress message
The agent cleared the progress_message
value in the state to remove the loading message from the UI.
To view another path through the blueprint, go back to the Preview view and paste the following:
I like the style but it's a lot more expensive than other brands without any difference in quality.
Click Generate response, and navigate back to the Blueprint view. You’ll see that the agent took a different path through the blueprint, this time selecting the Pricing
category and drafting a response using a pricing-related prompt.
UI view
The UI view is where you define the agent’s appearance. You build the UI with components that you can customize and reference in the blueprint.
This agent’s UI has a welcome image and two sections, one for the review and one for the response.
The Review section has a Textarea input for the customer review and a button to Generate response.
The Response section has a Message component to display the in progress status message. It also contains two sections with Text components. One of the sections is visible when you first load the agent and says “The response will be shown here”. The second one is hidden until the response is generated.
Hidden sections
You won’t see the hidden section for the results in the UI when you first load the agent. You can see that the section is in the UI from the Component tree in the bottom left of the page. The hidden section has an icon next to it indicating that it’s not visible.
Click that element in the Component tree to see its settings. Under Visibility, it’s set to only show up once there is a value in the review_response
state variable.
The visible section within the Response area has the reverse condition set for visibility: it disappears when there is a value in the review_response
variable.
The next section contains more information about state variables and how the UI and blueprint connect.
Connecting the UI and the blueprint
To build full-featured agents, you must be able to connect the UI to the blueprint.
The agent’s state is the main way to pass data between the UI and the blueprint. The state contains a set of values that the UI and blueprint can both reference and set. You can also use triggers to connect the UI to the blueprint.
Here are the places where the demo agent connects the UI to the blueprint and passes data between them:
UI Trigger
The Generate response button in the UI is connected to the UI Trigger element in the blueprint. Click events trigger the blueprint to run.
Customer review input
The Textarea input component in the UI binds the user’s input to the customer_review
state variable. The blueprint uses this value in the Classification block.
Progress message
The Message component in the UI displays the value of the progress_message
state variable to the user. The blueprint sets this value after the user clicks Generate response.
Review response
The two sections in the response with Text components in the UI depend on the value of the review_response
state variable.
- The blueprint sets this value after the Text generation block runs.
- Once
review_response
contains a value, the section that had the message “The response will be shown here” disappears. - The section that displays the response appears. The text area in that section contains the value of
review_response
.
See Hidden sections for more information about the review response sections and conditionally showing and hiding them.
Clear progress message
Once the review response is generated, the final Set state block in the blueprint sets the progress_message
state variable to an empty string to clear the loading message from the UI.
Modify the demo agent
Now that you’ve toured the Agent Builder interface, try editing the agent’s behavior.
Add a new category to the classification block
This example shows how to add a new category to the classification block to look for and respond to reviews that focus on sizing issues.
First, add another category to the Classification block in the blueprint so that the agent can also classify reviews that are about sizing.
From the blueprint view:
Open the Classification block
Click the Classification block in the blueprint to open the block settings.
Add a new category
In the Categories section, add a new category called Sizing
with the value The review relates to sizing issues.
Click +Add.
Add a new text generation block
Add a new Text generation block to the blueprint to generate a response to sizing-related reviews:
- Click one of the existing Text generation blocks in the blueprint.
- Type
Command + c
(on Mac) orCtrl + c
(on Windows) to copy the block. - Click onto the blueprint canvas and type
Command + v
(on Mac) orCtrl + v
(on Windows) to paste the block.
Remove the transition
If you copied and pasted a text generation block, you might need to remove the new block’s transition to the next block that the original block was connected to. To do this, click the transition line you want to delete and press the X button.
Edit the new text generation block
Click on the new text generation block you added to edit it. The prompt should be to generate a response that focuses on sizing issues.
The name of the block should be Draft sizing response
and the prompt should be:
Connect the new text generation block
Drag a line from the purple dot next to Sizing on the Classification block to connect it to the new Text generation block.
It should now look like this:
Copy and paste the two Set state blocks
Copy and paste the two Set state blocks that followed the original Text generation block.
Update the transitions from those blocks to connect to the new Text generation block for sizing. The final flow for the sizing response should look like this:
Now, preview the agent to see the new behavior. Paste the following review into the input field and click Generate response:
You should see the agent take a different path through the blueprint and generate a sizing-related response.
Add a new UI component
This next example shows how to add a new UI component that you can incorporate into the agent’s blueprint.
The steps show how to prompt the agent to add a discount of a certain percentage when generating a response to the customer review. You will:
- Add a Dropdown input component to the UI that lists different discount percentages
- Edit the prompt for one of the Text generation blocks to add the selected discount percentage to the response if there is one
From the UI view:
Add a new Dropdown input component
Add a new Dropdown input component to the UI. In the component’s settings, set the label to Discount percent
.
Add the following keys with the same number as the values
Add the following keys with the same number as the values: 0
, 5
, 10
, 15
. Delete the default keys Option A
and Option B
.
Bind the dropdown to the discount state variable
Under Binding in the component’s settings, type discount
into the State element field.
Move the component up above the Generate response button
Move the component above the Generate response button by clicking the up arrow icon in the component’s settings.
The UI should now look like this:
From the blueprint view:
Click on the Draft packaging response text generation block
Click on the Draft packaging response text generation block to open its settings.
Edit the prompt to read the discount state variable
Edit the prompt to read the discount
state variable and add a discount to the response if there is one. For example, add the following to the prompt: Offer a discount of @{discount} percent on their next purchase. Do not offer a discount if the value of @{discount} is 0.
Now, preview the agent to see the new behavior. Paste the following review into the input field:
Then, select a discount amount from the dropdown and click Generate response.
You should see the agent take a different path through the blueprint and generate a response that offers a discount if you set it above 0.
You can update the prompts for the other text generation blocks to have the agent offer a discount for the other categories.
Next steps
Now that you’ve interacted with and modified an agent in Agent Builder, you can build your own. Check out the Agent Builder Quickstart to learn how to build a new agent from scratch.