docs: Add LangSmith docs

docs/docs/getting-started/workspace.mdx

@@ -106,7 +106,7 @@ Components are the building blocks of flows. They consist of inputs, outputs, an
   style={{ width: "100%", margin: "20px auto" }}
 />
 
-<div style={{ marginBottom: "20px" }}>
+{/* <div style={{ marginBottom: "20px" }}> */}
 
 {/\* On the top right corner of the component, you'll find the component status icon (![Status icon](/logos/playbutton.svg)).
 Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playground** at the bottom right of the workspace.
@@ -114,7 +114,7 @@ Build the flow by clicking the **![Playground icon](/logos/botmessage.svg)Playgr
 Once the validation is complete, the status of each validated component should turn green (![Status icon](/logos/greencheck.svg)).
 To debug, hover over the component status to see the outputs. \*/}
 
-</div>
+{/* </div> */}
 
 {/\* ### Multiple outputs
 

docs/docs/integrations/langsmith/intro.mdx

@@ -0,0 +1,46 @@
+import Admonition from "@theme/Admonition";
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+
+# LangSmith
+
+LangSmith is a full-lifecycle DevOps service from LangChain that provides monitoring and observability. To integrate with Langflow, just add your LangChain API key as a Langflow environment variable and you are good to go!
+
+## Step-by-step Configuration
+
+1. Obtain your LangChain API key from https://smith.langchain.com
+2. Add the following keys to Langflow .env file:
+
+```bash
+LANGCHAIN_API_KEY="your-api-key"
+LANGCHAIN_PROJECT="your-project-name"
+```
+
+or export the environment variables in your terminal:
+
+```bash
+export LANGCHAIN_API_KEY="your-api-key"
+export LANGCHAIN_PROJECT="your-project-name"
+```
+
+3. Restart Langflow using `langflow run --env-file .env`
+4. Run any project and check the LangSmith dashboard for monitoring and observability.
+
+<ZoomableImage
+  alt="LangSmith Flow Example"
+  sources={{
+    light: useBaseUrl("img/langsmith-flow.png"),
+    dark: useBaseUrl("img/langsmith-flow.png"),
+  }}
+  style={{ width: "80%", margin: "20px auto" }}
+/>
+
+<ZoomableImage
+  alt="LangSmith Trace"
+  sources={{
+    light: useBaseUrl("img/langsmith-trace.png"),
+    dark: useBaseUrl("img/langsmith-trace.png"),
+  }}
+  style={{ width: "80%", margin: "20px auto" }}
+/>

docs/sidebars.js

@@ -141,6 +141,7 @@ module.exports = {
       label: "Integrations",
       collapsed: false,
       items: [
+        "integrations/langsmith/intro",
         {
           type: "category",
           label: "Notion",
@@ -157,6 +158,13 @@ module.exports = {
             "integrations/notion/page-content-viewer",
           ],
         },
+        // {
+        //   type: "category",
+        //   label: "LangSmith",
+        //   items: [
+        //     ,
+        //   ],
+        // },
       ],
     },
   ],