[Docs] - Blog Writer (#1763)

* Docs for Blog writer starter flow
* Run in HF Spaces v1.0.0a17

docs/docs/getting-started/blog-writer.mdx

@@ -0,0 +1,97 @@
+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";
+
+# Blog Writer
+
+Build a blog writer with OpenAI that uses URLs for reference content.
+
+## Prerequisites
+
+1. Install Langflow.
+```bash
+python -m pip install langflow --pre
+```
+
+2. Start a local Langflow instance with the Langflow CLI:
+```bash
+langflow run
+```
+Or start Langflow with Python:
+```bash
+python -m langflow run
+```
+
+Result:
+```bash
+│ Welcome to ⛓ Langflow                             │
+│                                                   │
+│ Access http://127.0.0.1:7860                      │
+│ Collaborate, and contribute at our GitHub Repo 🚀 │
+```
+
+Alternatively, go to [HuggingFace Spaces](https://docs.langflow.org/getting-started/hugging-face-spaces) or [Lightning.ai Studio](https://lightning.ai/ogabrielluiz-8j6t8/studios/langflow) for a pre-built Langflow test environment.
+
+3. Create an [OpenAI API key](https://platform.openai.com).
+
+## Create the Blog Writer project
+
+1. From the Langflow dashboard, click **New Project**.
+2. Select **Blog Writer**.
+3. The **Blog Writer** flow is created.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/blog-writer.png",
+    dark: "img/blog-writer.png",
+  }}
+  style={{
+    width: "80%",
+    margin: "20px auto",
+    display: "flex",
+    justifyContent: "center",
+  }}
+/>
+
+This flow creates a one-shot prompt flow with **Prompt**, **OpenAI**, and **Chat Output** components, and augments the flow with reference content and instructions from the **URL** and **Instructions** components.
+
+The **Prompt** component's default **Template** field looks like this:
+```bash
+Reference 1:
+
+{reference_1}
+
+---
+
+Reference 2:
+
+{reference_2}
+
+---
+
+{instructions}
+
+Blog:
+
+```
+
+The `{instructions}` value is received from the **Value** field of the **Instructions** component.
+The `reference_1` and `reference_2` values are received from the **URL** fields of the **URL** components.
+
+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**.
+    1. In the **Variable Name** field, enter `openai_api_key`.
+    2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
+    3. Click **Save Variable**.
+
+## Run the Blog Writer flow
+
+1. Click the **Run** button.
+The **Interaction Panel** opens, where you can run your one-shot flow.
+2. Click the **Lighting Bolt** icon to run your flow.
+3. The **OpenAI** component constructs a blog post with the **URL** items as context.
+The default **URL** values are for web pages at `promptingguide.ai`, so your blog post will be about prompting LLMs.
+
+To write about something different, change the values in the **URL** components, and see what the LLM constructs.

docs/docs/guides/blog-writer.mdx

@@ -0,0 +1,92 @@
+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";
+
+# Blog Writer
+
+Build a blog writer with OpenAI that uses URLs for reference content.
+
+## Prerequisites
+
+1. Install Langflow.
+```bash
+pip install langflow
+```
+
+2. Start a local Langflow instance with the Langflow CLI:
+```bash
+langflow run
+```
+Or start Langflow with Python:
+```bash
+python -m langflow run
+```
+
+Result:
+```bash
+│ Welcome to ⛓ Langflow                             │
+│                                                   │
+│ Access http://127.0.0.1:7860                      │
+│ Collaborate, and contribute at our GitHub Repo 🚀 │
+```
+
+Alternatively, go to [HuggingFace Spaces](https://docs.langflow.org/getting-started/hugging-face-spaces) or [Lightning.ai Studio](https://lightning.ai/ogabrielluiz-8j6t8/studios/langflow) for a pre-built Langflow test environment.
+
+3. Create an [OpenAI API key](https://platform.openai.com).
+
+## Create the Blog Writer project
+
+1. From the Langflow dashboard, click **New Project**.
+2. Select **Blog Writer**.
+3. The **Blog Writer** flow is created.
+
+<ZoomableImage
+  alt="Docusaurus themed image"
+  sources={{
+    light: "img/blog-writer.png",
+    dark: "img/blog-writer.png",
+  }}
+  style={{ width: "80%", margin: "20px auto" }}
+/>
+
+This flow creates a one-shot prompt flow with **Prompt**, **OpenAI**, and **Chat Output** components, and augments the flow with reference content and instructions from the **URL** and **Instructions** components.
+
+The **Prompt** component's default **Template** field looks like this:
+```bash
+Reference 1:
+
+{reference_1}
+
+---
+
+Reference 2:
+
+{reference_2}
+
+---
+
+{instructions}
+
+Blog:
+
+```
+
+The `{instructions}` value is received from the **Value** field of the **Instructions** component.
+The `reference_1` and `reference_2` values are received from the **URL** fields of the **URL** components.
+
+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**.
+    1. In the **Variable Name** field, enter `openai_api_key`.
+    2. In the **Value** field, paste your OpenAI API Key (`sk-...`).
+    3. Click **Save Variable**.
+
+## Run the Blog Writer flow
+
+1. Click the **Run** button.
+The **Interaction Panel** opens, where you can run your one-shot flow.
+2. Click the **Lighting Bolt** icon to run your flow.
+3. The **OpenAI** component constructs a blog post with the **URL** items as context.
+The default **URL** values are for web pages at `promptingguide.ai`, so your blog post will be about prompting LLMs.
+
+To write about something different, change the values in the **URL** components, and see what the LLM constructs.