[Docs] - Playground (#1891)

Document running a flow with the Playground.

docs/docs/administration/global-env.mdx

@@ -13,19 +13,23 @@ For more information on the starter flow, see [Basic prompting ](../starter-proj
 
 1. From the Langflow dashboard, click **New Project**.
 2. Select **Basic Prompting**.
-3. The **Basic Prompting** flow is created.
+
-4. To create an environment variable for the **OpenAI** component, in the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
+The **Basic Prompting** flow is created.
+
+3. To create an environment variable for the **OpenAI** component:
+   1. In the **OpenAI API Key** field, click the **Globe** button, and then click **Add New Variable**.
+   2. In the **Variable Name** field, enter `openai_api_key`.
+   3. In the **Value** field, paste your OpenAI API Key (`sk-...`).
+   4. For the variable **Type**, select **Credential**.
+   5. In the **Apply to Fields** field, select **OpenAI API Key** to apply this variable to all fields named **OpenAI API Key**.
+   6. Click **Save Variable**.
+
+You now have a `openai_api_key` global environment variable for your Langflow project.
 
 <Admonition type="tip">
   You can also create global variables in **Settings** > **Variables and Secrets**.
 </Admonition>
 
-    1. In the **Variable Name** field, enter `openai_api_key`.
-    2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
-    3. For the variable **Type**, select **Credential**.
-    4. In the **Apply to Fields** field, select **OpenAI API Key** to apply this variable to all fields named **OpenAI API Key**.
-    5. Click **Save Variable**.
-
 <ZoomableImage
   alt="Docusaurus themed image"
   sources={{
@@ -35,9 +39,7 @@ For more information on the starter flow, see [Basic prompting ](../starter-proj
   style={{ width: "40%", margin: "20px auto" }}
 />
 
-You now have a `openai_api_key` global environment variable for your Langflow project.
+4. To view and manage your project's global environment variables, visit **Settings** > **Variables and Secrets**.
-
-5. To view and manage your project's global environment variables, visit **Settings** > **Variables and Secrets**.
 
 For more on variables in HuggingFace Spaces, see [Managing Secrets](https://huggingface.co/docs/hub/spaces-overview#managing-secrets).
 

docs/docs/administration/playground.mdx

@@ -0,0 +1,29 @@
+import ThemedImage from "@theme/ThemedImage";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import ZoomableImage from "/src/theme/ZoomableImage.js";
+import ReactPlayer from "react-player";
+import Admonition from "@theme/Admonition";
+
+# Playground
+
+In Langflow 1.0 alpha, the **Playground** replaces the **Interaction Panel**.
+
+The **Playground** provides an interface for interacting with flows without opening them in the flow editor.
+
+It even works for flows hosted on the Langflow store!
+
+As long as you have a flow's environment variables set, you can run it by clicking the **Playground** button.
+
+1. From your **Collections** page, click **Playground** in one of your flows.
+The **Playground** window opens.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: useBaseUrl("img/playground-chat.png"),
+    dark: useBaseUrl("img/playground-chat.png"),
+  }}
+  style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
+/>
+
+2. Chat with your bot as you normally would, all without having to open the editor.

docs/sidebars.js

@@ -40,6 +40,7 @@ module.exports = {
         "administration/login",
         "administration/api",
         "administration/cli",
+        "administration/playground",
         "administration/global-env",
         "administration/components",
         "administration/collection",