Merge pull request #12 from mongodb-developer/local_mongodb

Updating lab docs to reflect local MongoDB changes

Author: ajosh0504

docs/30-dev-env/1-dev-env-setup.mdx renamed to docs/20-dev-env/1-dev-env-setup.mdx

@@ -7,11 +7,11 @@ import Screenshot from "@site/src/components/Screenshot";
 
     Navigate to [this](https://github.com/codespaces/new/mongodb-developer/genai-devday-notebooks?quickstart=1) link. Click the **Resume this codespace** button to resume the code space you created previously.
 
-    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/1-resume-codespace.png" alt="Resume codespace" />
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/1-resume-codespace.png" alt="Resume codespace" />
 
     Give the codespace a few seconds to restart. When files appear under the Explorer, click the file named `ai-rag-lab.ipynb`. This is the Jupyter Notebook you will be using throughout this lab.
 
-    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/3-nav-notebook.png" alt="Navigate to the notebook" />
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/2-nav-notebook.png" alt="Navigate to the notebook" />
 </details>
 
 :::tip
@@ -24,33 +24,56 @@ You will be working in a Jupyter Notebook in a GitHub Codespace throughout this
 
 Navigate to [this](https://github.com/codespaces/new/mongodb-developer/genai-devday-notebooks?quickstart=1) link. You will be prompted to sign into GitHub if you haven't already. Once signed in, click the **Create new codespace** button to create a new codespace.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/2-create-codespace.png" alt="Start a codespace" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/3-create-codespace.png" alt="Start a codespace" />
 
-Let it run for a few seconds as it prepares your environment. It will clone the repository, prepare the container, and run the installation scripts. Once the environment is built, you should see a list of files appear under the Explorer. 
+Let it run for a few seconds as it prepares a Docker container with all the required libraries and a MongoDB cluster.
+
+Once the environment is built, you should see a VS Code IDE with a list of files under the Explorer tab. 
 
 In the left navigation bar of the IDE, click on the file named `ai-rag-lab.ipynb` to open the Jupyter Notebook for this lab.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/3-nav-notebook.png" alt="Navigate to the notebook" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/2-nav-notebook.png" alt="Navigate to the notebook" />
 
 Next, select the Python interpreter by clicking **Select Kernel** at the top right of the IDE.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/4-select-kernel.png" alt="Select kernel" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/4-select-kernel.png" alt="Select kernel" />
 
 In the modal that appears, click **Python environments...** and select the interpreter that is marked as **Recommended** or **Global Env**.
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/5-python-env-modal.png" alt="Select Python Environments" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/5-python-env-modal.png" alt="Select Python Environments" />
 
-<Screenshot url="https://github.com/codespaces" src="img/screenshots/30-dev-env/1-dev-env-setup/6-select-recommended.png" alt="Select recommended interpreter" />
+<Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/6-select-recommended.png" alt="Select recommended interpreter" />
 
 That's it! You're ready for the lab!
 
+<details>
+  <summary>🦹 Use the MongoDB for VS Code extension to interact with the local MongoDB cluster from the VSCode IDE </summary>
+
+    In the left navigation bar of the IDE, click on the leaf icon. Under Connections, click the **Add Connection** button.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/7-add-connection.png" alt="Add MongoDB connection" />
+
+    In the tab that appears, click the **Connect** button.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/8-click-connect.png" alt="Click Connect" />
+
+    In the modal that appears at the top of the screen, enter the string `mongodb://admin:mongodb@mongodb:27017/` and hit `Enter` on your keyboard.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/9-enter-connection-string.png" alt="Enter connection string" />
+
+    If the connection was successful, you should see the cluster and its default databases under Connections. Any additional databases and collections created during the lab will appear here as well.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/20-dev-env/1-dev-env-setup/10-connections.png" alt="View connections" />
+
+</details>
+
 ## Option 2: Run locally
 
 :::caution
 During the lab, we will use GitHub Codespaces. These instructions are here just in case you can't use Codespaces or if you really, really, really want a local installation.
 :::
 
-If you want to run the notebook locally, follow the steps below:
+To run the lab locally, follow the steps below:
 
 * Clone the [GitHub repo](https://github.com/mongodb-developer/genai-devday-notebooks.git) for this lab by executing the following command from the terminal:
 
@@ -86,4 +109,4 @@ jupyter notebook
 
 * In the browser tab that pops up, open the file named `ai-rag-lab.ipynb`.
 
-<Screenshot url="localhost:8888/tree" src="img/screenshots/30-dev-env/1-dev-env-setup/7-jupyter-notebook.png" alt="Jupyter Notebook" />
+<Screenshot url="localhost:8888/tree" src="img/screenshots/20-dev-env/1-dev-env-setup/11-jupyter-notebook.png" alt="Jupyter Notebook" />

docs/20-dev-env/2-setup-pre-reqs.mdx

@@ -0,0 +1,26 @@
+# 👐 Setup prerequisites
+
+Replace any placeholders and run the cells under **Step 1: Setup prerequisites** section in the notebook.
+
+:::info
+
+Additional steps **if you are running the lab locally**:
+
+* Spin up a MongoDB Atlas cluster and obtain its connection string:
+
+    * Register for a [free MongoDB Atlas account](https://www.mongodb.com/cloud/atlas/register) if you don't already have one
+    * [Create a new database cluster](https://www.mongodb.com/docs/guides/atlas/cluster)
+    * [Obtain the connection string](https://www.mongodb.com/docs/guides/atlas/connection-string) for your database cluster
+
+* Set the `MONGODB_URI` variable to the connection string for your cluster as follows:
+
+```python
+MONGODB_URI = "<your_connection_string>"
+```
+
+* Manually set the value of the `SERVERLESS_URL` variable as follows:
+
+```python
+SERVERLESS_URL = "https://vtqjvgchmwcjwsrela2oyhlegu0hwqnw.lambda-url.us-west-2.on.aws/"
+```
+:::

docs/30-dev-env/_category_.json renamed to docs/20-dev-env/_category_.json

@@ -0,0 +1,38 @@
+import Screenshot from "@site/src/components/Screenshot";
+
+# 👐 Ingest data into MongoDB
+
+The final step to build a MongoDB vector store for the chatbot is to ingest the embedded article chunks into MongoDB.
+
+Fill in any `<CODE_BLOCK_N>` placeholders and run the cells under the **Step 5: Ingest data into MongoDB** section in the notebook to ingest the embedded documents into MongoDB.
+
+The answers for code blocks in this section are as follows:
+
+**CODE_BLOCK_5**
+
+<details>
+<summary>Answer</summary>
+<div>
+```python
+collection.insert_many(embedded_docs)
+```
+</div>
+</details>
+
+<details>
+  <summary>🦹 Visually verify that the data has been imported into the local MongoDB cluster </summary>
+
+    Click the leaf icon in the left navigation bar of the IDE.
+    
+    Ensure that you see a database called _mongodb_genai_devday_rag_, and a collection named _knowledge_base_ under it. 
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-prepare-the-data/4-ingest-data/1-verify-collection.png" alt="Verify collection" />
+
+    Click the **>** arrow next to _knowledge_base_ and note the number of documents.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-prepare-the-data/4-ingest-data/2-document-count.png" alt="Verify document count" />
+    
+    To preview a document, click the **>** arrow next to _Documents_ and select a document from the list.
+
+    <Screenshot url="https://github.com/codespaces" src="img/screenshots/30-prepare-the-data/4-ingest-data/3-preview-document.png" alt="Preview document" />
+</details>

docs/20-mongodb-atlas/1-create-account.mdx

@@ -0,0 +1,18 @@
+# 👐 Create a vector search index
+
+To retrieve documents from MongoDB using vector search, you must configure a vector search index on the collection into which you ingested your data. In this lab, you will programmatically create vector search indexes using MongoDB's Python driver.
+
+Fill in any `<CODE_BLOCK_N>` placeholders and run the cells under the **Step 6: Create a vector search index** section in the notebook to create a vector search index.
+
+The answers for code blocks in this section are as follows:
+
+**CODE_BLOCK_6**
+
+<details>
+<summary>Answer</summary>
+<div>
+```python
+collection.create_search_index(model=model)
+```
+</div>
+</details>

docs/20-mongodb-atlas/2-create-cluster.mdx

@@ -6,7 +6,7 @@ Fill in any `<CODE_BLOCK_N>` placeholders and run the cells under the **Step 7:
 
 The answers for code blocks in this section are as follows:
 
-**CODE_BLOCK_9**
+**CODE_BLOCK_7**
 
 <details>
 <summary>Answer</summary>
@@ -17,7 +17,7 @@ get_embedding(user_query)
 </div>
 </details>
 
-**CODE_BLOCK_10**
+**CODE_BLOCK_8**
 
 <details>
 <summary>Answer</summary>
@@ -45,7 +45,7 @@ get_embedding(user_query)
 </div>
 </details>
 
-**CODE_BLOCK_11**
+**CODE_BLOCK_9**
 
 <details>
 <summary>Answer</summary>