diff --git a/docs/docs/guidelines/chat-interface.mdx b/docs/docs/guidelines/chat-interface.mdx new file mode 100644 index 000000000..fd0cd0a42 --- /dev/null +++ b/docs/docs/guidelines/chat-interface.mdx @@ -0,0 +1,64 @@ +import ThemedImage from "@theme/ThemedImage"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ZoomableImage from "/src/theme/ZoomableImage.js"; +import ReactPlayer from "react-player"; + +# Chat Interface + +Langflow’s chat interface provides a user-friendly experience and functionality to interact with the model and customize the prompt. The sidebar brings options that allow users to view and edit pre-defined prompt variables. This feature facilitates quick experimentation by enabling the modification of variable values right in the chat. + +
+ +
+ + +Notice that editing variables in the chat interface takes place temporarily and won’t change their original value in the components once the chat is closed. + +
+ +
+ +To view the complete prompt in its original, structured format, simply click on the "Display Prompt" option. This feature allows you to see the prompt exactly as it entered the model. + +
+ +
+ + +In the chat interface, you can redefine which variable should be interpreted as the chat input. This gives you control over these inputs and allows dynamic and creative interactions. + +
+ +
diff --git a/docs/docs/guidelines/prompt-customization.mdx b/docs/docs/guidelines/prompt-customization.mdx new file mode 100644 index 000000000..939dd3444 --- /dev/null +++ b/docs/docs/guidelines/prompt-customization.mdx @@ -0,0 +1,86 @@ +import ThemedImage from "@theme/ThemedImage"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import ZoomableImage from "/src/theme/ZoomableImage.js"; +import ReactPlayer from "react-player"; + +# Prompt Customization + +The prompt template allows users to create prompts and define variables that provide control over instructing the model. + +
+ +
+ + +Variables can be used to define instructions, questions, context, inputs, or examples for the model and can be created with any chosen name in curly brackets, e.g. `{variable_name}`. They act as placeholders for parts of the text that can be easily modified. + +
+ +
+ + +Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you have the option to define their values within the component itself or leave a field empty to be adjusted over the chat interface. + +
+ +
+ +You can also use documents or output parsers as prompt variables. By plugging them into the prompt handles, they’ll disable the input field and feed that input field. + +
+ +
+ + + +With this, users can interact with documents, webpages, or any other type of content directly from the prompt, which allows for seamless integration of external resources with the language model. + + + +If working with an interactive (chat-like) flow, remember to keep one of the input variables empty to behave as the chat input. + +
+ +
+ + diff --git a/docs/sidebars.js b/docs/sidebars.js index fff5900fe..c8c663c08 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -19,11 +19,13 @@ module.exports = { "guidelines/components", "guidelines/features", "guidelines/collection", + "guidelines/prompt-customization", + "guidelines/chat-interface", ], }, { type: "category", - label: "Guides", + label: "Step-by-Step Guides", collapsed: false, items: ["guides/loading_document", "guides/chatprompttemplate_guide"], }, diff --git a/docs/static/img/chat_interface.png b/docs/static/img/chat_interface.png new file mode 100644 index 000000000..59dc31a67 Binary files /dev/null and b/docs/static/img/chat_interface.png differ diff --git a/docs/static/img/chat_interface2.png b/docs/static/img/chat_interface2.png new file mode 100644 index 000000000..f904e4a5e Binary files /dev/null and b/docs/static/img/chat_interface2.png differ diff --git a/docs/static/img/chat_interface3.png b/docs/static/img/chat_interface3.png new file mode 100644 index 000000000..4216530c4 Binary files /dev/null and b/docs/static/img/chat_interface3.png differ diff --git a/docs/static/img/chat_interface4.png b/docs/static/img/chat_interface4.png new file mode 100644 index 000000000..fffd4129c Binary files /dev/null and b/docs/static/img/chat_interface4.png differ diff --git a/docs/static/img/prompt_customization.png b/docs/static/img/prompt_customization.png new file mode 100644 index 000000000..297435187 Binary files /dev/null and b/docs/static/img/prompt_customization.png differ diff --git a/docs/static/img/prompt_customization2.png b/docs/static/img/prompt_customization2.png new file mode 100644 index 000000000..8afa3c934 Binary files /dev/null and b/docs/static/img/prompt_customization2.png differ diff --git a/docs/static/img/prompt_customization3.png b/docs/static/img/prompt_customization3.png new file mode 100644 index 000000000..db328b8f4 Binary files /dev/null and b/docs/static/img/prompt_customization3.png differ diff --git a/docs/static/img/prompt_customization4.png b/docs/static/img/prompt_customization4.png new file mode 100644 index 000000000..4d6570929 Binary files /dev/null and b/docs/static/img/prompt_customization4.png differ diff --git a/docs/static/img/prompt_customization5.png b/docs/static/img/prompt_customization5.png new file mode 100644 index 000000000..1621b6dec Binary files /dev/null and b/docs/static/img/prompt_customization5.png differ