Developing a Generic Streamlit UI to Test Amazon Bedrock Agents

Introduction

In the earlier blog post Building a Basic Forex Rate Assistant Using Agents for Amazon Bedrock, I walked readers through the process of building and testing a Bedrock agent in the AWS Management Console. While the built-in test interface is great for validation as changes are made in the Bedrock console, it is not scalable to other team members such as testers who often don't have direct access to AWS.

Meanwhile, a developer workflow that does not require access to AWS Management Console may provide a better experience. As a developer, I appreciate having an integrated development environment (IDE) such as Visual Studio Code where I can code, deploy, and test in one place.

To address these two challenges, I decided to build a basic but functional UI for testing Bedrock agents. In this blog post, I share with readers the end product and some details about its design.

Design and implementation overview

The following is the list of requirements that I defined for the test UI:

• The design should be minimal but functional, since the focus is not on the UI but on being able to validate the business logic of the agents.

• The solution must provide the basic features as the Bedrock console, including trace.

• The solution must be adaptable to any Bedrock agents with no to minimal changes.

• The solution must run both locally and as a shared webapp for different workflows.

I decided to use Streamlit to build the UI as it is a popular and fitting choice. Streamlit is an open-source Python library used for building interactive web applications specially for AI and data applications. Since the application code is written only in Python, it is easy to learn and build with.

The Agents for Amazon Bedrock Runtime API can be used to interact with a Bedrock agent. Since the Streamlit app is developed in Python, we will naturally use the AWS SDK for Python (Boto3) for the integration. The AWS SDK Code Examples code library provides an example on how to use the AgentsforBedrockRuntime.Client.invoke_agent function to call the Bedrock agent. The function documentation was essential to determine the response format and the information.

The UI design is rather minimal as you can see in the following screenshot:

In the left sidebar, I include elements related to troubleshooting such as a session reset button and trace information similar to the Bedrock console. The main pane is a simple chat interface with the messages and the input. I made the favicon and page title configurable using environment variables for a white label experience.

About the repository structure

You can find the source code for the test UI in the acwwat/amazon-bedrock-agent-test-ui GitHub repository. The repository structure follows a standard structure as recommended by Mark Douthwaite for Streamlit projects. For a detailed explanation of the structure, refer to the getting started documentation. The only tweak I made is that I put the backend integration code into bedrock_agent_runtime.py in a services directory.

├── services
│   ├── bedrock_agent_runtime.py
├── .gitignore
├── app.py
├── Dockerfile
├── LICENSE
├── README.md
├── requirements.txt

Configuring and running the app locally

To run the Streamlit app locally, you just need to have the AWS CLI and Python 3 installed. Then you can clone the acwwat/amazon-bedrock-agent-test-ui GitHub repository and follow the steps below:

1. Run the following command to install the dependencies:
   
   pip install -r requirements.txt

2. Configure the environment variables for the AWS CLI and Boto3. You would typically configure the AWS CLI to create a named profile, then set the AWS_PROFILE environment variable to refer to it.

3. Set the following environment variables as appropriate:

   • BEDROCK_AGENT_ID - The ID of the Bedrock agent, which you can find in the Bedrock console or by running the aws bedrock-agent list-agents command.
   • BEDRROCK_AGENT_ALIAS_ID - The ID of the agent alias, which you can find in the Bedrock console or by running the aws bedrock-agent list-agent-aliases command. If this environment variable is not set, the default test alias ID TSTALIASID will be used.
   • BEDROCK_AGENT_TEST_UI_TITLE - (Optional) The page title. If this environment is not set, the generic title in the above screenshot will be used.
   • BEDROCK_AGENT_TEST_UI_ICON - (Optional) The favicon code, such as :bar_chart:. If this environment is not set, the generic icon in the above screenshot will be used.

4. Run the following command to start the Streamlit app:
   
   streamlit run app.py --server.port=8080 --server.address=localhost

Once the app is started, you can access it in your web browser at http://localhost:8080.

As an example, here is the list of bash commands I run in bash inside VS Code to start the app for testing my forex rate agent (which you can learn how to build or deploy using my Terraform configuration):

cd amazon-bedrock-agent-test-ui
pip install -r requirements.txt
# Use a named profile created by the "aws configure sso" command
export AWS_PROFILE=AWSAdministratorAccess-<redacted>
export BEDROCK_AGENT_ID=WENOOVMMEK
export BEDROCK_AGENT_TEST_UI_TITLE="Forex Rate Assistant"
export BEDROCK_AGENT_TEST_UI_ICON=":currency_exchange:"
# Log in via the browser when prompted
aws sso login
streamlit run app.py --server.port=8080 --server.address=localhost

To stop the app, send an INT signal (Ctrl+C) in the prompt where you are running the streamlit command.

⚠ On Windows, the streamlit command doesn't seem to end the process if you don't have the UI opened in the browser. If you run into this issue, simply go to http://localhost:8080 in your browser, then hit Ctrl+C again in the prompt.

Next steps

While the Streamlit app serves my purpose as it is, there are a few missing features which I will continue to add over time:

• Support for the use of Knowledge Bases for Amazon Bedrock in an agent, such as displaying citations

• Support for returning control to the agent developer

• Ability to switch between agents and aliases within the app

I also have not shown how to build and deploy the Streamlit app as a container in AWS, which I will perhaps demonstrate in another future blog post.

You are encountered to fork or copy the repository and built upon the existing code to suit your needs.

Summary

In this blog post, I provided an introduction to a generic Streamlit UI that I built to facilitate more efficient testing of agents built with the Agents for Amazon Bedrock service. You can clone the repository and follow the instructions to run it locally, and improve upon the baseline as you see fit.

I will be adding more features and fixing bugs over time, so be sure to check out the repository from time to time. Be sure to follow the Avangards Blog as I continue my journey with building generative AI applications using Amazon Bedrock.

Thanks for checking in!