Pieces is the only AI tool you need to be a 10x developer🤯
Tags: tutorial, productivity, vscode, programming
Published: 2024-07-05 09:07:18

ChatGPT is boring and we all know it but I've something exciting that can take your dev skills to 10x.

It's an AI tool called Pieces, and I've been a huge fan for a long time. 

Today, we will cover Pieces and the complete guide on how it can help you be more productive.

One thing that you can do is browse the docs (web browser) and let the AI learn everything. You can ask doubts, and it will answer your doubts from those docs. And trust me, that's just scratching the surface in terms of cool features!

Let's break it down :)

---

## What is covered?

In a nutshell, we are covering these topics in detail.

1. What is Pieces and why should you use it?
2. A step-by-step guide on how to install Pieces (VSCode + Desktop + Chrome extension) with use cases.
3. Pieces Copilot+ with live context (most interesting one).
4. Popular apps built with Pieces.

{% cta https://pieces.app/?utm_source=devto&utm_medium=cpc&utm_campaign=anmol %} Visit Pieces 🔥 {% endcta %}

---

## 1. What is Pieces and why should you use it?

Pieces is also an AI tool but much more advanced and reliable.

It's designed to help developers through intelligent code snippet management, contextualized copilot interactions, and many more.

![pieces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sejqdluwi4qrz12rik2.png)

You can watch this quick video to get the basic idea.

{% embed https://www.youtube.com/watch?v=jqHomwNISVE %}

A safe way to describe Pieces is that it's a horizontal tool that works, learns, and provides value across the three main pillars of a developer’s workflow.

✅ 1. Research and problem solving.

You can close your 50 browser tabs and clear your search history, knowing that you've saved everything to Pieces.

![Research and problem solving](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/amlzxnllboe8qscq1z4l.gif)

&nbsp;

✅ 2. Collab with others and colleagues.

Keep track of critical context by sharing, instead of endlessly scrolling through old chat messages.

![collab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aggty8ghkofjcuvk1tlf.gif)

&nbsp;

✅ 3. Coding in the IDE.

Code smarter by centralizing your materials. Explain, comment, generate, save, reference, and reuse code in your editor, without ever leaving your active project. Whoa!

![Coding in the IDE](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pezmz3wny6ma9n9iarcu.gif)

&nbsp;

You can read the list of all the [cool features](https://pieces.app/features) and the [docs](https://docs.pieces.app/) if you're interested in exploring it yourself.

But the best part is that there are a lot of integration options so you never have to leave your flow.

You can read about [all of the plugins](https://pieces.app/plugins) that are available along with a direct install button and the option to learn more about each of the integrations. They have clearly described what all you can do in each of these and I love the detailing of these docs!

![plugin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkbf6ip7divosf2htx7y.png)

Pieces offers an AI-enabled way of going back in history to find the stuff we used and save code for later use. And with Pieces, you can change the LLM behind the Pieces Copilot so that you can continue using it when cloud models like ChatGPT go down.

---

## 2. A step-by-step guide on how to install Pieces with use cases.

I will be sharing how you can install Pieces along with the use cases that can give you a better understanding of how it can help you.

&nbsp;

> 🎯 VSCode Extension.

You can install it from the [VSCode extensions marketplace](https://marketplace.visualstudio.com/items?itemName=MeshIntelligentTechnologiesInc.pieces-vscode) or you can directly search it under extensions.

![extensions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jjgmcodqfemmfjfihbqp.png)

Any copilot chats and saved materials that you have in your IDE will be available across all your integrations and the Desktop App. 

&nbsp;

> ✅ Use cases.

a. You can right-click by selecting the portion of code and ask the copilot any questions that you want.

![vscode extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbshxfb87lb1oq5gd3wx.png)

In this case, I asked, "I'm trying to understand this code, can you explain in simple terms without jargon".

![pieces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0zrdol264x216ot1xp2.png)

b. Whenever you have an error in your code, simply open the quick fix menu and select `Pieces: Fix` to have the Copilot resolve your issue for you. Simple and efficient!

![fix code](https://storage.googleapis.com/pieces_multimedia/PROMOTIONAL/PIECES_FOR_DEVELOPERS/VS_CODE/MACOS/ANY_FEATURE/16X9/10-pieces-fix.gif)

c. You can save your snippet. It categorizes based on language type, which is handy when searching later on. Plus, it stores more smart information than you might expect :)

![save to pieces](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48ky9v3ti84f3jsf2ce7.png)

![stored snippet info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mohh45ty9wsz6yk5r16u.png)
<figcaption>stores a lot of smart info with snippet</figcaption>

&nbsp;

If you'd like to get a closer look at a snippet before adding it to your project, click on the snippet in the list view and it will open in a Markdown preview. 

You'll be able to see the snippet and its context, including any tags, descriptions, titles, related links, related people, and previously generated shareable links.

d. There are a lot of things like [auto save](https://docs.pieces.app/extensions-plugins/vscode#auto-save), [auto expansion](https://docs.pieces.app/extensions-plugins/vscode#auto-expansion), cloud feature. Read about [all of the use cases](https://docs.pieces.app/extensions-plugins/vscode) on the docs that you can do with the VSCode extension.

&nbsp;

> 🎯 Chrome Extension.

You can install the [chromium extension](https://chromewebstore.google.com/detail/pieces-for-developers-cop/igbgibhbfonhmjlechmeefimncpekepm), [Edge Addon](https://microsoftedge.microsoft.com/addons/detail/pieces-save-code-snippet/hglfimcdgonaeeobjckfdabcldfidmim), or [Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/pieces-save-code-from-the-web/) depending on the browser you're using. I'm going with Chrome!

![chrome extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0l3pn1ymodrcgb4caxdh.png)

&nbsp;

> ✅ Use cases.

a. The struggle of switching the tabs to check all the snippets is real which Pieces web extension solves quickly.

As you can see, we can find all of the saved snippets including the one which I saved earlier.

![saved snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/599z4tkyuqgw81s0pso5.png)

b. I was going through the next.js docs, Pieces extension on the web browser quickly grabbed all of the snippets suggestions that I could save.  I can quickly use it in the VSCode whenever I want without trying to visit the docs each time I need that code. 

![saved snippets suggestions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bto4nd28db41zesz19g7.png)

c. It will also give you a brief history of the last websites and the info on the snippets from each of them. You have full control over what you want to see.

![last 5 websites](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svyrpz1dv6fnzr9riqz7.png)

d. You can use the usual copilot chat from the browser itself without opening any other AI tool like ChatGPT.

![copilot chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f014s75fbqkbyzp4seu.png)

![chat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7noxu00unwihzpvr17r.png)

e. You can also change the settings based on your preferences.

![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4ati7c4nomy2xyph144.png)

![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4psg5luszpyaerjovjzr.png)

&nbsp;

> 🎯 Desktop App.

You can install it using [Pieces for Windows](https://docs.pieces.app/installation-getting-started/windows), [Pieces for macOS](https://docs.pieces.app/installation-getting-started/macos), and [Pieces for Linux](https://docs.pieces.app/installation-getting-started/linux) based on the operating system you're using. 

![pieces desktop](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ronwivta3849sqq382b.png)

I'm a Windows user with a love for Linux commands (using hyperterminal) which is why I'm going forward with Windows.

After installation, you will get Pieces Suite.

![pieces suite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8chgwtrvz027nvyxi1eg.png)

You can do it as follows.

![pieces intallation of desktop app](https://storage.googleapis.com/pieces_static_resources/vs_code_marketplace/GIFs/INSTALL_WINDOWS)

Their centralized storage agent (Pieces OS) works on-device, unifying various developer tools (including the desktop app) to bring all the features to the table.

If you're wondering what Pieces OS is then it enables Pieces products and local LLMs to operate 100% locally on your machine, with an option to connect to the cloud for backup, sharing, and cloud-based LLMs for code generation. You can read more about it on the [official docs](https://docs.pieces.app/installation-getting-started/what-am-i-installing).

Let's see the options that you need to do while installing Pieces for developers.

![step 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ws41gn86sq69t2ylib00.png)
<figcaption>step 1</figcaption>

&nbsp;

![step2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q74lyglzzvpc93h37p3x.png)
<figcaption>step 2</figcaption>

&nbsp;

![step 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyemysy1d5ld4ilseys9.png)
<figcaption>step 3</figcaption>

&nbsp;

![step 4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8qu8e1je137yzh6ptnr.png)
<figcaption>step 4</figcaption>

&nbsp;

![step 5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oxd8rbxpmx4thllrwkn.png)
<figcaption>step 5</figcaption>

&nbsp;

After doing all the steps, your starting screen will look something like this.

![starting screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54x2irt19ni480i4rs34.png)

&nbsp;

> ✅ Let's explore some of the awesome use cases that are damn helpful.

a. You can choose the LLM models for both cloud and on-device. The options are good enough.

![on-device](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jijr3uir6fd2vihhkdop.png)
<figcaption>on device llm models</figcaption>

![cloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8iwtlwagryqmuk6i0si.png)
<figcaption>cloud llm models</figcaption>
 
&nbsp;

b. It can access everything on your entire PC, including recent web searches, files, folders, and browsers to get the hang of what you do as a developer. You need to give permission!

c. You can use the search menu using `Ctrl + k` which is generally present in docs. We all use it on many websites and software like GitHub.

![search menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjvngpq918kjddphjfk7.png)

d. You get settings with a lot of options and a little info about each. I couldn't explore each of them because there are so many options!

![settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk0g5zqe4qcmwqbn3g5a.png)

e. You can do a global search, check saved materials, see workflow activity, and a lot more.

![workflow activity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py4ni7tni4rgatawjuo4.png)
<figcaption>workflow activity</figcaption>

&nbsp;

![snippet discovery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j35fmmr2jhzzsma1d2xb.png)
<figcaption>snippet discovery</figcaption>

&nbsp;

f. You can generate shareable links of the snippet, and save it to GitHub Gist under the option of Saved Materials.

![shareable links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e9vrx48x97ngvh7hbtxq.png)

![shareable links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gszv6071sl5js0i2f2ba.png)

g. But the most exciting feature for people who take screenshots is the option to extract code from the screenshot. I tried it and it was able to extract the code with 100% accuracy.

![input screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu6orxsc6xnxhuwabxhz.png)
<figcaption>input screenshot</figcaption>

&nbsp;

![extracted code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52qdvpt2sgz78igo9rbz.png)
<figcaption>extracted code</figcaption>

&nbsp;

Personally, there are a lot of small things that make the experience very good which I believe you need to explore yourself. 

For me, saving snippets, the ability to share them very easily, and the live context to check where I left off are slightly more reliable than others.

![manage conversation context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7vzz5rmnfm9sl5x7wzk.png)

Anyway, let's explore in deep on how we can enable the live context and what it actually does!

---

## 3. Pieces Copilot+ with live context.

The most recent concept of Live Context just made it next level. You can watch the demo that created the hype on Twitter!

{% embed https://youtu.be/aP8u95RTCGE %}

With this, Pieces Copilot+ can now provide hyper-aware assistance to guide you right back to where you left off. It's powered by the [Workstream Pattern Engine (WPE)](https://docs.pieces.app/product-highlights-and-benefits/privacy-security-data#live-context), which enables the world's first Temporally Grounded Copilot :)

![live context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0uviob21gou9njnair58.png)
<figcaption> It has all the data on what you worked on</figcaption>

&nbsp;

✅ Imagine you're working on your device as usual and exploring documentation for any framework. You can ask it specific questions like, "Can you explain the concept of ABC from the docs I recently viewed?" It provides detailed and accurate answers.

✅ Ask it, What was I working on an hour ago? and let it help you get back into flow.

✅ Or ask, "What did Anmol suggest I test in the latest release?" It stores everything you've worked on effectively.

Under the hood,  these screenshots are not saved, but captured, processed, and stored in a form that can be leveraged as context when you ask for it, and all of this happens entirely on your device. 

<q>None of your screen data is sent to the cloud.</q>

Just to let you know, Pieces' contextual understanding evolved from [copilots - this YouTube video](https://www.youtube.com/watch?v=BwPdotK4Dr4) and is actually the third step in the process.

&nbsp;

Let's see how to activate it on the Pieces desktop application.

a. Open the Pieces suite and then launch Pieces for developers.

![pieces suite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj1f179zkg4cesv2zc8r.png)
<figcaption>pieces suite</figcaption>

&nbsp;

![pieces for developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pua73f9i79ui7jmdcjzt.png)
<figcaption>pieces for developers</figcaption>

&nbsp;

b. Open the [power menu](https://docs.pieces.app/features/power-menu) using the default combination for Windows:

- Press `Ctrl + ↵ (Control + Enter)`

- Or Press `Ctrl + ⇧ + P (Control + Shift + P)`

Then go to settings and Machine Learning. Now, just click the on button beside the workstream pattern engine.

![search menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aaz1u4kgvw3w7ycdvp3k.png)
<figcaption>search menu</figcaption>
 
&nbsp;

![workstream pattern engine](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqwksu0ji66jifhijd1y.png)
<figcaption>workstream pattern engine</figcaption>

&nbsp;

c. As you can see, it's currently turned off. Simply click on it to grant the necessary permissions so it can run in the background and observe everything you do. 

I understand privacy concerns, I had them too. But, after thorough cross-checking, I can assure you it's completely safe to use. You can read more on the [official docs](https://docs.pieces.app/product-highlights-and-benefits/privacy-security-data#live-context).

d. You just need to click on the live context in the chat and voila! You can now use it easily.

![live context off](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eu05y2ooo26n01pjcviw.png)
<figcaption>live context: OFF</figcaption>

&nbsp;

![live context on](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsm8kgouo3a09209gvj0.png)
<figcaption>live context: ON</figcaption>

&nbsp;

You can use it as we discussed earlier.

![live context](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rx0z9zp51eceet11wbx0.png)

---

## 4. Popular Apps built with Pieces.

They have a bunch of SDK options for Pieces OS client with [TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript), [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin), [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python), and [Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart).

Since it's more like a tool there won't be so many projects but developers have still used it to build awesome projects.

### ✅ [DeskBuddy](https://github.com/ayothekingg/deskbuddy).

A community project that helps you understand, evaluate, and improve your coding habits through analytics and Copilot Conversation.

The primary language used is TypeScript.

You can check the [GitHub Repository](https://github.com/ayothekingg/deskbuddy).

&nbsp;

### ✅ [CLI Agent](https://github.com/pieces-app/cli-agent).

A comprehensive command-line interface (CLI) tool designed to interact seamlessly with Pieces OS. It provides a range of functionalities such as asset management, application interaction, and integration with various Pieces OS features.

The primary language used is Python.

You can check the [GitHub Repository](https://github.com/pieces-app/cli-agent).

&nbsp;

### ✅ [Streamlit & Pieces](https://github.com/pieces-app/pieces-copilot-streamlit-example).

The Pieces Copilot Streamlit Bot is an interactive chatbot application built using Streamlit, designed to provide users with a seamless interface to ask questions and receive answers in real-time.

The primary language used is Python.

You can check the [GitHub Repository](https://github.com/pieces-app/pieces-copilot-streamlit-example).

---

I think it's safe to say that Pieces is changing the world and as a developer, you should use it to your advantage.

For me, as a technical writer and a developer, Pieces is the only tool that I would need to make myself 10x productive.

I hope you loved the breakdown of Pieces, and let me know in the comments if you know any other cool features about Pieces.

Please join my community for developers and tech writers at [dub.sh/opensouls](https://dub.sh/opensouls).

|  If you like this kind of stuff, <br /> please follow me for more :)  |  <a href="https://twitter.com/Anmol_Codes"><img src="https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209" alt="profile of Twitter with username Anmol_Codes" ></a> <a href="https://github.com/Anmol-Baranwal"><img src="https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white" alt="profile of GitHub with username Anmol-Baranwal" ></a> <a href="https://www.linkedin.com/in/Anmol-Baranwal/"><img src="https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white" alt="profile of LinkedIn with username Anmol-Baranwal" /></a> |
|------------|----------|

Follow Pieces on DEV here.

{% embed https://dev.to/getpieces %}