Write Less, Produce More with CodeWhisperer: A Review and Tutorial

In recent years, with the introduction of general purpose tools, like ChatGPT and Google Bard, the adoption of Generative AI in businesses across the globe skyrocketed. Indeed, statistics on the use of Gen-AI tools for code generation indicate that they are becoming very popular among software development firms.

Like many developers in the current landscape, I’ve dabbled with Gen-AI using ChatGPT, experiencing a rollercoaster of results — some were mind-blowing, while others were underwhelming.

Based on that experience, a few months ago, I decided to ride the wave of assisted software development. Being a committed AWS Developer, I opted for Amazon CodeWhisperer as my guide.

What is CodeWhisperer?

CodeWhisperer is an Amazon tool that uses artificial intelligence to generate code. You can find a general description of this services in the Amazon Web Services official page.

Its main features are:

• Real-time code generation: CodeWhisperer can generate code suggestions ranging from snippets to complete functions in real-time in the IDE based on existing comments and code.
• Support for various programming languages: it can generate code for the most common programming languages, like JavaScript, HTML/CSS, Python, Java, TypeScript, and many others.
• IDE Integration: the tool is compatible with a lot of IDEs like Visual Studio Code, PyCharm, IntelliJ, AWS Cloud9, the AWS Lambda console, JupyterLab, and Amazon SageMaker Studio.
• Code security: CodeWhisperer can flag or filter code suggestions that resemble publicly available code. Moreover, it can scan the code to identify hard-to-find security vulnerabilities and provide code suggestions to resolve the identified issues.

In essence, CodeWhisperer is designed to help developers write less code and produce more in less time.

Enough talk, let’s see how to use CodeWhisperer to boost productivity.

Hands On

For the demonstrations, I’ll use Visual Studio Code.

How to Install it

First, you’ll need to install the AWS Toolkit extension.

Once that’s done, in the toolkit tab, you’ll need to log in to CodeWhisperer using the AWS Builder ID or IAM Identity Center.

Sign In with AWS Builder ID

To sign in with an AWS Builder ID, click on the “Use for free with AWS Builder ID” button. A new tab will open in your default browser. From there, follow the instructions to create a new Builder ID or log in with an existing one.

Sign In With SSO

To sign in via SSO, you’ll need to go to the appropriate section, enter the access link to the start URL, and select the region. Then, log in with your organization’s credentials, and you’re all set.

Now we’re ready to use CodeWhisperer to create a simple serverless application.

For macOS users, it’s possible to use CodeWhisperer to generate suggestions in the CLI as well.
Please refer to the official AWS documentation for the installation guide.

Infrastructure

CodeWhisperer includes support for Infrastructure as Code for CloudFormation (YAML and JSON), AWS CDK (TypeScript and Python), and HashiCorp Terraform.

All you need to do is insert comments specifying which resources we want to include in the stack (in our case, CDK).

In the example below, all I had to do was to write a comment:

“Cakes lambda, that reads items from the cakes table”

Suggestions should start automatically, but if they don’t, you can use the following shortcuts:

⌥ + c on Mac or alt + c on Windows. You can scroll through the various suggestions with the right and left arrows and confirm the suggestion with a tab.

There were a couple of errors in this case, but they were very easy to fix.
In capable hands, it can save a lot of time.

Lambda

Writing a lambda handler is as easy as drinking a glass of water, all you have to do is write a comment about what you expect from the function, and you’re done.

In real use cases, with larger code bases, the suggestions will be even more accurate. Thanks to the toolkit's integration within the IDE, CodeWhisperer will have the entire project as context. This will allow it to provide suggestions consistent with the existing code and with a lower probability of generating hallucinations.

An hallucination is a phenomenon where a large language model (LLM) — often a generative AI chatbot or computer vision tool — perceives patterns or objects that are nonexistent or imperceptible to human observers, creating outputs that are nonsensical or altogether inaccurate

Frontend

As for the backend, the generation of components (in this case I used React) is very simple.
With JSDocs, it is possible to generate components with impressive accuracy.

In this case, all I had to do was write what the component does, what props it accepts, and what it should show, and with a few “tabs” we have the card that shows the data we want to display.

From here the possibilities are limitless. Suppose we want to render the “yumFactor” in a separate component.

We create a new file, with a specific prompt.

And we will have a very simple component that will show the rating with emojis. Obviously, CodeWhisperer also allows you to handle more advanced cases by simply inserting more comments inside the component.

And finally, all you have to do is position the cursor where you want to insert the yumFactor and the suggestion will arrive automatically.

For a better Dev Experience, I recommend starting with a generic prompt that returns a code that can work and then go into detail with targeted comments, instead of a single super specific and detailed prompt at the beginning.

The tool supports a variety of libraries and frameworks.

Among the main ones, we find React, Angular, and VueJS which are the most adopted at the moment.

For VueJS, however, support for Single Files Components is not yet available, but they are currently training the model. We do not have a public roadmap, so we do not yet know when they will be available.

Is it worth?

Short answer: yes.

For individual users, it’s 100% free, while the enterprise version costs $19 per month per user, a price in line with other GenAI companions, with the difference that CodeWhisperer also includes AmazonQ and is particularly suitable for all AWS Developers, since is trained with AWS code.

According to a productivity challenge conducted by Amazon, it was found that CodeWhisperer increases the development speed by 57%, even though in my experience, I have noticed a smaller improvement, but significant enough to far outweigh the monthly cost of the service.

Conclusions

The examples shown are just a small part of the use cases supported by this fantastic tool, among many others we have the generation of mocks, unit tests, localizations with i18n, code checks.

Making a list of pros and cons would be somewhat superfluous, as during my usage I have not found any downsides in using this service. The only aspect that needs to be emphasized is that, like other GenAI tools, it must be used judiciously. If you know how to use it, it leads to great results, otherwise, it results in a waste of time.

CodeWhisperer is a revolutionary tool for code generation, it does not replace the experience and talent of a good developer. By eliminating the most boring and repetitive tasks, it allows you to focus more on the activities that require more attention, consequently reducing development times.