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

docs: v1.3 (#7160)

Browse source 
* lint-plaintext

* Squashed commit of the following:

commit 0820877007091550e196c1ec9189580a1adcfe80
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Wed Feb 19 17:34:54 2025 -0500

    fix-links

commit b47fbfe04e3f3c2239147df59b14626839f6b07c
Merge: 22987155fa 02617ffad2
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Wed Feb 19 17:18:18 2025 -0500

    Merge branch 'main' into docs-publish-v0

commit 22987155fa3bbf39ab2f2a31fe6db643cb98f43f
Merge: bf01a75e72 e8529eaecb
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Wed Feb 19 16:25:52 2025 -0500

    Merge branch 'main' into docs-publish-v0

commit bf01a75e7252f61303c237c7f39c35b6e9831278
Merge: 85770ae167 b43bf8f783
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Wed Feb 19 14:42:10 2025 -0500

    Merge branch 'main' into docs-publish-v0

commit 85770ae167914837a2e0eb5b8848d79726507f3e
Merge: fda54f8f43 e970cdbca3
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Wed Feb 19 11:19:11 2025 -0500

    Merge branch 'main' into docs-publish-v0

commit fda54f8f4344ea629ef8028c388ce65ebc0cac51
Merge: 3027a9c3a4 25ac555e8f
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Tue Feb 18 11:43:21 2025 -0500

    Merge branch 'main' into docs-publish-v0

commit 3027a9c3a44a0c270333d033394eda9b8cd521de
Merge: 0046d1884e 45e2f739d5
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Fri Feb 14 13:20:44 2025 -0500

    Merge branch 'main' into docs-publish-v0

commit 0046d1884e30794f9e372ecba2c484a00675be9a
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Thu Feb 13 13:31:22 2025 -0500

    delete-site-and-redirect

commit 1bf763b3b102b2a7cffb75705c5614a114f3a50a
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Thu Feb 13 13:17:49 2025 -0500

    docs: Add information about sharing the Langflow application's Playground endpoint

commit 4eb34bd746fe16c1e81c92d74640d803d0473dcd
Author: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date:   Thu Feb 13 13:06:46 2025 -0500

    docs: Update references from "API pane" to "Publish pane" in documentation

* s3-bucket-init

* add-bundles-page

* output-parser-component

* language-model-component

* legacy-components

* update-file-component

* parser-component

* publish-doc

* update-agent-starter-flows

* voice-mode

* webhook-component-update

* file-management

* update-env-vars

* make-env-var-table-more-readable

* file-management-link

* bump-version

* add-graph-rag-component

* docs-lambda-filter-component

* docs-add-watsonx-model-component

* add-langchain-links-for-watson-package

* remove-s3-bucket-data-component

* docs: publish-flows introduction

* docs: update voice mode instructions for clarity and detail

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* plurals

* docs-review

* Apply suggestions from code review

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>

* steps-for-file-component

* parse-data-and-dataframe-in-legacy

* remove-beta-from-parser-component

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
This commit is contained in:
Mendon Kissling 2025-03-31 15:05:23 -04:00 • committed by GitHub
commit 37fc581472
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
27 changed files with 708 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

67
docs/docs/Concepts/concepts-file-management.md Normal file
View file

@ -0,0 +1,67 @@
---
title: Manage files
slug: /concepts-file-management
---
Upload, store, and manage files in Langflow's **File management** system.
Uploading files to the **File management** system keeps your files in a central location, and allows you to re-use files across flows without repeated manual uploads.
## Upload a file
The **File management** system is available at the `/files` URL. For example, if you're running Langflow at the default `http://127.0.0.1:7860` address, the **File management** system is located at `http://127.0.0.1:7860/files`.
To upload a file from your local machine:
1. From the **My Files** window at `http://127.0.0.1:7860/files`, click **Upload**.
2. Select the file to upload.
The file is uploaded to Langflow.
Files stored in **My Files** can be renamed, downloaded, duplicated, or deleted.
Files are available to flows stored in different folders.
## Use uploaded files in a flow
To use your uploaded files in flows:
1. Include the [File](/components-data#file) component in a flow.
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).
:::note
If you prefer a one-time upload, the [File](/components-data#file) component still allows one-time uploads directly from your local machine.
:::
## Supported file types
The maximum supported file size is 100 MB.
Text files:
- `.txt` - Text files
- `.md`, `.mdx` - Markdown files
- `.csv` - CSV files
- `.json` - JSON files
- `.yaml`, `.yml` - YAML files
- `.xml` - XML files
- `.html`, `.htm` - HTML files
- `.pdf` - PDF files
- `.docx` - Word documents
- `.py` - Python files
- `.sh` - Shell scripts
- `.sql` - SQL files
- `.js` - JavaScript files
- `.ts`, `.tsx` - TypeScript files
Archive formats (for bundling multiple files):
- `.zip` - ZIP archives
- `.tar` - TAR archives
- `.tgz` - Gzipped TAR archives
- `.bz2` - Bzip2 compressed files
- `.gz` - Gzip compressed files

14
docs/docs/Concepts/concepts-overview.md
View file

@ -36,7 +36,7 @@ The flow storage location can be customized with the [LANGFLOW_CONFIG_DIR](/envi
If you're new to Langflow, it's OK to feel a bit lost at first. We’ll take you on a tour, so you can orient yourself and start creating applications quickly.
Langflow has four distinct regions: the [workspace](#workspace) is the main area where you build your flows. The components sidebar is on the left, and lists the available [components](#components). The [playground](#playground) and [API pane](#api-pane) are available in the upper right corner.
Langflow has four distinct regions: the [workspace](#workspace) is the main area where you build your flows. The components sidebar is on the left, and lists the available [components](#components). The [playground](#playground) and [Publish pane](#publish-pane) are available in the upper right corner.
![](/img/workspace.png)
@ -75,11 +75,11 @@ For more information, see the [Playground](/concepts-playground).
![](/img/playground.png)
## API pane {#api-pane}
## Publish pane {#publish-pane}
The **API** pane provides code templates to integrate your flows into external applications.
The **Publish** pane provides code templates to integrate your flows into external applications.
For more information, see the [API pane](/concepts-api).
For more information, see the [Publish pane](/concepts-publish).
![](/img/api-pane.png)
@ -126,6 +126,12 @@ Projects, folders, and flows are exchanged as JSON objects.
* To move a flow or component, drag and drop it into the desired folder.
## File management
Upload, store, and manage files in Langflow's **File management** system.
For more on managing your files, see [Manage files](/concepts-file-management).
## Options menu
The dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow workspace.

136
docs/docs/Concepts/concepts-api.md → docs/docs/Concepts/concepts-publish.md
View file

@ -1,44 +1,41 @@
---
title: API pane
slug: /concepts-api
title: Publish flows
slug: /concepts-publish
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
The **API** pane presents code templates for integrating your flow into external applications.
Langflow provides several ways to publish and integrate your flows into external applications. Whether you want to expose your flow via API endpoints, embed it as a chat widget in your website, or share it as a public playground, this guide covers the options available for making your flows accessible to users.
## API access
The **API** pane presents code templates for integrating your flow into external applications.
![](/img/api-pane.png)
<Tabs>
<TabItem value="curl" label="curl" default>
<TabItem value="Python" label="Python">
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.
</TabItem>
<TabItem value="Python API" label="Python API">
The **Python API** tab displays code to interact with your flow using the Python HTTP `requests` library.
To use the `requests` library:
The **Python** tab displays code to interact with your flow using the Python `requests` library.
1. Copy and paste the code into a Python script.
2. Run the script and pass your message with it.
2. Run the script.
```python
python3 python-test-script.py --message="tell me about something interesting"
```
The response content depends on your flow. Make sure the endpoint returns a successful response.
</TabItem>
<TabItem value="JS API" label="JS API" default>
<TabItem value="JavaScript" label="JavaScript" default>
The **JavaScript API** tab displays code to interact with your flow in JavaScript.
The **JavaScript API** tab displays code to interact with your flow in JavaScript.
1. Copy and paste the code into a JavaScript file.
2. Run the script with any necessary arguments for your flow:
2. Run the script.
```plain
node test-script.js "tell me about something interesting"
@ -47,43 +44,43 @@ node test-script.js "tell me about something interesting"
The response content depends on your flow. Make sure the endpoint returns a successful response.
</TabItem>
<TabItem value="curl" label="curl" default>
<TabItem value="Python code" label="Python code" default>
The **cURL** tab displays sample code for posting a query to your flow.
Copy the code and run it to post a query to your flow and get the result.
The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
To use your code in a Python application using the Langflow runtime, you have to first download your flow’s JSON file.
1. In your **Workspace**, click **Settings**, and then select **Export**.
2. Download the flow to your local machine. Make sure the flow path in the script matches the flow’s location on your machine.
3. Copy and paste the code from the **Python Code** tab into a Python script file.
4. Run the script:
```python
python python-test-script.py
```
The response content depends on your flow. Make sure the endpoint returns a successful response.
</TabItem>
</Tabs>
## Chat Widget
### Temporary overrides
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
The **Temporary overrides** 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` changes that value across all API calls to the `/run` endpoint of this 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.
### Send files to your flow with the API
You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.
For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files).
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.
### Webhook cURL
### Embed the chat widget into HTML
When a **Webhook** component is added to the workspace, a new **Webhook cURL** tab becomes available in the **API** pane that contains an HTTP POST request for triggering the webhook component. For example:
To embed the chat widget into any HTML page, insert the code snippet. inside a `<body>` tag.
```bash
curl -X POST \
"http://127.0.0.1:7860/api/v1/webhook/**YOUR_FLOW_ID**" \
-H 'Content-Type: application/json'\
-d '{"any": "data"}'
```
To test the **Webhook** component in your flow, see the [Webhook component](/components-data#webhook).
## Embed into site
The **Embed into site** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
```html
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@v1.0.7/dist/build/static/js/bundle.min.js""></script>
@ -98,13 +95,13 @@ To embed the chat widget into any HTML page, insert the code snippet. inside a 
### Embed the chat widget with React
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, add this `<script>` tag to the React `index.html` file inside a `<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.
1. Declare your web component and encapsulate it in a React component.
```javascript
declare global {
@ -128,25 +125,25 @@ export default function ChatWidget({ className }) {
);
}
```
Place the component anywhere in your code to display the Chat Widget.
2. Place the component anywhere in your code to display the chat widget.
### Embed the chat widget with Angular
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, add this `<script>` tag to the Angular `index.html` file inside a `<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`.
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`.
`CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows custom elements in your Angular templates, and suppresses warnings related to unknown elements like `langflow-chat`.
- 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:
1. Open the module file `.module.ts` where you want to add the `langflow-chat` web component.
2. Import `CUSTOM_ELEMENTS_SCHEMA` at the top of the `.module.ts` file:
`import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';`
- Add `CUSTOM_ELEMENTS_SCHEMA` to the 'schemas' array inside the '@NgModule' decorator:
3. Add `CUSTOM_ELEMENTS_SCHEMA` to the 'schemas' array inside the '@NgModule' decorator:
```javascript
@NgModule({
@ -163,26 +160,17 @@ When you use a custom web component in an Angular template, the Angular compiler
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:
4. 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>
```
:::tip
### Chat widget configuration
`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`.
Use the widget API to customize your Chat Widget.
:::
## Chat widget configuration
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 |
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@ -210,25 +198,11 @@ Props with the type JSON need to be passed as stringified JSONs, with the format
| 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. |
## Shareable playground
## Tweaks
The **Shareable playground** exposes your Langflow application's **Playground** at the `/public_flow/{flow-id}` endpoint.
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.
You can share this endpoint publicly using a sharing platform like [Ngrok](https://ngrok.com/docs/getting-started/?os=macos) or [zrok](https://docs.zrok.io/docs/getting-started).
## Send image files to your flow with the API
For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files).
## Webhook cURL
When a **Webhook** component is added to the workspace, a new **Webhook cURL** tab becomes available in the **API** pane that contains an HTTP POST request for triggering the webhook component. For example:
```bash
curl -X POST \
"http://127.0.0.1:7860/api/v1/webhook/**YOUR_FLOW_ID**" \
-H 'Content-Type: application/json'\
-d '{"any": "data"}'
```
To test the **Webhook** component in your flow, see the [Webhook component](/components-data#webhook).
If you're using **Datastax Langflow**, you can share the URL with any users within your **Organization**.

53
docs/docs/Concepts/concepts-voice-mode.md Normal file
View file

@ -0,0 +1,53 @@
---
title: Voice mode
slug: /concepts-voice-mode
---
import Icon from "@site/src/components/icon";
The Langflow **Playground** supports **voice mode** for interacting with your applications through a microphone.
An [OpenAI API key](https://platform.openai.com/) is required to use **voice mode**. An [ElevenLabs](https://elevenlabs.io) API key enables more voices in the chat, but is optional.
Your flow must have a [Chat input](/components-io#chat-input) component to interact with the **Playground**.
## Prerequisite
- [OpenAI API key created](https://platform.openai.com/)
## Use voice mode in the Langflow Playground
Chat with an agent in the **Playground**, and get more recent results by asking the agent to use tools.
1. Create a [Simple agent starter project](/starter-projects-simple-agent).
2. Add your **OpenAI API key** credentials to the **Agent** component.
3. To start a chat session, click **Playground**.
4. To enable voice mode, click the <Icon name="Mic" aria-label="Microphone"/> icon.
The **Voice mode** pane opens.
5. In the **OpenAI API Key** field, add your **OpenAI API key** credentials.
This key is saved as a [global variable](/configuration-global-variables) in Langflow and is accessible from any component or flow.
6. Your browser may prompt you for microphone access.
Browser access is **required** to use voice mode.
To continue, allow microphone access in your browser.
7. In the **Audio Input** menu, select the input device to use with voice mode.
:::tip
A higher quality microphone improves OpenAI's voice chat comprehension.
:::
8. Optionally, add your **ElevenLabs API key** in the **ElevenLabs API Key** field.
This makes more voices available for your AI responses.
This key is saved as a [global variable](/configuration-global-variables) in Langflow and is accessible from any component or flow.
9. In the **Preferred Language** menu, select your language for conversing with Langflow.
This option changes both the spoken conversation and the chat responses in the **Playground**.
10. Talk into your microphone.
The waveform in the voice mode pane should register your input, and the agent should respond in voice and in the **Playground**.
11. Ask the agent to use the tools available to find recent news about a subject.
The agent describes its search process, including accessing the **URL** tool to fetch recent news.
The agent summarizes the recent news in speech and in the **Playground**.
Be aware of the following considerations when using voice mode:
* Name and describe your tools accurately, so the **Agent** chooses tools correctly.
* Voice mode does not use the instructions in the Agent component's **Agent Instructions** field, because your spoken instructions override this value.
* Voice mode only maintains context within the conversation session you are currently in.
If you exit a conversation and close the **Playground**, your conversational context is not available in the next chat session.