Agent Builder contains several UI and blueprint blocks that you can use to build a chatbot.

This tutorial demonstrates how to build a general chatbot that is connected to the Palmyra X5 model with the following steps:

  1. Add a Chatbot block to the UI.
  2. Start a new chat conversation when the agent first loads
  3. Add messages to the chat whenever a user types in the Chatbot component
  4. Generate a response from the Palmyra X5 model to each message

Build the UI

The UI for the agent contains a single Chatbot block.

1

Add a Chatbot block to the UI

In the block’s configuration panel, update the following fields:

  • Conversation: @{chat}. This is the state variable that stores the chat conversation.
  • Assistant initials: AI. This is the text that appears next to the assistant’s messages in the chat.
  • User initials: YOU. This is the text that appears next to the user’s messages in the chat.
  • Use markdown: yes. This configures the chatbot to parse markdown in the messages.
  • Enable file upload: no. This disables the file uploads in the chatbot.
  • Placeholder: Type your message here.... This is the text that appears in the input field when it is empty.

Build the blueprint

The blueprint for the agent contains the following blocks:

  • UI trigger block to start a new chat conversation when the agent first loads
  • Start chat conversation block to start a new chat conversation
  • UI trigger block to add messages to the chat whenever a user types in the Chatbot component
  • Add chat message block to add the user’s message to the chat conversation
  • Generate chat response block to generate a response from the Palmyra X5 model to each message
1

Add a UI trigger for the page open event

To start a new chat conversation when the agent first opens, add a UI trigger block to the canvas. In the block’s configuration panel, update the following fields:

  • Component Id: select the Page component from the dropdown of UI blocks
  • Event type: wf-page-open

2

Add a Start chat conversation block

Add a Start chat conversation block to the canvas, which will run after the page open event triggers. In the block’s configuration panel, update the following fields:

  • Conversation state element: chat
  • Model: Palmyra X5

You can also update the Temperature and Max output tokens fields to control the output of the chat conversation.

3

Add a UI trigger for the chat message event

To add messages to the chat whenever a user types in the Chatbot component, add a UI trigger block to the canvas. In the block’s configuration panel, update the following fields:

  • Component Id: select the Chatbot component from the dropdown of UI blocks
  • Event type: wf-chatbot-message

4

Add chat message to the conversation

Add an Add chat message block to the canvas after the chat message event triggers. In the block’s configuration panel, update the following fields:

  • Conversation state element: chat
  • Message: @{payload}. This references the payload variable set by the previous UI trigger. The payload variable created by the UI trigger contains the message from the user in the following format: {"message": "<user's message>", "role": "user"}.

5

Generate a chat reply

Add a Generate chat response block to the canvas after the chat message event triggers. This passes the chat conversation to the Palmyra X5 model to generate a response. In the block’s configuration panel, update the following fields:

  • Conversation state element: chat
  • Use streaming: yes. This configures the block to stream the response from the model to the chat in real time, rather than waiting for the entire response to be generated before displaying it.

Once the response is generated, the block adds a new message to the chat conversation with the following format: {"message": "<assistant's response>", "role": "assistant"}.

This tutorial doesn’t show how to add additional tools to the chatbot, but this block is where you would add them, under the Tools section of the configuration panel. For example, you could connect to a Knowledge Graph to answer questions about data related to your business.

Preview the agent

To preview the agent, click the Preview button in the top right corner of the page.

You can then type a message in the chatbot and see the response from the model.

If you encounter any issues, refer to the Troubleshooting guide for debugging information.