Productive coding with Amazon Q Developer inline chat
Evolving a Tic Tac Toe game with Amazon Q Developer's new inline chat feature!
Mohammed Fazalullah
Amazon Employee
Published Oct 29, 2024
We just announced the launch of inline chat on Amazon Q Developer in your IDE and in this blog post I take it for a spin!
I will use a Tic Tac Toe game I have as a toy project, that is built in HTML, CSS and vanilla Javascript, to demonstrate how inline chat helps me enhance my code and be productive. And I have Amazon Q Developer extension setup on VS Code.
Here's a quick look at what the code looks like. Nothing fancy and all the code is in a single HTML file (
<style>
and <script>
sections collapsed).And this is what the game looks like:
Now you would have noticed that the game resets the board and the players start all over again. To make the game more exciting it'll be awesome to have the players track how many games have been won/lost between them (who doesn't love a good dose of healthy competition!).
The other thing is while plain CSS is being used in the code, I want to switch to using SimpleCSS as a way to make it easier for anyone new to CSS to still learn enough on styles and contribute to the code.
So to summarize, I have 2 requirements that I want to work on:
- Add a scoreboard to track games won/lost between players
- Migrate from plain CSS to SimpleCSS
If you are new to Amazon Q Developer, there are 2 ways to interact with Amazon Q Developer. The first is through the chat window and the other is in the code. Inline code suggestions based on existing code is something Amazon Q Developer has had since it's launch, and now with inline chat the benefits of in-IDE chat combines with the ability to directly update code, thereby allowing developers to describe issues or ideas directly in the code editor while selecting code, and receive AI-generated responses that are seamlessly integrated into their codebase in real-time.
Let's see this in action!
To get the inline chat feature to help me code the scoreboard feature, I select all the code and press ⌘ + I on Mac or Ctrl + I on Windows. Then in the panel that pops up above I prompt Q Developer to:
“Add feature to add scorecard to track number of games won by both players”
Q Developer shows me in green the lines that will be added, and the lines that will be removed in red.
The recommendation looks good to me so I hit Accept for Q Developer to merge the changes.
On reloading the page we see the scorecard in action!
Inline chat returns a diff on the code change suggestions at the points in my code where the changes will be made. This makes it easy to see what's being added and removed. No more moving between windows to fetch code suggestions and replace in the code!updating code in place.
See Q developer inline chat in action when implementing the scorecard feature:
I select all the code again and press ⌘ + I on Mac or Ctrl + I on Windows. Then in the panel that pops up above I prompt Q Developer to:
"Migrate the CSS to use simplecss instead of plain css. make sure the original look and feel including the colours and the styling looks the same as before."
After accepting the changes, and on reloading the game we see the below:
Well at least the game still works! But there's some fixing that needs to be done. For this I select the CSS styling within the
<style>
tags and I prompt Q Developer to:"Fix the header and layout on the screen. The sizes look off."
Much better!
One last step as part of code hygiene is to add documentation to the JavaScript functions for future developers to understand the functionality implemented for the game and the scoring. On pressing ⌘ + I on Mac or Ctrl + I on Windows again, I prompt Q Developer to:
"Add documentation to the JS functions explaining what they do"
See Q developer inline chat in action when migrating from plain CSS to SimpleCSS and fixing some styling issues along the way, along with adding documentation to the JavaScript functions at the end:
Amazon Q Developer's new inline chat feature takes AI-assisted development to a whole new level by seamlessly integrating chat capabilities directly within the IDE. This eliminates context-switching between windows while providing developers with cutting-edge AI assistance for tasks ranging from code generation to documentation, streamlining their workflow and allowing them to focus on innovation.
To know more about this release, read the launch blog post authored by my colleague, Jose Yapur, for more details.
Check out the Amazon Q on AWS Developer Center and documentation. Engage with AWS Community posts here. Also don’t forget to follow AWS Developers social profiles - YouTube, Twitter/X, LinkedIn, Instagram, and Twitch —to stay updated with the latest news and content!
Any opinions in this post are those of the individual author and may not reflect the opinions of AWS.