docs: Add LangSmith docs

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" }}
+/>