Save a Code Snippet and Have It Augmented With AI

Pieces allows you to save code snippets and automatically add context using AI. This helps you keep track of important code, make it easily searchable, and provide additional information like tags and relevant documentation links.

The generated context includes:

• The programming language
• A title for the code snippet
• A set of generated tags
• A description for what the code is doing
• Suggestions for searches to learn more about the concepts in the snippet
• Any people related to this snippet. This is found from the Git history if the file is in a Git repository

Prerequisites

VS Code

Before you begin, ensure you have:

• Pieces installed and running on your machine
• The Visual Studio Code Pieces Extension installed
• A code file, folder of code, or project open in VS Code

Pieces Desktop

Before you begin, ensure you have:

• Pieces installed and running on your machine

• A code snippet to save. This can be a code file, code on your clipboard, or a screenshot of code.

  Example code snippet:

  def say_hello():
      name = input("What is your name? ")
      print("Hello, " + name + "!")
  
  say_hello()

  Or download as a Python file.

  If you want to try out an image, download this one:

Pieces Web Extension

Before you begin, ensure you have:

• Pieces installed and running on your machine

• A supported browser. Currently the Pieces Web Extension is available for Chrome, Edge, Firefox, Brave, and Opera.

• The relevant Pieces Extension installed

  • For Chrome, Brave, and Opera use the Pieces Chrome Extension
  • For Edge use the Pieces Edge Add-On
  • For Firefox use the Pieces FireFox Add-On.

• A web page with code snippet to save. For example:

  def say_hello():
      name = input("What is your name? ")
      print("Hello, " + name + "!")
  
  say_hello()

JetBrains

Before you begin, ensure you have:

• Pieces installed and running on your machine
• The Pieces JetBrains Plugin installed in your JetBrains IDE of choice
• A code file, folder of code, or project open in your JetBrains IDE

Obsidian

Before you begin, ensure you have:

• Pieces installed and running on your machine
• The Pieces Obsidian Plugin installed
• A note in Obsidian with a code block

Visual Studio

Before you begin, ensure you have:

• Pieces installed and running on your machine
• The Visual Studio Pieces Extension installed
• A code file, folder of code, or project open in Visual Studio

Steps

1. Find the code to save

VS Code

Inside an open file in Visual Studio Code, select the code block you want to save as a snippet.

Pieces Desktop

Locate the code you want to save as a snippet.

• If you want to save a snippet from your clipboard, copy the code
• If you want to save a snippet from a code or image file, locate the relevant file

Pieces Web Extension

In your browser, locate the code block on a web page that you want to save as a snippet.

When you hover your mouse over it, you should see Pieces options below the code block.

JetBrains

Inside an open file in your JetBrains IDE, select the code block you want to save as a snippet.

Obsidian

In Obsidian, locate the code block in a note that you want to save as a snippet.

When you hover your mouse over it, you should a Pieces button on the bottom of the code block.

Visual Studio

Inside an open file in Visual Studio, select the code block you want to save as a snippet.

2. Save the Code Snippet

VS Code

Right-click on the selected code, and select Pieces -> Save Current Selection to Pieces.

Pieces Desktop

In Pieces Desktop, ensure the Saved Materials tab is visible.

• If you have copied code to the clipboard, use the Save Clipboard Contents button on the bottom left to save the contents of your clipboard as a snippet.

• If you have a code file, or a screenshot of code, drag and drop this into Pieces Desktop.

Pieces Web Extension

Hover your mouse over the code snippet, and select the Copy and Save button that will appear.

JetBrains

Right-click on the selected code, and select Save to Pieces.

Obsidian

Select the Pieces button on the bottom of the code block to see the various Pieces Options. Select Save code to Pieces.

Visual Studio

Right-click on the selected code, and select Pieces -> Save to Pieces.

The snippet will be saved to Pieces. Pieces will automatically add context such as tags, links to documentation, information extracted from any Git history, and other relevant information.

3. Review the Enriched Snippet

After Pieces has had a few seconds to process the snippet, review the snippet and the added context.

VS Code

Select the Pieces Explorer from the Activity Bar. This will then show all the saved snippets, grouped by programming language.

Select the new snippet to see the generated annotations.

Pieces Desktop

From the Saved Materials tab, there is a list of the saved snippets on the left-hand side. When you select a snippet, the code and annotations are shown in the main pane.

To view all the annotations, select the View All Context button.

This will expand a pane allowing you to see all the captured context.

Pieces Web Extension

Select the Pieces Web Extension from the browser toolbar.

This will bring up the Pieces Web Extension pane. Select Saved Snippets to show a list of all the saved snippets.

Select the new snippet to see the generated annotations.

JetBrains

Select Pieces from the Tool Bar. This will then show all the saved snippets, grouped by programming language.

Double-click the new snippet to see the generated annotations.

Obsidian

Select Pieces For Developers from the Ribbon.

From the pane that appears, make sure Saved Materials is selected. This will then show all the saved snippets. Select the newly added snippet to see the code.

Visual Studio

Open the Pieces Explorer by selecting View -> Other Windows -> Pieces -> Pieces Explorer.

Now that the Pieces Explorer is open, it will then show all the saved snippets, grouped by programming language.

Double-click the new snippet to see the generated annotations.

The generated enrichments include:

• The programming language
• A title for the code snippet
• A set of generated tags
• A description for what the code is doing
• Suggestions for searches to learn more about the concepts in the snippet
• Any people related to this snippet. This is found from the Git history if the file is in a Git repository

Next Steps

• Manage your code snippet
• Share your code snippet