diff --git a/docs/docs/Components/components-rag.md b/docs/docs/Components/components-rag.md index d39eef27c..df4b5691f 100644 --- a/docs/docs/Components/components-rag.md +++ b/docs/docs/Components/components-rag.md @@ -6,26 +6,23 @@ slug: /components-rag RAG (Retrieval-Augmented Generation) components process a user query by retrieving relevant documents and generating a concise summary that addresses the user's question. - ### Vectara +`Vectara` performs RAG using a Vectara corpus, including document retrieval, reranking results, and summary generation. - `Vectara` performs RAG using a Vectara corpus, including document retrieval, reranking results, and summary generation. +**Parameters:** +- **Vectara Customer ID:** Customer ID. +- **Vectara Corpus ID:** Corpus ID. +- **Vectara API Key:** API key. +- **Search Query:** User query. +- **Lexical Interpolation:** How much to weigh lexical vs. embedding scores. +- **Metadata Filters:** Filters to narrow down the search documents and parts. +- **Reranker Type:** How to rerank the retrieved results. +- **Number of Results to Rerank:** Maximum reranked results. +- **Diversity Bias:** How much to diversify retrieved results (only for MMR reranker). +- **Max Results to Summarize:** Maximum search results to provide to summarizer. +- **Response Language:** The language code (use ISO 639-1 or 639-3 codes) of the summary. +- **Prompt Name:** The summarizer prompt. - **Parameters:** - - - **Vectara Customer ID:** Customer ID. - - **Vectara Corpus ID:** Corpus ID. - - **Vectara API Key:** API key. - - **Search Query:** User query. - - **Lexical Interpolation:** How much to weigh lexical vs. embedding scores. - - **Metadata Filters:** Filters to narrow down the search documents and parts. - - **Reranker Type:** How to rerank the retrieved results. - - **Number of Results to Rerank:** Maximum reranked results. - - **Diversity Bias:** How much to diversify retrieved results (only for MMR reranker). - - **Max Results to Summarize:** Maximum search results to provide to summarizer. - - **Response Language:** The language code (use ISO 639-1 or 639-3 codes) of the summary. - - **Prompt Name:** The summarizer prompt. - - For more information, consult the [Vectara documentation](https://docs.vectara.com/docs) +For more information, consult the [Vectara documentation](https://docs.vectara.com/docs) diff --git a/docs/docs/Integrations/integrations-langwatch.md b/docs/docs/Integrations/integrations-langwatch.md index 6c69f6250..53440e716 100644 --- a/docs/docs/Integrations/integrations-langwatch.md +++ b/docs/docs/Integrations/integrations-langwatch.md @@ -17,7 +17,7 @@ To integrate with Langflow, just add your LangWatch API as a Langflow environmen ## Step-by-step Configuration {#6f1d56ff6063417491d100d522dfcf1a} -1. Obtain your LangWatch API key from [https://app.langwatch.com/](https://app.langwatch.com/) +1. Obtain your LangWatch API key from [https://app.langwatch.ai/](https://app.langwatch.ai/) 2. Add the following key to Langflow .env file: ```shell diff --git a/docs/docs/Settings/settings-global-variables.md b/docs/docs/Settings/settings-global-variables.md index 33d727757..f6fb074e1 100644 --- a/docs/docs/Settings/settings-global-variables.md +++ b/docs/docs/Settings/settings-global-variables.md @@ -82,10 +82,7 @@ To prevent this behavior, set `LANGFLOW_STORE_ENVIRONMENT_VARIABLES` to `false` -You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`. - - -Specify variables as a comma-separated list (e.g., _`"VARIABLE1, VARIABLE2"`_) or a JSON-encoded string (e.g., _`'["VARIABLE1", "VARIABLE2"]'`_). +You can specify variables to get from the environment by listing them in `LANGFLOW_VARIABLES_TO_GET_FROM_ENVIRONMENT`, as a comma-separated list (e.g., _`VARIABLE1, VARIABLE2`_). The default list of variables includes the ones below and more: diff --git a/docs/docs/Workspace/workspace-api.md b/docs/docs/Workspace/workspace-api.md index 5e2237b8d..9873143d5 100644 --- a/docs/docs/Workspace/workspace-api.md +++ b/docs/docs/Workspace/workspace-api.md @@ -8,73 +8,106 @@ import ReactPlayer from "react-player"; The **API** section presents code templates for integrating your flow into external applications. + ![](./1862729633.png) + ### cURL {#4eb287a8424349c4b0b436a6703de5f3} + The **cURL** tab displays sample code for posting a query to your flow. Modify the `input_value` to change your input message. Copy the code and run it to post a query to your flow and get the result. + ### Python API {#fb7db14e6330418389562ef647aa2354} + The **Python API** tab displays code to interact with your flow using the Python HTTP requests library. + ### Python Code {#7af87438549b4972907ac310a4193067} + The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime. + ### Tweaks {#5680600063724590ac2302b4ddeea867} + The **Tweaks** tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the **Chat Input** component's `input_value` will change that value across all API calls. + + ## Chat Widget {#48f121a6cb3243979a341753da0c2700} + --- + The **Chat Widget HTML** tab displays code that can be inserted in the `` of your HTML to interact with your flow. + The **Langflow Chat Widget** is a powerful web component that enables communication with a Langflow project. This widget allows for a chat interface embedding, allowing the integration of Langflow into web applications effortlessly. + You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow. + Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular. + ![](./566212295.png) + ### Embed your flow into HTML {#6e84db2f2a0d451db6fa03c57e9bf9a4} + The Chat Widget can be embedded into any HTML page, inside a `` tag, as demonstrated in the video below. + + ### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665} -To embed the Chat Widget using React, insert this ` ``` + + Declare your Web Component and encapsulate it in a React component. + ```javascript declare global { namespace JSX { interface IntrinsicElements { "langflow-chat": any; } }}export default function ChatWidget({ className }) { return (
);} ``` + + Finally, you can place the component anywhere in your code to display the Chat Widget. + ### Embed your flow with Angular {#4fd87355b9aa409894acfbb9e1497980} -To use the chat widget in Angular, first add this ` ``` + + When you use a custom web component in an Angular template, the Angular compiler might show a warning when it doesn't recognize the custom elements by default. To suppress this warning, add `CUSTOM_ELEMENTS_SCHEMA` to the module's `@NgModule.schemas`. -- Open the module file (it typically ends with *.module.ts*) where you'd add the `langflow-chat` web component. +- Open the module file (it typically ends with _.module.ts_) where you'd add the `langflow-chat` web component. - Import `CUSTOM_ELEMENTS_SCHEMA` at the top of the file: `import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";` @@ -85,35 +118,43 @@ When you use a custom web component in an Angular template, the Angular compiler @NgModule({ declarations: [ // ... Other components and directives ... ], imports: [ // ... Other imported modules ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {} ``` + + In your Angular project, find the component belonging to the module where `CUSTOM_ELEMENTS_SCHEMA` was added. Inside the template, add the `langflow-chat` tag to include the Chat Widget in your component's view: + ```javascript - + ``` + :::tip `CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows Angular to recognize custom elements. Adding `CUSTOM_ELEMENTS_SCHEMA` tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like `langflow-chat`. Notice that you can only use the Chat Widget in components that are part of the module where you added `CUSTOM_ELEMENTS_SCHEMA`. ::: + + + ## Chat Widget Configuration {#5ede4bbbd2ac43e29c90f3edb43cba58} + --- + Use the widget API to customize your Chat Widget: + :::caution Props with the type JSON need to be passed as stringified JSONs, with the format \{"key":"value"\}. ::: + + + | Prop | Type | Required | Description | | --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | bot_message_style | JSON | No | Applies custom formatting to bot messages. | @@ -139,3 +180,4 @@ Props with the type JSON need to be passed as stringified JSONs, with the format | user_message_style | JSON | No | Determines the formatting for user messages in the chat window. | | width | Number | No | Sets the width of the chat window in pixels. | | window_title | String | No | Sets the title displayed in the chat window's header or title bar. | +