jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

docs: update docs from notion (#3074)

Browse source 
* Update docs from Notion

* feat: Add RAG (Retrieval-Augmented Generation) components documentation

This commit adds documentation for RAG (Retrieval-Augmented Generation) components. It explains how these components process a user query by retrieving relevant documents and generating a concise summary that addresses the user's question. The documentation includes information about the Vectara component, its parameters, and the Vectara corpus. For more details, refer to the [Vectara documentation](https://docs.vectara.com/docs).

---------

Co-authored-by: ogabrielluiz <ogabrielluiz@users.noreply.github.com>
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
This commit is contained in:
github-actions[bot] 2024-07-30 17:52:03 +00:00 • committed by GitHub
commit 8f3a82e0df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 68 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

33
docs/docs/Components/components-rag.md
View file

@ -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)

2
docs/docs/Integrations/integrations-langwatch.md
View file

@ -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

5
docs/docs/Settings/settings-global-variables.md
View file

@ -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:

60
docs/docs/Workspace/workspace-api.md
View file

@ -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.
<ReactPlayer controls url="https://youtu.be/ISGKvHzJG8o" />
## Chat Widget {#48f121a6cb3243979a341753da0c2700}
---
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` 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 `<body>` tag, as demonstrated in the video below.
<ReactPlayer controls url="https://youtu.be/cVpNc-osfxQ" />
### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
To embed the Chat Widget using React, insert this `<script>` tag into the React *index.html* file, inside the `<body>`tag:
To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
```javascript
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```
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 ( <div className={className}> <langflow-chat chat_inputs='{"your_key":"value"}' chat_input_field="your_chat_key" flow_id="your_flow_id" host_url="langflow_url" ></langflow-chat> </div> );}
```
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 `<script>` tag into the Angular *index.html* file, inside the `<body>` tag.
To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
```javascript
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
```
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
<langflow-chat
chat_inputs='{"your_key":"value"}'
chat_input_field="your_chat_key"
flow_id="your_flow_id"
host_url="langflow_url"
></langflow-chat>
<langflow-chat chat_inputs='{"your_key":"value"}' chat_input_field="your_chat_key" flow_id="your_flow_id" host_url="langflow_url"></langflow-chat>
```
:::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. |