DEV Community

Cover image for Pieces: Your Ultimate Coding AI Best Friend
Christine Belzie
Christine Belzie

Posted on • Updated on

Pieces: Your Ultimate Coding AI Best Friend

Table of Contents

Time to be honest

I have a confession to make. I struggle with describing the code snippets I use in my technical articles. I know, I know, itā€™s shocking, but all hope isnā€™t lost. For the past few months, I have been using this awesome tool to help me overcome this struggle. This, my friend, is called Pieces. I first learned about it from my friend, @sophyia, a former DevRel at the company. She asked me to join their guest writing program after reading my articles on freeCodeCamp's website. Iā€™m a believer in trying a product before writing about it. So, I decided to download the desktop app and install the Chrome extension to see what itā€™s about. After a few days of using it, I was hooked. Now before I start sharing more tech confessions, let me tell you what exactly Pieces is.

Is Pieces candy?

As delicious Reeseā€™s Pieces is, this type of Pieces is not something you can eat. It is actually an free AI tool that assists when you are coding.Think of it as a technical Tinkerbell from Peter Pan1. If you want to learn more about what Pieces can do, check out their short intro video here ā¬‡ļø

Now that you two have met, let me show you how I use Pieces in my workflow.

Pieces: the code catcher

In the past, Iā€™d save code snippets that I wanted to use in my blog posts with the Chrome browser's bookmark feature. Unfortunately, Iā€™d either scramble through so many tabs or the Bookmarks tab to find them. This left me with a headache. Once I started using Piecesā€™ web extension, I had a much easier time finding my saved code snippets. Hereā€™s how.

Step one: Highlight a line of code

Screenshot of highlighted code

Step two: Right-click and pick the option, Save to Pieces.

Screenshot of Save to Pieces option being highlighted

Step three: Go to Saved Snippets area of the Desktop app

Screenshot of highlighted code appearing in the Saved Materials area of the Desktop app

And viola, a saved code snippet! It's like a technical version of a Pokeball for catching Pokemon2!šŸ˜Š Pretty cool right? šŸ˜‰

Pieces: Your Ultimate Coding AI Best Friend

Now before I start rambling about this feature, there's another one I want to show you! šŸ˜€

Pieces: the codeā€™s pokĆ©dex3

In the Desktop app, thereā€™s a feature called Copilot chat. Itā€™s like the Pokedex but for coding! šŸ˜€

Pieces: Your Ultimate Coding AI Best Friend

I tend to use it if Iā€™m struggling with fixing a line of code Iā€™m creating for my open source contributions or projects. For example, I was working on the JavaScript file for my 404 page project.

GitHub logo CBID2 / 404-page

This is the 404 page I built for Codedexā€™s monthly challenge

404-page

Description

This is my submission for Codedexā€™s February monthly challenge.

The Challenge

The goal is to redesign their website's 404 page.

Inspiration

Since Codedex's website design is video game themed, I thought back to my childhood and how I'd get annoyed whenever I saw a Please Standby warning while playing games like Pokemon Silver on my Game Boy Color, so I decided to bring this experience to my submission for the challenge.

The Result

Preview of the final result

View Demo

Credits






I wanted to reference a line of code from that file in the project's README but I was struggling to describe it. After doing some mental ping pong, I typed my code in the copilot chat and asked for some for help:

Pieces: Your Ultimate Coding AI Best Friend

In the above screenshot, the copilot explains that my code snippet selects the search input field and search button elements from the webpage. It also mentions that after the user clicks on the search button, the event listener sends the user to their desired section of Codedex's website. Even though I didnā€™t win the challenge, I did win in knowledge! šŸ˜€

Pieces: the time traveler

In the Pieces Copilot, there is a new feature called Live Context. It looks back at the content you recently viewed. It's kind of like a time machine minus the risks of changing peopleā€™s futures or causing them to not exist. Now before I start rambling on about the cons of time traveling, letā€™s see how it works4:

Click on the New Chat button.

Step 1 of using Live Context

Turn on the Live Context toggle.5

Step 2 of using Live Context

Then, type your question or idea in the chat or use the Suggested Prompts.

Step 3 of using Live Context

As shown in the screenshot above, Iā€™ve made it to the writing stage of my technical article. In the past, I would rely on my brain to remember what Iā€™ve written, which gets annoying. Once I started using the Live Context feature, it was easier for me to track my progress. This feature is also helpful if you are looking through files in a large codebase. For example, I was reviewing an issue for an open source project, but I was not sure which files needed the changes. So I went to the Copilot chat, typed ā€œWhere can I make add the canonical links?ā€, and got this response:

Screenshot of my conversation with the copilot chat

This, I got advice on how to structure the canonical link and where to place them. All in all, the new Live Context feature is awesome. Need more tips? check out the @get_pieces teamā€™s blog post, 20 Novel AI Prompts Made Possible Only by Pieces Copilot+.

Things to improve and add in the future

As much as I found Pieces enjoyable to use, there are some aspects of the tool that can use some improvement. Having to turn on the Live Context switch each time I start a chat on the Desktop app can get a bit tedious. So it would be beneficial to have the option to toggle the button on or off once. Also, the Co-pilot chat feature does not have a text-to-speech option. This can make it difficult for users with low motor skills to read the AI's long responses. Furthermore, adding this option would make reading these responses more bearable.

In the future, it would be awesome if there is a mobile version of the Desktop app. I sometimes work on my blog posts on my tablet, so having this would make it easier for me to finish them, especially if Iā€™m away from my laptop.

Now itā€™s your turn

There you have it folks, my product review of Pieces! Whether you are a technical writer or a developer, it is a great tool that improves your workflow. Also, the people at the company receptive to feedback and works fast to address your concerns. Overall, I recommend adding Pieces to your tech stack. Now enough of me talking, click on the links below to download the tool, join the community, connect with me, and start working! šŸ™‚

Install Pieces šŸ¤–
šŸ¤ Join Pieces' Community
Check out my Linktree šŸŒ

Credits

Pokedex GIF by 1jps

Pokemon GIF by ruined childhood


Footnotes


  1. This is a fairytale about a forever young boy would takes a group of British children to his home island, NeverlandĀ ā†©

  2. PokĆ©mon is a popular anime from the 90ā€™s. It's where children catch animals with powers and train them for fights.Ā ā†©

  3. PokĆ©dex is a tool that the characters in PokĆ©mon use to track information about the creatures they catch, such as their names, powers, weaknesses, etc. Ā ā†©

  4. The Linux version of this feature will be released soon. With that in mind, this brief tutorial is macOs-focused. If you need more help, check out the Live Context section of Piecesā€™ documentation.Ā ā†©

  5. Make sure that you enable the Workstream Pattern Engine enabled to gather the context first. To learn more about this, check out this section of the Live Context tutorialĀ ā†©

Top comments (16)

Collapse
 
valeriahhdez profile image
Valeria writes docs

Awesome article Chrissy! I haven't explored much the live context feature. Your article gave me a good idea on how to use it.

I didn't understand some of the Pokemon references, though šŸ˜…

Virtual hugs

Collapse
 
cbid2 profile image
Christine Belzie

Thanks @valeriahhdez. Pokemon was a huge anime show back in the late 90ā€™s. It's about kids who befriend and train wild animals.

Collapse
 
karim_abdallah profile image
Karim Abdallah

Great Article šŸ™Œ

Collapse
 
cbid2 profile image
Christine Belzie

Thanks @karim_abdallah! šŸ˜Š I hope you find Pieces as enjoyable as I do.

Collapse
 
nfa1 profile image
Nilo

awesome article Chrissy! Iā€™m planning to use Pieces soon and will use your article as my go to tutorial. šŸ«”šŸ«”

Collapse
 
dumebii profile image
Dumebi Okolo

Amazing!

Collapse
 
bytevillage profile image
Bytevillage

Amazing content!

Collapse
 
emmz3230 profile image
Emmanuel Samuel

great article

Collapse
 
sophyia profile image
Sophia Iroegbu

Yayy! The article is out! This is an amazing read, buddy šŸ”„

Collapse
 
hrushikesh_joshi_f694250b profile image
Hrushikesh Joshi

to be honest, i didnt find much use of Pieces for myself, it does allow us to select project folders but wont allow us to ask questions on top of those projects (or maybe i didnt find that option).

Collapse
 
cbid2 profile image
Christine Belzie • Edited

Hey @hrushikesh_joshi_f694250b. What I find helpful to mention the file in the questions you type in the Co-pilot chat after clicking on the Folders option . Try that

Collapse
 
idrinth profile image
Bjƶrn BĆ¼ttner

Love the article!

Collapse
 
rashedulhridoy profile image
Rashedul Hridoy

Nice <3

Some comments may only be visible to logged-in visitors. Sign in to view all comments.