Coding Mindfulness: My Affirmations & Amazon Bedrock

Introduction

Sometimes, we all need a break from the frenetic pace of software engineering and keeping up with all the new developments in cloud and generative AI. As I've gotten older (I just turned 0b110000), and as a neuro-divergent adult, I've come realise it's important to step back and engage in activities that promote mindfulness and inner calm. This may come as a surprise to my former students.

In this article, we're going to take a little break (or breather as the folks across the pond say) and explore the process of updating a simple web application called "My Affirmations". This app is designed to be a digital sanctuary, a place where users can read affirmations that uplift and empower them.

Usually I write only for students, but whether you're a seasoned developer or just starting out, working on projects like My Affirmations can be a little respite from the intensity of hardcore software engineering work.

So, let's take a deep breath, clear our minds, and start on a journey of coding mindfulness.

My Affirmations App

A while back Jen Looper published an article about her My Affirmations app: Build a Web App to Deliver Calming and Empowering Affirmations Using AWS Lambda and Amazon DynamoDB.

This app had been updated by Olivier Leplus to use Amazon Bedrock to generate new affirmations on demand. Recently I updated the My Affirmations web app for students in the following ways:

Added credential loading from shell or an .env.local file for Vite access.
Added the new Converse API to generate affirmations on demand and with different models.
Created a step-by-step workshop for students who wanted to try it out themselves.

The app ended up with code that was short and sweet, and the foundational model used could be more easily switched to a new or different one. This is appropriate for students starting off on their cloud coding journey.

Presenting this app to students gets a lovely response - it's so different from the usual examples and it's really fun to present. Special thanks to the students in Ada. National College for Digital Skills Manchester and the students at AWS Cloud Club at Tribhuvan University, Nepal, who piloted this workshop with me.

Then a surprising thing happened. When I would demo this to students, sometimes a member in the audience would contact me and say 'I'm not a student, but I want to make the My Affirmations app too'. I was surprised that experienced developers would be interested, but sometimes I forget that we are all learners, even the experts, and a nice, simple tutorial might be what you need sometimes.

This article is the result of these requests. Presented here for students or experienced developers starting out on web development and Amazon Bedrock. When Aditya Pandey, leader in AWS User Group Dehradun invited me to present Amazon Bedrock to his Innovate with AWS GenAI Bootcamp, I had the perfect example ready to demo to his 580 viewers!

Presenting Amazon Bedrock online with User Group Dehradun — Presenting My Affirmations & Amazon Bedrock with User Group Dehradun

What made this whole app much easier to achieve was the excellent series of examples covering several different languages by my colleague Dennis Traub. I love his articles focused on exactly what you need as a developer, and if you ever need examples on Amazon Bedrock coding, there is no better place to start. In particular, A JavaScript developer's guide to Bedrock's new Converse API is perfect for experienced JavaScript developers. There's also the AWS Learn AI Pages, which has a section just for developers starting their AI journey.

Pre-requisites

If you need help configuring any of these, I recommend following Dennis's article above.

In summary, you will need:

An AWS account and (so you can access your credentials).
The Amazon Bedrock models that you want to use enabled in your account. The code uses Claude and Claude 3 Haiku, but these are examples, you can use other foundational models too.
Amazon Bedrock Runtime client from the AWS SDK for JavaScript v3.
The latest stable version of Node.js and npm installed.

If you're unsure about enabling Amazon Bedrock models, you can follow the steps (from step 7 is applicable) in the Amazon Bedrock student workshop, workflow 2.

Creating the My Affirmations Web App

To create the web app, use the following command:

npm create vite@latest my-affirmations-app

and select Vanilla for framework and JavaScript for variant.

Then follow the instructions to ensure the basic 'Hello World' app works:

Stop the app, and make the following changes to the initial code base:

The files counter.js and javascript.svg are not used and can be ignored or deleted.
The files index.html, main.js, and style.css need edits as follows.

Changes to index.html

Change the entire contents of index.html to:

Remember to save and close the file.

Changes to style.css

Replace the entire contents of style.css with the following styles.

If these colours or styles upset you, feel free to change them. I have no style or fashion sense, according to my 4 teenagers anyway.

Changes to main.js

Replace the entire contents of main.js file with:

Once you have saved all the edits, try npm run dev again and you will see a rather paltry selection of 4 basic affirmations. It's time to add some LLM power with Amazon Bedrock.

Adding Amazon Bedrock Converse API Functionality

Now we'll update the project to connect to Amazon Bedrock so we can send prompts to LLMs and receive responses.

Install/Update AWS SDK Bedrock runtime

Before proceeding, ensure you have installed/updated the AWS SDK Bedrock runtime:

npm install @aws-sdk/client-bedrock-runtime

Configure AWS Credentials

To ensure you have your AWS access key and secret (and session token if you require that), follow this guide Configure the AWS CLI.

Note that Vite will not read shell variables directly unless each one is prefixed with VITE_ (so VITE_AWS_ACCESS_KEY_ID instead of AWS_ACCESS_KEY_ID)

You can use a .env.local file to store them and expose them to Vite if pasting them into the shell and remembering to prefix them with VITE_ gets annoying. Detailed steps for creating the .env.local file can be found at the start of workflow 3.

Ensure you have completed this before proceeding, as Amazon Bedrock will only respond to accounts that have the correct credentials and permissions.

Adding Converse API Calls

The only file we need to edit this time is main.js. Replace the entire contents with:

Note lines 4 and 5 where models are specified. Only one of these can be uncommented at a time. These model ids must match the models you have enabled on your account.

This code only works in a single prompt and single response mode. The model is not sent previous responses or prompts so it does not have a history of the 'conversation'.

While the initial model, anthropic.claude-v2 can work with the previous Messaging API, the Claude 3 models anthropic.claude-3-haiku-20240307-v1:0 require the Converse API.

Testing My Affirmations with Converse API

When we run the app again, with npm run dev we expect that new and generated affirmations will appear on load, and every time we request another.

What's Next?

If you like this content and you're a university or college student, then please consider joining (or starting!) an AWS Cloud Club. If you'd like to see this app built, I'll be coding it live at the Generative AI Festival at the end of August. It's free to join and online!

If you are not a student but fancy some more reading and coding, there are some really great articles here on Community.aws all about Amazon Bedrock.

Conclusion

Coding doesn't have to be all work and no play. Sometimes, it's refreshing to take a step back and work on a simple project that promotes mindfulness and inner calm. The My Affirmations app is a perfect example of such a project, allowing developers to explore the power of Amazon Bedrock's Converse API while creating uplifting affirmations.

Coding can be a creative outlet, a way to bring positivity and inspiration into the digital world. So, the next time you find yourself burning out or in need of a coding break, consider diving into a quick project like this. You might just rediscover the joy of coding.

About the author

Stephen Howell is an Academic Developer Advocate for AWS Developer Relations. He has 30 years experience in software engineering, lecturing, program management, and the education industry.

He career has included academic roles in Dublin City University and Technical University Dublin, and technical roles in IBM, Microsoft, and AWS. His former job titles have included teacher, lecturer, software engineer, and scarecrow.

Stephen is an advocate for neurodiversity awareness and improving accessibility in technology for all.

Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.

Site Terms, Privacy, and more.