diff --git a/docs/docs/getting-started/blog-writer.mdx b/docs/docs/getting-started/blog-writer.mdx index e69de29bb..25af5bead 100644 --- a/docs/docs/getting-started/blog-writer.mdx +++ b/docs/docs/getting-started/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. + + + +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. \ No newline at end of file diff --git a/docs/docs/guides/blog-writer.mdx b/docs/docs/guides/blog-writer.mdx index e69de29bb..25af5bead 100644 --- a/docs/docs/guides/blog-writer.mdx +++ b/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. + + + +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. \ No newline at end of file diff --git a/docs/static/img/blog-writer.png b/docs/static/img/blog-writer.png new file mode 100644 index 000000000..d7b0d3780 Binary files /dev/null and b/docs/static/img/blog-writer.png differ