From a04b0b19b41870c5fc63c68e038a4429b1c0421f Mon Sep 17 00:00:00 2001 From: Mendon Kissling <59585235+mendonk@users.noreply.github.com> Date: Tue, 1 Apr 2025 10:04:20 -0400 Subject: [PATCH] docs: rename tutorials to sample-flows (#7307) * builds-and-serves-no-errors * Apply suggestions from code review Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com> * update-links --------- Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com> --- .../agent-tool-calling-agent-component.md | 2 +- docs/docs/Components/components-prompts.md | 2 +- .../docs/Concepts/concepts-file-management.md | 2 +- docs/docs/Develop/memory.md | 2 +- docs/docs/Get-Started/welcome-to-langflow.md | 6 +- .../docs/Integrations/MCP/integrations-mcp.md | 2 +- docs/docs/Sample-Flows/blog-writer.md | 55 ++++++++++++++++++ .../document-qa.md} | 2 +- .../math-agent.md} | 2 +- .../memory-chatbot.md} | 26 ++++----- .../sequential-agent.md} | 2 +- .../travel-planning-agent.md} | 2 +- docs/docs/Tutorials/tutorials-blog-writer.md | 58 ------------------- docs/docusaurus.config.js | 52 ++++++++++++----- docs/sidebars.js | 14 ++--- 15 files changed, 123 insertions(+), 106 deletions(-) create mode 100644 docs/docs/Sample-Flows/blog-writer.md rename docs/docs/{Tutorials/tutorials-document-qa.md => Sample-Flows/document-qa.md} (98%) rename docs/docs/{Tutorials/tutorials-math-agent.md => Sample-Flows/math-agent.md} (98%) rename docs/docs/{Tutorials/tutorials-memory-chatbot.md => Sample-Flows/memory-chatbot.md} (50%) rename docs/docs/{Tutorials/tutorials-sequential-agent.md => Sample-Flows/sequential-agent.md} (98%) rename docs/docs/{Tutorials/tutorials-travel-planning-agent.md => Sample-Flows/travel-planning-agent.md} (98%) delete mode 100644 docs/docs/Tutorials/tutorials-blog-writer.md diff --git a/docs/docs/Agents/agent-tool-calling-agent-component.md b/docs/docs/Agents/agent-tool-calling-agent-component.md index b7abf8d93..cc8dcf289 100644 --- a/docs/docs/Agents/agent-tool-calling-agent-component.md +++ b/docs/docs/Agents/agent-tool-calling-agent-component.md @@ -54,7 +54,7 @@ Point **API Request** to an online rules document, tell your agent `You are a fu * You need to learn a new software language quickly. Point **API Request** to some docs, tell your agent `You are a knowledgeable software developer who uses the tools at your disposal`, and start learning. -See what problems you can solve with this flow. As your problem becomes more specialized, add a tool. For example, the [math agent tutorial project](/tutorials-math-agent) adds a Python REPL component to solve math problems that are too challenging for the calculator. +See what problems you can solve with this flow. As your problem becomes more specialized, add a tool. For example, the [math agent project](/math-agent) adds a Python REPL component to solve math problems that are too challenging for the calculator. ### Edit a tool's metadata diff --git a/docs/docs/Components/components-prompts.md b/docs/docs/Components/components-prompts.md index 3884ccb2b..e39027508 100644 --- a/docs/docs/Components/components-prompts.md +++ b/docs/docs/Components/components-prompts.md @@ -30,7 +30,7 @@ Answer the question {user_question} ``` -When variables are added to a prompt template, new fields are automatically created in the component. These fields can be connected to receive text input from other components to automate prompting, or to output instructions to other components. An example of prompts controlling agents behavior is available in the [sequential tasks agent starter flow](/tutorials-sequential-agent). +When variables are added to a prompt template, new fields are automatically created in the component. These fields can be connected to receive text input from other components to automate prompting, or to output instructions to other components. An example of prompts controlling agents behavior is available in the [sequential tasks agent starter flow](/sequential-agent). ### Inputs diff --git a/docs/docs/Concepts/concepts-file-management.md b/docs/docs/Concepts/concepts-file-management.md index 0ee65016b..0fac638c2 100644 --- a/docs/docs/Concepts/concepts-file-management.md +++ b/docs/docs/Concepts/concepts-file-management.md @@ -29,7 +29,7 @@ To use your uploaded files in flows: 2. To select a document to load, in the **File** component, click the **Select files** button. 3. Select a file to upload, and then click **Select file**. The loaded file name appears in the component. -For an example of using the **File** component in a flow, see the [Document QA tutorial project](/tutorials-document-qa). +For an example of using the **File** component in a flow, see the [Document QA tutorial project](/document-qa). :::note If you prefer a one-time upload, the [File](/components-data#file) component still allows one-time uploads directly from your local machine. diff --git a/docs/docs/Develop/memory.md b/docs/docs/Develop/memory.md index 38f8dee35..480d4e465 100644 --- a/docs/docs/Develop/memory.md +++ b/docs/docs/Develop/memory.md @@ -41,7 +41,7 @@ To store messages in local Langflow memory, add a [Message store](/components-he To retrieve messages from local Langflow memory, add a [Message history](/components-helpers#message-history) component to your flow. -For an example of using local chat memory, see the [Memory chatbot](/tutorials-memory-chatbot) starter flow. +For an example of using local chat memory, see the [Memory chatbot](/memory-chatbot) starter flow. To store or retrieve chat messages from external memory, connect the **External memory** port of the **Message store** or **Message history** component to a **Memory** component, like the [Astra DB chat memory](components-memories#astradbchatmemory-component) component. An example flow looks like this: diff --git a/docs/docs/Get-Started/welcome-to-langflow.md b/docs/docs/Get-Started/welcome-to-langflow.md index f54028907..c93f39a3a 100644 --- a/docs/docs/Get-Started/welcome-to-langflow.md +++ b/docs/docs/Get-Started/welcome-to-langflow.md @@ -19,9 +19,9 @@ Langflow is an intuitive visual flow builder. This drag-and-drop interface allow Langflow can be used for a wide range of AI applications, including: -* [Craft intelligent chatbots](/tutorials-memory-chatbot) -* [Build document analysis systems](/tutorials-document-qa) -* [Generate compelling content](/tutorials-blog-writer) +* [Craft intelligent chatbots](/memory-chatbot) +* [Build document analysis systems](/document-qa) +* [Generate compelling content](/blog-writer) * [Orchestrate multi-agent applications](/starter-projects-simple-agent) ## Community and support diff --git a/docs/docs/Integrations/MCP/integrations-mcp.md b/docs/docs/Integrations/MCP/integrations-mcp.md index 16e1230bd..eac8afbed 100644 --- a/docs/docs/Integrations/MCP/integrations-mcp.md +++ b/docs/docs/Integrations/MCP/integrations-mcp.md @@ -110,7 +110,7 @@ MCP clients like Claude for Desktop and Cursor "see" Langflow as a single MCP se This can confuse agents, who don't know that flow `adbbf8c7-0a34-493b-90ea-5e8b42f78b66` is a Document Q&A flow for a specific text file. To prevent this behavior, name and describe your flows clearly for agentic use. Imagine your names and descriptions as function names and code comments, with a clear statement of what problem they solve. -For example, you have created a [Document Q&A](/tutorials-document-qa) flow that loads a sample resume for an LLM to chat with, and you want Cursor to use the tool. +For example, you have created a [Document Q&A](/document-qa) flow that loads a sample resume for an LLM to chat with, and you want Cursor to use the tool. 1. Click **Flow name**, and then select **Edit Details**. 2. The **Name** field should make it clear what the flow does, both to a user and to the agent. For example, name it `Document QA for Resume`. diff --git a/docs/docs/Sample-Flows/blog-writer.md b/docs/docs/Sample-Flows/blog-writer.md new file mode 100644 index 000000000..1f3029870 --- /dev/null +++ b/docs/docs/Sample-Flows/blog-writer.md @@ -0,0 +1,55 @@ +--- +title: Blog writer +slug: /blog-writer +--- + +Build a Blog Writer flow for a one-shot application using OpenAI. + +This flow extends the Basic Prompting flow with the **URL** and **Parse data** components that fetch content from multiple URLs and convert the loaded data into plain text. + +OpenAI uses this loaded data to generate a blog post, as instructed by the **Text input** component. + + +## Prerequisites + +- [Langflow installed and running](/get-started-installation) +- [OpenAI API key created](https://platform.openai.com/) + + +## Create the blog writer flow + +1. From the Langflow dashboard, click **New Flow**. +2. Select **Blog Writer**. +3. The **Blog Writer** flow is created. + +![](/img/starter-flow-blog-writer.png) + + +This flow creates a one-shot article generator with **Prompt**, **OpenAI**, and **Chat Output** components, augmented with reference content and instructions from the **URL** and **Text Input** components. + +The **URL** component extracts raw text and metadata from one or more web links. +The **Parse Data** component converts the data coming from the **URL** component into plain text to feed the prompt. + +To examine the flow's prompt, click the **Template** field of the **Prompt** component. + +```plain +Reference 1: + +{references} + +--- + +{instructions} + +Blog: +``` + +The `{instructions}` value is received from the **Text input** component, and one or more `{references}` are received from a list of URLs parsed from the **URL** component. + + +### Run the blog writer flow + +1. Click the **Playground** button, and then click **Run Flow**. +A blog post about Langflow is generated, with content sourced from `langflow.org` and `docs.langflow.org`. +2. To write about something different, change the values in the **URL** component and adjust the instructions on the left side bar of the **Playground**. Try again and see what the LLM constructs. + diff --git a/docs/docs/Tutorials/tutorials-document-qa.md b/docs/docs/Sample-Flows/document-qa.md similarity index 98% rename from docs/docs/Tutorials/tutorials-document-qa.md rename to docs/docs/Sample-Flows/document-qa.md index 7558ad16b..1332ea690 100644 --- a/docs/docs/Tutorials/tutorials-document-qa.md +++ b/docs/docs/Sample-Flows/document-qa.md @@ -1,6 +1,6 @@ --- title: Document QA -slug: /tutorials-document-qa +slug: /document-qa --- Build a question-and-answer chatbot with a document loaded from local memory. diff --git a/docs/docs/Tutorials/tutorials-math-agent.md b/docs/docs/Sample-Flows/math-agent.md similarity index 98% rename from docs/docs/Tutorials/tutorials-math-agent.md rename to docs/docs/Sample-Flows/math-agent.md index 54e9caf66..ebc436518 100644 --- a/docs/docs/Tutorials/tutorials-math-agent.md +++ b/docs/docs/Sample-Flows/math-agent.md @@ -1,6 +1,6 @@ --- title: Math agent -slug: /tutorials-math-agent +slug: /math-agent --- import Icon from "@site/src/components/icon"; diff --git a/docs/docs/Tutorials/tutorials-memory-chatbot.md b/docs/docs/Sample-Flows/memory-chatbot.md similarity index 50% rename from docs/docs/Tutorials/tutorials-memory-chatbot.md rename to docs/docs/Sample-Flows/memory-chatbot.md index ff0b87d8e..e39b1c790 100644 --- a/docs/docs/Tutorials/tutorials-memory-chatbot.md +++ b/docs/docs/Sample-Flows/memory-chatbot.md @@ -1,11 +1,11 @@ --- title: Memory chatbot -slug: /tutorials-memory-chatbot +slug: /memory-chatbot --- import Icon from "@site/src/components/icon"; -This flow extends the [basic prompting flow](/starter-projects-basic-prompting) with a **Chat memory** component that stores up to 100 previous chat messages and uses them to provide context for the current conversation. +This flow extends the [basic prompting flow](/starter-projects-basic-prompting) with a **Chat memory** component that stores up to 100 previous chat messages and uses them to provide context for the current conversation. ## Prerequisites @@ -14,14 +14,14 @@ This flow extends the [basic prompting flow](/starter-projects-basic-prompting) ## Create the memory chatbot flow -1. From the Langflow dashboard, click **New Flow**. -2. Select **Memory Chatbot**. -3. The **Memory Chatbot** flow is created. +1. From the Langflow dashboard, click **New Flow**. +2. Select **Memory Chatbot**. +3. The **Memory Chatbot** flow is created. ![](/img/starter-flow-memory-chatbot.png) -This flow adds a **Chat Memory** component to the Basic Prompting flow. -This component retrieves previous messages and sends them to the **Prompt** component to fill a part of the **Template** with context. +This flow adds a **Chat Memory** component to the Basic Prompting flow. +This component retrieves previous messages and sends them to the **Prompt** component to fill a part of the **Template** with context. To examine the template, click the **Template** field in the **Prompt** component. The **Prompt** tells the **OpenAI model** component how to respond to input. @@ -39,7 +39,7 @@ History: The `{memory}` code in the prompt creates a new input port in the component called **memory**. The **Chat Memory** component is connected to this port to store chat messages from the **Playground**. -This gives the **OpenAI** component a memory of previous chat messages. +This gives the **OpenAI** component a memory of previous chat messages. ## Run the memory chatbot flow @@ -55,19 +55,19 @@ What is the second subject I asked you about? The chatbot remembers your name and previous questions. -3. To view the **Message Logs** pane, click , and then click **Message Logs**. +3. To view the **Message Logs** pane, click , and then click **Message Logs**. The **Message Logs** pane displays all previous messages, with each conversation sorted by `session_id`. ![](/img/messages-logs.png) ## Use Session ID with the memory chatbot flow -`session_id` is a unique identifier in Langflow that stores conversation sessions between the AI and a user. A `session_id` is created when a conversation is initiated, and then associated with all subsequent messages during that session. +`session_id` is a unique identifier in Langflow that stores conversation sessions between the AI and a user. A `session_id` is created when a conversation is initiated, and then associated with all subsequent messages during that session. -In the **Memory Chatbot** flow you created, the **Chat Memory** component references past interactions by **Session ID**. You can demonstrate this by modifying the **Session ID** value to switch between conversation histories. +In the **Memory Chatbot** flow you created, the **Chat Memory** component references past interactions by **Session ID**. You can demonstrate this by modifying the **Session ID** value to switch between conversation histories. -1. In the **Session ID** field of the **Chat Memory** and **Chat Input** components, add a **Session ID** value like `MySessionID`. -2. Now, once you send a new message the **Playground**, you should have a new memory created in the **Message Logs** pane. +1. In the **Session ID** field of the **Chat Memory** and **Chat Input** components, add a **Session ID** value like `MySessionID`. +2. Now, once you send a new message the **Playground**, you should have a new memory created in the **Message Logs** pane. 3. Notice how your conversation is being stored in different memory sessions. Learn more about chat memories in the [Memory](/components-memories) section. diff --git a/docs/docs/Tutorials/tutorials-sequential-agent.md b/docs/docs/Sample-Flows/sequential-agent.md similarity index 98% rename from docs/docs/Tutorials/tutorials-sequential-agent.md rename to docs/docs/Sample-Flows/sequential-agent.md index 24b092a9c..e9695cc5e 100644 --- a/docs/docs/Tutorials/tutorials-sequential-agent.md +++ b/docs/docs/Sample-Flows/sequential-agent.md @@ -1,6 +1,6 @@ --- title: Sequential tasks agent -slug: /tutorials-sequential-agent +slug: /sequential-agent --- Build a **Sequential Tasks Agent** flow for a multi-agent application using multiple **Agent** components. diff --git a/docs/docs/Tutorials/tutorials-travel-planning-agent.md b/docs/docs/Sample-Flows/travel-planning-agent.md similarity index 98% rename from docs/docs/Tutorials/tutorials-travel-planning-agent.md rename to docs/docs/Sample-Flows/travel-planning-agent.md index 373332305..c6361b2ed 100644 --- a/docs/docs/Tutorials/tutorials-travel-planning-agent.md +++ b/docs/docs/Sample-Flows/travel-planning-agent.md @@ -1,6 +1,6 @@ --- title: Travel planning agent -slug: /tutorials-travel-planning-agent +slug: /travel-planning-agent --- Build a **Travel Planning Agent** flow for an agentic application using the multiple Tool-calling agents. diff --git a/docs/docs/Tutorials/tutorials-blog-writer.md b/docs/docs/Tutorials/tutorials-blog-writer.md deleted file mode 100644 index 3485b59af..000000000 --- a/docs/docs/Tutorials/tutorials-blog-writer.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Blog writer -slug: /tutorials-blog-writer ---- - -Build a Blog Writer flow for a one-shot application using OpenAI. - -This flow extends the Basic Prompting flow with the **URL** and **Parse data** components that fetch content from multiple URLs and convert the loaded data into plain text. - -OpenAI uses this loaded data to generate a blog post, as instructed by the **Text input** component. - - -## Prerequisites {#899268e6c12c49b59215373a38287507} - - ---- - -- [Langflow installed and running](/get-started-installation) -- [OpenAI API key created](https://platform.openai.com/) - - -## Create the blog writer flow {#0c1a9c65b7d640f693ec3aad963416ff} - -1. From the Langflow dashboard, click **New Flow**. -2. Select **Blog Writer**. -3. The **Blog Writer** flow is created. - -![](/img/starter-flow-blog-writer.png) - - -This flow creates a one-shot article generator with **Prompt**, **OpenAI**, and **Chat Output** components, augmented with reference content and instructions from the **URL** and **Text Input** components. - -The **URL** component extracts raw text and metadata from one or more web links. -The **Parse Data** component converts the data coming from the **URL** component into plain text to feed the prompt. - -To examine the flow's prompt, click the **Template** field of the **Prompt** component. - -```plain -Reference 1: - -{references} - ---- - -{instructions} - -Blog: -``` - -The `{instructions}` value is received from the **Text input** component, and one or more `{references}` are received from a list of URLs parsed from the **URL** component. - - -### Run the blog writer flow {#b93be7a567f5400293693b31b8d0f81a} - -1. Click the **Playground** button. Here you can chat with the AI that has access to the **URL** content. -2. Click the **Lighting Bolt** icon to run it. -3. To write about something different, change the values in the **URL** component and adjust the instructions on the left side bar of the **Playground**. Try again and see what the LLM constructs. - diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 85fa546d4..ec9c9d38a 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -114,13 +114,6 @@ const config = { to: "/get-started-quickstart", from: "/getting-started-quickstart", }, - { - to: "/tutorials-travel-planning-agent", - from: [ - "/starter-projects-dynamic-agent/", - "/starter-projects-travel-planning-agent", - ], - }, { to: "concepts-overview", from: [ @@ -137,7 +130,7 @@ const config = { "/components", "/components-overview" ], - }, + }, { to: "/configuration-global-variables", from: "/settings-global-variables", @@ -158,20 +151,47 @@ const config = { ] }, { - to: "/tutorials-sequential-agent", - from: "/starter-projects-sequential-agent", + to: "/blog-writer", + from: [ + "/starter-projects-blog-writer", + "/tutorials-blog-writer" + ], }, { - to: "/tutorials-blog-writer", - from: "/starter-projects-blog-writer", + to: "/memory-chatbot", + from: [ + "/starter-projects-memory-chatbot", + "/tutorials-memory-chatbot" + ], }, { - to: "/tutorials-memory-chatbot", - from: "/starter-projects-memory-chatbot", + to: "/document-qa", + from: [ + "/starter-projects-document-qa", + "/tutorials-document-qa" + ], }, { - to: "/tutorials-document-qa", - from: "/starter-projects-document-qa", + to: "/math-agent", + from: [ + "/starter-projects-math-agent", + "/tutorials-math-agent" + ], + }, + { + to: "/sequential-agent", + from: [ + "/starter-projects-sequential-agent", + "/tutorials-sequential-agent" + ], + }, + { + to: "/travel-planning-agent", + from: [ + "/starter-projects-travel-planning-agent", + "/tutorials-travel-planning-agent", + "/starter-projects-dynamic-agent/", + ], }, { to: "/components-vector-stores", diff --git a/docs/sidebars.js b/docs/sidebars.js index 4e98f9ea8..00bb070dd 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -20,14 +20,14 @@ module.exports = { }, { type: "category", - label: "Tutorials", + label: "Sample flows", items: [ - 'Tutorials/tutorials-blog-writer', - 'Tutorials/tutorials-document-qa', - 'Tutorials/tutorials-memory-chatbot', - 'Tutorials/tutorials-math-agent', - 'Tutorials/tutorials-sequential-agent', - 'Tutorials/tutorials-travel-planning-agent', + 'Sample-Flows/blog-writer', + 'Sample-Flows/document-qa', + 'Sample-Flows/memory-chatbot', + 'Sample-Flows/math-agent', + 'Sample-Flows/sequential-agent', + 'Sample-Flows/travel-planning-agent', ], }, {