diff --git a/docs/docs/guides/basic-prompting.mdx b/docs/docs/guides/basic-prompting.mdx index e69de29bb..08ec0259e 100644 --- a/docs/docs/guides/basic-prompting.mdx +++ b/docs/docs/guides/basic-prompting.mdx @@ -0,0 +1,83 @@ +import ThemedImage from "@theme/ThemedImage"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ZoomableImage from "/src/theme/ZoomableImage.js"; +import ReactPlayer from "react-player"; + +# Basic prompting + +Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks. + +By submitting natural language requests in a prompt to an LLM, you can obtain answers, generate text, and solve problems. + +This article demonstrates how to use Langflow's prompt tools to issue basic prompts to an LLM, and how various prompting strategies can affect your outcomes. + +## 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: +``` +│ 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 basic prompting project + +1. From the Langflow dashboard, click **New Project**. +2. Select **Basic Prompting**. +3. The **Basic Prompting** flow is created. + + + +This flow allows you to chat with the **OpenAI** component via a **Prompt** component. +Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.` +This should be interesting... + +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 basic prompting flow + +1. Click the **Run** button. +The **Interaction Panel** opens, where you can converse with your bot. +2. Type a message and press Enter. +The bot responds in a markedly piratical manner! + +## Modify the prompt for a different result + +1. To modify your prompt results, in the **Prompt** template, click the **Template** field. +The **Edit Prompt** window opens. +2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.` +3. Run the basic prompting flow again. +The response will be markedly different. + + + + 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/basic-prompting.png b/docs/static/img/basic-prompting.png new file mode 100644 index 000000000..76d658a2d Binary files /dev/null and b/docs/static/img/basic-prompting.png differ 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 diff --git a/docs/static/img/document-qa.png b/docs/static/img/document-qa.png new file mode 100644 index 000000000..b1c36eb61 Binary files /dev/null and b/docs/static/img/document-qa.png differ diff --git a/docs/static/img/memory-chatbot.png b/docs/static/img/memory-chatbot.png new file mode 100644 index 000000000..53d19b49c Binary files /dev/null and b/docs/static/img/memory-chatbot.png differ