Add JupyterLab product focused guide

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "streetsidesoftware.code-spell-checker"
+    ]
+}

.vscode/settings.json

@@ -4,6 +4,10 @@
         "mdx"
     ],
     "cSpell.words": [
+        "ipynb",
+        "jupyterlab",
+        "quickstart",
+        "raycast",
         "webp"
     ]
 }

docs/extensions-plugins/cli/quickstart.mdx

@@ -12,7 +12,7 @@ In this tutorial, you'll learn how to set up and start using the Pieces CLI. We'
 
 <CTAButton
   href={pieces_app.links.extensions.cli}
-  label={'Install on PYPI'}
+  label={'Install on PyPI'}
   icon={'/assets/pieces_logos/white_circle.png'} 
   iconDark={'/assets/pieces_logos/black_circle.png'} 
   type={'secondary'}

docs/extensions-plugins/jupyterlab/features.mdx

@@ -0,0 +1,88 @@
+---
+title: Features
+description: Learn how to use the Pieces JupyterLab extension features to streamline your workflow and boost productivity.
+---
+
+import Video from "/src/components/Video";
+
+## Pieces Copilot
+
+The [Pieces Copilot](/features/pieces-copilot) is available using the Pieces View from the Ribbon Menu, and selecting the bot logo on the top slider to switch to the copilot. From here you can interact with the Pieces Copilot and receive answers that are specific to your notebooks.
+
+This [has a familiar chat experience spread across all your favorite tools](/features/pieces-copilot#plugin-integrations). The Copilot chat window has the same familiar features integrated into multiple tools: VS Code, JetBrains, Visual Studio, your browser, Obsidian, and more.
+
+### Enrich Selected Code
+
+Select any text within a code cell in your notebook, right-click and select **Enrich Selection via Pieces**. The Pieces Copilot will add a helpful comment at the top describing your code.
+
+### Ask Pieces
+
+Select any text within a code cell, right-click and select **Ask Pieces about your Selection**. In the dialog that appears, ask a question about the code. A new Copilot chat wil be started providing an answer to the question you asked.
+
+## Snippets
+
+### Save your Snippets
+
+To save a snippet, do one of the following:
+
+- Highlight the text, right-click, and select **Save to Pieces**.
+- Click the Pieces button within any code block.
+- Highlight the desired code and use the keyboard shortcut `<Ctrl>+<Shift>+<S>`.
+-. Use the keyboard shortcut `<Ctrl>+<Shift>+<Enter>` to save the entire currently active cell.
+
+![Example of saving an active cell as a snippet](https://storage.googleapis.com/pieces_multimedia/PROMOTIONAL/PIECES_FOR_DEVELOPERS/JUPYTER/MACOS/RIGHT_CLICK_SAVE_SELECTION/16X9/PIECES_FOR_DEVELOPERS-JUPYTER-RIGHT_CLICK_SAVE_SELECTION-16X9-MACOS-6_22_2023.gif)
+
+### Save your Snippets using the embedded Pieces Button
+
+Pieces adds an **embedded Pieces button** into your code cells to quickly save the contents as a snippet.
+
+![Example of saving an active cell using the embedded buttons](https://storage.googleapis.com/pieces_multimedia/PROMOTIONAL/PIECES_FOR_DEVELOPERS/JUPYTER/MACOS/EMBEDDED_BUTTON_SAVE_ACTIVE_CELL/16X9/PIECES_FOR_DEVELOPERS-JUPYTER-EMBEDDED_BUTTON_SAVE_ACTIVE_CELL-16X9-MACOS-6_22_2023.gif)
+
+### Find your Snippets
+
+Open the Pieces View from the Ribbon Menu.
+
+- Sort by **recent** or by **language**
+- Search your snippets to save time manually looking through your files.
+
+![Example of searching for and inserting snippets](https://storage.googleapis.com/pieces_multimedia/PROMOTIONAL/PIECES_FOR_DEVELOPERS/JUPYTER/MACOS/SEARCH_AND_INSERT/16X9/PIECES_FOR_DEVELOPERS-JUPYTER-SEARCH_AND_INSERT-16X9-MACOS-6_22_2023.gif)
+
+### Use your Snippets
+
+- Copy and share your snippets from the Pieces View
+- You can expand your code snippets to view automatically generated metadata
+- View your snippets with syntax highlighting
+
+![Example of viewing all context related to snippet in expanded view](https://storage.googleapis.com/pieces_multimedia/PROMOTIONAL/PIECES_FOR_DEVELOPERS/JUPYTER/MACOS/EXPANDED_VIEW/16X9/PIECES_FOR_DEVELOPERS-JUPYTER-EXPANDED_VIEW-16X9-MACOS-6_22_2023.gif)
+
+### Share your Snippets
+
+To share a snippet, do one of the following:
+
+- Highlight the text, right-click, and select **Share via Pieces Link**.
+- Click the Pieces Share button within any code block/in the Pieces View.
+- Highlight the desired code and use the keyboard shortcut `<Ctrl>+<Shift>+<K>`.
+- Use the keyboard shortcut `<Ctrl>+<Shift>+<X>` to share the entire currently active cell.
+
+![Example of generating a shareable link for a snippet](https://storage.googleapis.com/pieces_multimedia/PROMOTIONAL/PIECES_FOR_DEVELOPERS/JUPYTER/MACOS/SNIPPET_BUTTON_SHARE/16X9/PIECES_FOR_DEVELOPERS-JUPYTER-SNIPPET_BUTTON_SHARE-16X9-MACOS-6_22_2023.gif)
+
+Pieces stores all of your snippets for seamless sharing. Once a snippet is shared, a link is created and copied to the clipboard.
+
+### Discover Snippets
+
+Pieces can discover and save snippets from your projects. To discover snippets, do one of the following:
+
+- From the Pieces View, ensure the snippet pane is selected, then drop down the grouping box and select **Discover**
+- Use the keyboard shortcut `<Ctrl>+<Shift>+<A>`
+
+![Example of discovered snippets in Jupyter Lab](/jupyterlab/PIECES_FOR_DEVELOPERS-JUPYTER-MACOS-SNIPPET_DISCOVERY-jupyterlab-snippet-discovery.gif)
+
+## Customize the Pieces settings
+
+To customize your Pieces for JupyterLab Extension settings, visit the **Settings Editor** from the **Settings** menu and then select `Pieces Settings`.
+
+You can adjust the following settings:
+
+1. Auto-open Pieces list view on snippet save
+1. Cloud capabilities
+1. Pieces server port

docs/extensions-plugins/jupyterlab/how-to-guides.mdx

@@ -0,0 +1,12 @@
+---
+title: How-to Guides
+description: Learn how to use different features of the Pieces JupyterLab Extension
+---
+
+import { CardWithCTA } from "/src/components/Card";
+import Grid from "/src/components/Grid";
+
+<Grid cols={2}>
+  <CardWithCTA title={'Save a snippet'} description={'Learn how to save a code snippet with AI context using the Pieces for JupyterLab Extension'} href={'/extensions-plugins/jupyterlab/how-to-guides/save-a-snippet'} ctaLabel={'Go'}/>
+  <CardWithCTA title={'Share a snippet'} description={'Learn how to share a code snippet using the Pieces for JupyterLab Extension'} href={'/extensions-plugins/jupyterlab/how-to-guides/share-a-snippet'} ctaLabel={'Go'}/>
+</Grid>

docs/extensions-plugins/jupyterlab/how-to-guides/resources/example.ipynb

@@ -0,0 +1,51 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "35bbb257-3bd4-433a-a302-81fef1b381fb",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from PIL import Image, ImageDraw\n",
+    "\n",
+    "# Create a blank image with white background\n",
+    "image_size = (200, 200)\n",
+    "image = Image.new('RGB', image_size, 'white')\n",
+    "draw = ImageDraw.Draw(image)\n",
+    "\n",
+    "# Define the circle parameters\n",
+    "center = (100, 100)\n",
+    "radius = 50\n",
+    "bounding_box = [center[0] - radius, center[1] - radius, center[0] + radius, center[1] + radius]\n",
+    "\n",
+    "# Draw the circle\n",
+    "draw.ellipse(bounding_box, outline='black', width=3)\n",
+    "\n",
+    "# Display the image\n",
+    "image"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "Python 3 (ipykernel)",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.12.4"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}