doc updates (#1639)

---------

Co-authored-by: vbarda <vadym@langchain.dev>

examples/web-navigation/web_voyager.ipynb

@@ -5,7 +5,7 @@
    "id": "f1a7d688-561c-4175-acfc-a6537f6dd042",
    "metadata": {},
    "source": [
-    "## Web Voyager\n",
+    "# Web Voyager\n",
     "\n",
     "[WebVoyager](https://arxiv.org/abs/2401.13919) by He, et. al., is a vision-enabled web-browsing agent capable of controlling the mouse and keyboard.\n",
     "\n",
@@ -20,11 +20,9 @@
     "<img src=\"./img/web-voyager.excalidraw.png\" width=\"50%\">\n",
     "\n",
     "\n",
-    "## Configure environment\n",
+    "## Setup\n",
     "\n",
-    "We will first set up LangSmith tracing. Though optional, this lets us inspect and debug agent's trajectory for a given input.\n",
-    "\n",
-    "You can sign up at [smith.langchain.com](https://smith.langchain.com/) to get an API key."
+    "First, let's install our required packages:"
    ]
   },
   {
@@ -45,7 +43,6 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# Optional: add tracing to visualize the agent trajectories\n",
     "import os\n",
     "from getpass import getpass\n",
     "\n",
@@ -55,12 +52,22 @@
     "        os.environ[env_var] = getpass(f\"{env_var}=\")\n",
     "\n",
     "\n",
-    "os.environ[\"LANGCHAIN_TRACING_V2\"] = \"true\"\n",
-    "os.environ[\"LANGCHAIN_PROJECT\"] = \"Web-Voyager\"\n",
-    "_getpass(\"LANGCHAIN_API_KEY\")\n",
     "_getpass(\"OPENAI_API_KEY\")"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "id": "8251cc1a",
+   "metadata": {},
+   "source": [
+    "<div class=\"admonition tip\">\n",
+    "    <p class=\"admonition-title\">Set up <a href=\"https://smith.langchain.com\">LangSmith</a> for LangGraph development</p>\n",
+    "    <p style=\"padding-top: 5px;\">\n",
+    "        Sign up for LangSmith to quickly spot issues and improve the performance of your LangGraph projects. LangSmith lets you use trace data to debug, test, and monitor your LLM apps built with LangGraph — read more about how to get started <a href=\"https://docs.smith.langchain.com\">here</a>. \n",
+    "    </p>\n",
+    "</div>    "
+   ]
+  },
   {
    "cell_type": "markdown",
    "id": "15d2e932-e1ce-4f2e-93e9-c8caf44b2afc",
@@ -100,7 +107,9 @@
    "id": "a0ee0f97-eb4e-4a13-b4f4-fc6439eec6a6",
    "metadata": {},
    "source": [
-    "## Define Graph State\n",
+    "## Define graph\n",
+    "\n",
+    "### Define graph state\n",
     "\n",
     "The state provides the inputs to each node in the graph.\n",
     "\n",
@@ -151,7 +160,7 @@
    "id": "8016a06a-3a90-46a4-85d3-510b83dfcef4",
    "metadata": {},
    "source": [
-    "## Define tools\n",
+    "### Define tools\n",
     "\n",
     "The agent has 6 simple tools:\n",
     "\n",
@@ -272,7 +281,7 @@
    "id": "ed4d4d9f-9971-477c-b391-1a73dee34573",
    "metadata": {},
    "source": [
-    "## Define Agent\n",
+    "### Define Agent\n",
     "\n",
     "The agent is driven by a multi-modal model and decides the action to take for each step. It is composed of a few runnable objects:\n",
     "\n",
@@ -409,7 +418,7 @@
    "id": "7802b9fe-e75b-4779-b45d-003c218dba48",
    "metadata": {},
    "source": [
-    "## Define graph\n",
+    "## Compile the graph\n",
     "\n",
     "We've created most of the important logic. We have one more function to define that will help us update the graph state after a tool is called."
    ]
@@ -511,7 +520,7 @@
    "id": "1d11071f-f7ad-434d-99b7-14ebbbc92506",
    "metadata": {},
    "source": [
-    "## Run agent\n",
+    "## Use the graph\n",
     "\n",
     "Now that we've created the whole agent executor, we can run it on a few questions! We'll start our browser at \"google.com\" and then let it control the rest.\n",
     "\n",