diff --git a/docs/docs/getting-started/memory-chatbot.mdx b/docs/docs/getting-started/memory-chatbot.mdx index e69de29bb..511624baf 100644 --- a/docs/docs/getting-started/memory-chatbot.mdx +++ b/docs/docs/getting-started/memory-chatbot.mdx @@ -0,0 +1,94 @@ +import ThemedImage from "@theme/ThemedImage"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ZoomableImage from "/src/theme/ZoomableImage.js"; +import ReactPlayer from "react-player"; + +# Memory chatbot + +This flow extends the [basic prompting flow](./basic-prompting.mdx) to include chat memory for unique SessionIDs. + +## 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: +``` +│ 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 memory chatbot project + +1. From the Langflow dashboard, click **New Project**. +2. Select **Memory Chatbot**. +3. The **Memory Chatbot** flow is created. + + + +This flow creates a basic chatbot with the **Chat Input**, **Prompt**, and **OpenAI** components. +This chatbot is augmented with the **Chat Memory** component, which stores messages submitted via **Chat Input** and prepends them to subsequent prompts to OpenAI via `{context}`. +The **Chat History** component gives the **OpenAI** component a memory of previous questions. + +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 memory chatbot 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 will respond according to the template in the **Prompt** component. +3. Type more questions. In the **Outputs** log, your queries are logged in order. Up to 5 queries are stored by default. Try asking `What is the first subject I asked you about?` to see where the LLM's memory disappears. + +## Modify the Session ID field to have multiple conversations + +`SessionID` is a unique identifier in Langchain for a conversation session between a chatbot and a client. +A `SessionID` 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 with **Chat Input** 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, change the **Session ID** value from `MySessionID` to `AnotherSessionID`. +2. Click the **Run** button to run your flow. +In the **Interaction Panel**, you will have a new conversation. (You may need to clear the cache with the **Eraser** button). +3. Type a few questions to your bot. +4. In the **Session ID** field of the **Chat Memory** and **Chat Input** components, change the **Session ID** value back to `MySessionID`. +5. Run your flow. +The **Outputs** log of the **Interaction Panel** displays the history from your initial chat with `MySessionID`. + +### Store Session ID as a Langflow variable + +To store **Session ID** as a Langflow variable, in the **Session ID** field, click the **Globe** button, and then click **Add New Variable**. + +1. In the **Variable Name** field, enter a name like `customer_chat_emea`. +2. In the **Value** field, enter a value like `1B5EBD79-6E9C-4533-B2C8-7E4FF29E983B`. +3. Click **Save Variable**. +4. Apply this variable to **Chat Input**. + diff --git a/docs/static/img/memory-chatbot.png b/docs/static/img/memory-chatbot.png new file mode 100644 index 000000000..8b00686a7 Binary files /dev/null and b/docs/static/img/memory-chatbot.png differ