Merge dev into shortcuts_settings
This commit is contained in:
igorrCarvalho
commit
29015803c1
52 changed files with 616 additions and 594 deletions
|
|
@ -13,7 +13,7 @@ services:
|
|||
- "7860:7860"
|
||||
volumes:
|
||||
- ./:/app
|
||||
command: bash -c "uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --loop asyncio",
|
||||
command: bash -c "uvicorn --factory langflow.main:create_app --host 0.0.0.0 --port 7860 --reload --loop asyncio"
|
||||
networks:
|
||||
- langflow
|
||||
frontend:
|
||||
|
|
|
|||
154
docs/docs/administration/api.mdx
Normal file
154
docs/docs/administration/api.mdx
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
# API Keys
|
||||
|
||||
## Introduction
|
||||
|
||||
Langflow offers an API Key functionality that allows users to access their individual components and flows without going through traditional login authentication. The API Key is a user-specific token that can be included in the request's header or query parameter to authenticate API calls. The following documentation outlines how to generate, use, and manage these API Keys in Langflow.
|
||||
|
||||
<Admonition type="warning">
|
||||
This feature requires the `LANGFLOW_AUTO_LOGIN` environment variable to be set
|
||||
to `False`. The default user and password are set using _`LANGFLOW_SUPERUSER`_
|
||||
and _`LANGFLOW_SUPERUSER_PASSWORD`_ environment variables. Default values are
|
||||
_`langflow`_ and _`langflow`_ respectively.
|
||||
</Admonition>
|
||||
|
||||
## Generating an API Key
|
||||
|
||||
### Through Langflow UI
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/api-key.png"),
|
||||
dark: useBaseUrl("img/api-key.png"),
|
||||
}}
|
||||
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
1. Click on the "API Key" icon.
|
||||
2. Click on "Create new secret key".
|
||||
3. Give it an optional name.
|
||||
4. Click on "Create secret key".
|
||||
5. Copy the API key and store it in a secure location.
|
||||
|
||||
## Using the API Key
|
||||
|
||||
### Using the `x-api-key` Header
|
||||
|
||||
Include the `x-api-key` in the HTTP header when making API requests:
|
||||
|
||||
```bash
|
||||
curl -X POST \
|
||||
http://localhost:3000/api/v1/run/<your_flow_id> \
|
||||
-H 'Content-Type: application/json'\
|
||||
-H 'x-api-key: <your api key>'\
|
||||
-d '{"inputs": {"text":""}, "tweaks": {}}'
|
||||
```
|
||||
|
||||
With Python using `requests`:
|
||||
|
||||
```python
|
||||
import requests
|
||||
from typing import Optional
|
||||
|
||||
BASE_API_URL = "http://localhost:3001/api/v1/process"
|
||||
FLOW_ID = "4441b773-0724-434e-9cee-19d995d8f2df"
|
||||
# You can tweak the flow by adding a tweaks dictionary
|
||||
# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
|
||||
TWEAKS = {}
|
||||
|
||||
def run_flow(inputs: dict,
|
||||
flow_id: str,
|
||||
tweaks: Optional[dict] = None,
|
||||
apiKey: Optional[str] = None) -> dict:
|
||||
"""
|
||||
Run a flow with a given message and optional tweaks.
|
||||
|
||||
:param message: The message to send to the flow
|
||||
:param flow_id: The ID of the flow to run
|
||||
:param tweaks: Optional tweaks to customize the flow
|
||||
:return: The JSON response from the flow
|
||||
"""
|
||||
api_url = f"{BASE_API_URL}/{flow_id}"
|
||||
|
||||
payload = {"inputs": inputs}
|
||||
headers = {}
|
||||
|
||||
if tweaks:
|
||||
payload["tweaks"] = tweaks
|
||||
if apiKey:
|
||||
headers = {"x-api-key": apiKey}
|
||||
|
||||
response = requests.post(api_url, json=payload, headers=headers)
|
||||
return response.json()
|
||||
|
||||
# Setup any tweaks you want to apply to the flow
|
||||
inputs = {"text":""}
|
||||
api_key = "<your api key>"
|
||||
print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
|
||||
```
|
||||
|
||||
### Using the Query Parameter
|
||||
|
||||
Alternatively, you can include the API key as a query parameter in the URL:
|
||||
|
||||
```bash
|
||||
curl -X POST \
|
||||
http://localhost:3000/api/v1/process/<your_flow_id>?x-api-key=<your_api_key> \
|
||||
-H 'Content-Type: application/json'\
|
||||
-d '{"inputs": {"text":""}, "tweaks": {}}'
|
||||
```
|
||||
|
||||
Or with Python:
|
||||
|
||||
```python
|
||||
import requests
|
||||
|
||||
BASE_API_URL = "http://localhost:3001/api/v1/process"
|
||||
FLOW_ID = "4441b773-0724-434e-9cee-19d995d8f2df"
|
||||
# You can tweak the flow by adding a tweaks dictionary
|
||||
# e.g {"OpenAI-XXXXX": {"model_name": "gpt-4"}}
|
||||
TWEAKS = {}
|
||||
|
||||
def run_flow(inputs: dict,
|
||||
flow_id: str,
|
||||
tweaks: Optional[dict] = None,
|
||||
apiKey: Optional[str] = None) -> dict:
|
||||
"""
|
||||
Run a flow with a given message and optional tweaks.
|
||||
|
||||
:param message: The message to send to the flow
|
||||
:param flow_id: The ID of the flow to run
|
||||
:param tweaks: Optional tweaks to customize the flow
|
||||
:return: The JSON response from the flow
|
||||
"""
|
||||
api_url = f"{BASE_API_URL}/{flow_id}"
|
||||
|
||||
payload = {"inputs": inputs}
|
||||
headers = {}
|
||||
|
||||
if tweaks:
|
||||
payload["tweaks"] = tweaks
|
||||
if apiKey:
|
||||
api_url += f"?x-api-key={apiKey}"
|
||||
|
||||
response = requests.post(api_url, json=payload, headers=headers)
|
||||
return response.json()
|
||||
|
||||
# Setup any tweaks you want to apply to the flow
|
||||
inputs = {"text":""}
|
||||
api_key = "<your api key>"
|
||||
print(run_flow(inputs, flow_id=FLOW_ID, tweaks=TWEAKS, apiKey=api_key))
|
||||
```
|
||||
|
||||
## Security Considerations
|
||||
|
||||
- **Visibility**: The API key won't be retrievable again through the UI for security reasons.
|
||||
- **Scope**: The key only allows access to the flows and components of the specific user to whom it was issued.
|
||||
|
||||
## Revoking an API Key
|
||||
|
||||
To revoke an API key, simply delete it from the UI. This will immediately invalidate the key and prevent it from being used again.
|
||||
56
docs/docs/administration/chat-interface.mdx
Normal file
56
docs/docs/administration/chat-interface.mdx
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
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.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface.png"),
|
||||
dark: useBaseUrl("img/chat_interface.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
Notice that editing variables in the chat interface take place temporarily and won’t change their original value in the components once the chat is closed.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface2.png"),
|
||||
dark: useBaseUrl("img/chat_interface2.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
To view the complete prompt in its original, structured format, click the "Display Prompt" option. This feature lets you see the prompt exactly as it entered the model.
|
||||
|
||||
{" "}
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface3.png"),
|
||||
dark: useBaseUrl("img/chat_interface3.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
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.
|
||||
|
||||
{" "}
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/chat_interface4.png"),
|
||||
dark: useBaseUrl("img/chat_interface4.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
211
docs/docs/administration/chat-widget.mdx
Normal file
211
docs/docs/administration/chat-widget.mdx
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
# Chat Widget
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
The <b>Langflow Chat Widget</b> 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.
|
||||
</div>
|
||||
|
||||
## Features
|
||||
|
||||
🌟 **Seamless Integration:** Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.
|
||||
|
||||
🚀 **Interactive Chat Interface:** Engage your users with a user-friendly conversation, powered by Langflow's advanced language understanding capabilities.
|
||||
|
||||
🎛️ **Customizable Styling:** Customize the appearance of the chat widget to match your application's design and branding.
|
||||
|
||||
🌐 **Multilingual Support:** Communicate with users in multiple languages, opening up your application to a global audience.
|
||||
|
||||
---
|
||||
|
||||
## Usage
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
You can get the HTML code embedded with the chat by clicking the Code button
|
||||
at the Sidebar after building a flow.
|
||||
</div>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/widget-sidebar.png"),
|
||||
dark: useBaseUrl("img/widget-sidebar.png"),
|
||||
}}
|
||||
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
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.
|
||||
</div>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/widget-code.png"),
|
||||
dark: useBaseUrl("img/widget-code.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
---
|
||||
|
||||
### HTML
|
||||
|
||||
The Chat Widget can be embedded into any HTML page, inside a _`<body>`_ tag, as demonstrated in the video below.
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_widget.mp4" />
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### React
|
||||
|
||||
To embed the Chat Widget using React, you'll need to insert this _`<script>`_ tag into the React _index.html_ file, inside the _`<body>`_ tag:
|
||||
|
||||
```html
|
||||
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
||||
```
|
||||
|
||||
Then, declare your Web Component and encapsulate it in a React component.
|
||||
|
||||
```jsx
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
### Angular
|
||||
|
||||
To use it in Angular, first add this _`<script>`_ tag into the Angular _index.html_ file, inside the _`<body>`_ tag.
|
||||
|
||||
```html
|
||||
<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.
|
||||
- Import _`CUSTOM_ELEMENTS_SCHEMA`_ at the top of the file:
|
||||
|
||||
```ts
|
||||
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
|
||||
```
|
||||
|
||||
- Add _`CUSTOM_ELEMENTS_SCHEMA`_ to the 'schemas' array inside the '@NgModule' decorator:
|
||||
|
||||
```ts
|
||||
@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:
|
||||
|
||||
```jsx
|
||||
<langflow-chat
|
||||
chat_inputs='{"your_key":"value"}'
|
||||
chat_input_field="your_chat_key"
|
||||
flow_id="your_flow_id"
|
||||
host_url="langflow_url"
|
||||
></langflow-chat>
|
||||
```
|
||||
|
||||
<Admonition type="info">
|
||||
<ul>
|
||||
<li>
|
||||
_`CUSTOM_ELEMENTS_SCHEMA`_ is a built-in schema that allows Angular to
|
||||
recognize custom elements.
|
||||
</li>
|
||||
<li>
|
||||
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`_.
|
||||
</li>
|
||||
<li>
|
||||
Notice that you can only use the Chat Widget in components that are part
|
||||
of the module where you added _`CUSTOM_ELEMENTS_SCHEMA`_.
|
||||
</li>
|
||||
</ul>
|
||||
</Admonition>
|
||||
|
||||
---
|
||||
|
||||
## Configuration
|
||||
|
||||
Use the widget API to customize your Chat Widget:
|
||||
|
||||
<Admonition type="caution">
|
||||
Props with the type JSON need to be passed as Stringified JSONs, with the
|
||||
format {<span>"key":"value"</span>}.
|
||||
</Admonition>
|
||||
|
||||
| Prop | Type | Required | Description |
|
||||
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
|
||||
| bot_message_style | JSON | No | Applies custom formatting to bot messages. |
|
||||
| chat_input_field | String | Yes | Defines the type of the input field for chat messages. |
|
||||
| chat_inputs | JSON | Yes | Determines the chat input elements and their respective values. |
|
||||
| chat_output_key | String | No | Specifies which output to display if multiple outputs are available. |
|
||||
| chat_position | String | No | Positions the chat window on the screen (options include: top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). |
|
||||
| chat_trigger_style | JSON | No | Styles the chat trigger button. |
|
||||
| chat_window_style | JSON | No | Customizes the overall appearance of the chat window. |
|
||||
| error_message_style | JSON | No | Sets the format for error messages within the chat window. |
|
||||
| flow_id | String | Yes | Identifies the flow that the component is associated with. |
|
||||
| height | Number | No | Sets the height of the chat window in pixels. |
|
||||
| host_url | String | Yes | Specifies the URL of the host for chat component communication. |
|
||||
| input_container_style | JSON | No | Applies styling to the container where chat messages are entered. |
|
||||
| input_style | JSON | No | Sets the style for the chat input field. |
|
||||
| online | Boolean | No | Toggles the online status of the chat component. |
|
||||
| online_message | String | No | Sets a custom message to display when the chat component is online. |
|
||||
| placeholder | String | No | Sets the placeholder text for the chat input field. |
|
||||
| placeholder_sending | String | No | Sets the placeholder text to display while a message is being sent. |
|
||||
| send_button_style | JSON | No | Sets the style for the send button in the chat window. |
|
||||
| send_icon_style | JSON | No | Sets the style for the send icon in the chat window. |
|
||||
| tweaks | JSON | No | Applies additional custom adjustments for the associated flow. |
|
||||
| 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. | import ThemedImage from "@theme/ThemedImage"; |
|
||||
43
docs/docs/administration/cli.mdx
Normal file
43
docs/docs/administration/cli.mdx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
# 🖥️ Command Line Interface (CLI)
|
||||
|
||||
## Overview
|
||||
|
||||
Langflow's Command Line Interface (CLI) is a powerful tool that allows you to interact with the Langflow server from the command line. The CLI provides a wide range of commands to help you shape Langflow to your needs.
|
||||
|
||||
Running the CLI without any arguments will display a list of available commands and options.
|
||||
|
||||
```bash
|
||||
python -m langflow --help
|
||||
# or
|
||||
python -m langflow
|
||||
```
|
||||
|
||||
Each option is detailed below:
|
||||
|
||||
- `--help`: Displays all available options.
|
||||
- `--host`: Defines the host to bind the server to. Can be set using the `LANGFLOW_HOST` environment variable. The default is `127.0.0.1`.
|
||||
- `--workers`: Sets the number of worker processes. Can be set using the `LANGFLOW_WORKERS` environment variable. The default is `1`.
|
||||
- `--timeout`: Sets the worker timeout in seconds. The default is `60`.
|
||||
- `--port`: Sets the port to listen on. Can be set using the `LANGFLOW_PORT` environment variable. The default is `7860`.
|
||||
- `--config`: Defines the path to the configuration file. The default is `config.yaml`.
|
||||
- `--env-file`: Specifies the path to the .env file containing environment variables. The default is `.env`.
|
||||
- `--log-level`: Defines the logging level. Can be set using the `LANGFLOW_LOG_LEVEL` environment variable. The default is `critical`.
|
||||
- `--components-path`: Specifies the path to the directory containing custom components. Can be set using the `LANGFLOW_COMPONENTS_PATH` environment variable. The default is `langflow/components`.
|
||||
- `--log-file`: Specifies the path to the log file. Can be set using the `LANGFLOW_LOG_FILE` environment variable. The default is `logs/langflow.log`.
|
||||
- `--cache`: Select the type of cache to use. Options are `InMemoryCache` and `SQLiteCache`. Can be set using the `LANGFLOW_LANGCHAIN_CACHE` environment variable. The default is `SQLiteCache`.
|
||||
- `--dev/--no-dev`: Toggles the development mode. The default is `no-dev`.
|
||||
- `--path`: Specifies the path to the frontend directory containing build files. This option is for development purposes only. Can be set using the `LANGFLOW_FRONTEND_PATH` environment variable.
|
||||
- `--open-browser/--no-open-browser`: Toggles the option to open the browser after starting the server. Can be set using the `LANGFLOW_OPEN_BROWSER` environment variable. The default is `open-browser`.
|
||||
- `--remove-api-keys/--no-remove-api-keys`: Toggles the option to remove API keys from the projects saved in the database. Can be set using the `LANGFLOW_REMOVE_API_KEYS` environment variable. The default is `no-remove-api-keys`.
|
||||
- `--install-completion [bash|zsh|fish|powershell|pwsh]`: Installs completion for the specified shell.
|
||||
- `--show-completion [bash|zsh|fish|powershell|pwsh]`: Shows completion for the specified shell, allowing you to copy it or customize the installation.
|
||||
- `--backend-only`: This parameter, with a default value of `False`, allows running only the backend server without the frontend. It can also be set using the `LANGFLOW_BACKEND_ONLY` environment variable.
|
||||
- `--store`: This parameter, with a default value of `True`, enables the store features, use `--no-store` to deactivate it. It can be configured using the `LANGFLOW_STORE` environment variable.
|
||||
|
||||
These parameters are important for users who need to customize the behavior of Langflow, especially in development or specialized deployment scenarios.
|
||||
|
||||
### Environment Variables
|
||||
|
||||
You can configure many of the CLI options using environment variables. These can be exported in your operating system or added to a `.env` file and loaded using the `--env-file` option.
|
||||
|
||||
A sample `.env` file named `.env.example` is included with the project. Copy this file to a new file named `.env` and replace the example values with your actual settings. If you're setting values in both your OS and the `.env` file, the `.env` settings will take precedence.
|
||||
13
docs/docs/administration/collection.mdx
Normal file
13
docs/docs/administration/collection.mdx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import ThemedImage from '@theme/ThemedImage';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
import ZoomableImage from '/src/theme/ZoomableImage.js';
|
||||
import ReactPlayer from 'react-player';
|
||||
|
||||
# Collection
|
||||
|
||||
A collection is a snapshot of the flows available in the database. You can download your entire collection for local storage and upload it anytime for future use.
|
||||
|
||||
<div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'center' }}>
|
||||
<ReactPlayer playing controls url='/videos/langflow_collection.mp4'
|
||||
/>
|
||||
</div>
|
||||
58
docs/docs/administration/components.mdx
Normal file
58
docs/docs/administration/components.mdx
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Component
|
||||
|
||||
Components are the building blocks of the flows. They are made of inputs, outputs, and parameters that define their functionality, providing a convenient and straightforward way to compose LLM-based applications. Learn more about components and how they work in the LangChain [documentation](https://python.langchain.com/docs/integrations/components) section.
|
||||
|
||||
### Component's Features
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
During the flow creation process, you will notice handles (colored circles)
|
||||
attached to one or both sides of a component. These handles represent the
|
||||
availability to connect to other components, while their colors are type hints
|
||||
(hover over a handle to see connection details).
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
For example, if you select a <code>ConversationChain</code> component, you
|
||||
will see orange <span style={{ color: "orange" }}>o</span> and purple{" "}
|
||||
<span style={{ color: "purple" }}>o</span> input handles. They indicate that
|
||||
this component accepts an LLM and a Memory component as inputs. The red
|
||||
asterisk <span style={{ color: "red" }}>*</span> means that at least one input
|
||||
of that type is required.
|
||||
</div>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/single-compenent.png"),
|
||||
dark: useBaseUrl("img/single-compenent.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
On the top right corner, you will find the component status icon 🔴. Make the
|
||||
necessary connections, build the flow (⚡ zap icon on the bottom right of the
|
||||
canvas) and once the validation is completed, the status of each validated
|
||||
component should light green 🟢. Hover over the component status to reveal the
|
||||
outputs going through it in case of success, or the detected error in case of
|
||||
failure.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Component's Parameters
|
||||
|
||||
Langflow components can be edited in the component settings button. Hide parameters to reduce complexity and keep the canvas clean and intuitive for experimentation.
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_parameters.mp4" />
|
||||
</div>
|
||||
410
docs/docs/administration/custom-component.mdx
Normal file
410
docs/docs/administration/custom-component.mdx
Normal file
|
|
@ -0,0 +1,410 @@
|
|||
---
|
||||
description: Custom Components
|
||||
hide_table_of_contents: true
|
||||
---
|
||||
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
# Custom Components
|
||||
|
||||
In Langflow, a Custom Component is a special component type that allows users to extend the platform's functionality by creating their own reusable and configurable components.
|
||||
|
||||
A Custom Component is created from a user-defined Python script that uses the _`CustomComponent`_ class provided by the Langflow library. These components can be as simple as a basic function that takes and returns a string or as complex as a combination of multiple sub-components and API calls.
|
||||
|
||||
Let's take a look at the basic rules and features. Then we'll go over an example.
|
||||
|
||||
## TL;DR
|
||||
|
||||
- Create a class that inherits from _`CustomComponent`_ and contains a _`build`_ method.
|
||||
- Use arguments with [Type Annotations (or Type Hints)](https://docs.python.org/3/library/typing.html) of the _`build`_ method to create component fields.
|
||||
- Use the _`build_config`_ method to customize how these fields look and behave.
|
||||
- Set up a folder with your components to load them up in Langflow's sidebar.
|
||||
|
||||
Here is an example:
|
||||
|
||||
<div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}>
|
||||
<CH.Code linuNumbers={false}>
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class DocumentProcessor(CustomComponent):
|
||||
display_name = "Document Processor"
|
||||
description = "This component processes a document"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
options = ["Uppercase", "Lowercase", "Titlecase"]
|
||||
return {
|
||||
"function": {"options": options,
|
||||
"value": options[0]}}
|
||||
|
||||
def build(self, document: Document, function: str) -> Document:
|
||||
if isinstance(document, list):
|
||||
document = document[0]
|
||||
page_content = document.page_content
|
||||
if function == "Uppercase":
|
||||
page_content = page_content.upper()
|
||||
elif function == "Lowercase":
|
||||
page_content = page_content.lower()
|
||||
elif function == "Titlecase":
|
||||
page_content = page_content.title()
|
||||
self.repr_value = f"Result of {function} function: {page_content}"
|
||||
return Document(page_content=page_content)
|
||||
```
|
||||
|
||||
</CH.Code>
|
||||
|
||||
<ZoomableImage
|
||||
alt="Document Processor Component"
|
||||
sources={{
|
||||
light: "img/document_processor.png",
|
||||
dark: "img/document_processor.png",
|
||||
}}
|
||||
style={{
|
||||
margin: "0 auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<Admonition type="tip">
|
||||
Check out [FlowRunner Component](../examples/flow-runner) for a more complex
|
||||
example.
|
||||
</Admonition>
|
||||
|
||||
---
|
||||
|
||||
## Rules
|
||||
|
||||
The Python script for every Custom Component should follow a set of rules. Let's go over them one by one:
|
||||
|
||||
<CH.Scrollycoding rows={20} className={""}>
|
||||
|
||||
### Rule 1
|
||||
|
||||
The script must contain a **single class** that inherits from _`CustomComponent`_.
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class MyComponent(CustomComponent):
|
||||
display_name = "Custom Component"
|
||||
description = "This is a custom component"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
def build(self, document: Document, function: str) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Rule 2
|
||||
|
||||
This class requires a _`build`_ method used to run the component and define its fields.
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class MyComponent(CustomComponent):
|
||||
display_name = "Custom Component"
|
||||
description = "This is a custom component"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
# focus
|
||||
# mark
|
||||
def build(self) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
The [Return Type Annotation](https://docs.python.org/3/library/typing.html) of the _`build`_ method defines the component type (e.g., Chain, BaseLanguageModel, or basic Python types). Check out all supported types in the [component reference](../components/custom).
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class MyComponent(CustomComponent):
|
||||
display_name = "Custom Component"
|
||||
description = "This is a custom component"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
# focus[20:31]
|
||||
# mark
|
||||
def build(self) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class MyComponent(CustomComponent):
|
||||
display_name = "Custom Component"
|
||||
description = "This is a custom component"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
def build(self) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
### Rule 3
|
||||
|
||||
The class can have a [_`build_config`_](focus://8) method, which defines configuration fields for the component. The [_`build_config`_](focus://8) method should always return a dictionary with specific keys representing the field names and their corresponding configurations. It must follow the format described below:
|
||||
|
||||
- Top-level keys are field names.
|
||||
- Their values are also of type _`dict`_. They specify the behavior of the generated fields.
|
||||
|
||||
Check out the [component reference](../components/custom) for more details on the available field configurations.
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class MyComponent(CustomComponent):
|
||||
display_name = "Custom Component"
|
||||
description = "This is a custom component"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
def build(self) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
Let's create a custom component that processes a document (_`langchain.schema.Document`_) using a simple function.
|
||||
|
||||
---
|
||||
|
||||
### Pick a display name
|
||||
|
||||
To start, let's choose a name for our component by adding a _`display_name`_ attribute. This name will appear on the canvas. The name of the class is not relevant, but let's call it _`DocumentProcessor`_.
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
# focus
|
||||
class DocumentProcessor(CustomComponent):
|
||||
# focus
|
||||
display_name = "Document Processor"
|
||||
description = "This is a custom component"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
def build(self) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Write a description
|
||||
|
||||
We can also write a description for it using a _`description`_ attribute.
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class DocumentProcessor(CustomComponent):
|
||||
display_name = "Document Processor"
|
||||
description = "This component processes a document"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
def build(self) -> Document:
|
||||
...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class DocumentProcessor(CustomComponent):
|
||||
display_name = "Document Processor"
|
||||
description = "This component processes a document"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
...
|
||||
|
||||
def build(self, document: Document, function: str) -> Document:
|
||||
if isinstance(document, list):
|
||||
document = document[0]
|
||||
page_content = document.page_content
|
||||
if function == "Uppercase":
|
||||
page_content = page_content.upper()
|
||||
elif function == "Lowercase":
|
||||
page_content = page_content.lower()
|
||||
elif function == "Titlecase":
|
||||
page_content = page_content.title()
|
||||
self.repr_value = f"Result of {function} function: {page_content}"
|
||||
return Document(page_content=page_content)
|
||||
```
|
||||
|
||||
### Add the build method
|
||||
|
||||
Here, the build method takes two input parameters: _`document`_, representing the input document to be processed, and _`function`_, a string representing the selected text transformation to be applied (either "Uppercase," "Lowercase," or "Titlecase"). The method processes the text content of the input Document based on the selected function.
|
||||
|
||||
The attribute _`repr_value`_ is used to display the result of the component on the canvas. It is optional and can be used to display any string value.
|
||||
|
||||
The return type is _`Document`_.
|
||||
|
||||
---
|
||||
|
||||
### Customize the component fields
|
||||
|
||||
The _`build_config`_ method is here defined to customize the component fields.
|
||||
|
||||
- _`options`_ determines that the field will be a dropdown menu. The list values and field type must be _`str`_.
|
||||
- _`value`_ is the default value of the field.
|
||||
- _`display_name`_ is the name of the field to be displayed.
|
||||
|
||||
```python
|
||||
from langflow.custom import CustomComponent
|
||||
from langchain.schema import Document
|
||||
|
||||
class DocumentProcessor(CustomComponent):
|
||||
display_name = "Document Processor"
|
||||
description = "This component processes a document"
|
||||
|
||||
def build_config(self) -> dict:
|
||||
options = ["Uppercase", "Lowercase", "Titlecase"]
|
||||
return {
|
||||
"function": {"options": options,
|
||||
"value": options[0],
|
||||
"display_name": "Function"
|
||||
},
|
||||
"document": {"display_name": "Document"}
|
||||
}
|
||||
|
||||
def build(self, document: Document, function: str) -> Document:
|
||||
if isinstance(document, list):
|
||||
document = document[0]
|
||||
page_content = document.page_content
|
||||
if function == "Uppercase":
|
||||
page_content = page_content.upper()
|
||||
elif function == "Lowercase":
|
||||
page_content = page_content.lower()
|
||||
elif function == "Titlecase":
|
||||
page_content = page_content.title()
|
||||
self.repr_value = f"Result of {function} function: {page_content}"
|
||||
return Document(page_content=page_content)
|
||||
```
|
||||
|
||||
</CH.Scrollycoding>
|
||||
|
||||
All done! This is what our script and brand-new custom component look like:
|
||||
|
||||
<div style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}>
|
||||
|
||||
<ZoomableImage
|
||||
alt="Document Processor Code"
|
||||
sources={{
|
||||
light: "img/document_processor_code.png",
|
||||
dark: "img/document_processor_code.png",
|
||||
}}
|
||||
style={{
|
||||
maxWidth: "100%",
|
||||
margin: "0 auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
|
||||
/>
|
||||
|
||||
<ZoomableImage
|
||||
alt="Document Processor Component"
|
||||
sources={{
|
||||
light: "img/document_processor.png",
|
||||
dark: "img/document_processor.png",
|
||||
}}
|
||||
style={{
|
||||
width: "40%",
|
||||
margin: "0 auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
## Loading Custom Components
|
||||
|
||||
For advanced customization, Langflow offers the option to create and load custom components outside of the standard interface. This process involves creating the desired components using a text editor and loading them using the Langflow CLI.
|
||||
|
||||
### Folder Structure
|
||||
|
||||
Create a folder that follows the same structural conventions as the [config.yaml](https://github.com/langflow-ai/langflow/blob/dev/src/backend/base/langflow/config.yaml) file. Inside this main directory, use a `custom_components` subdirectory for your custom components.
|
||||
|
||||
Inside `custom_components`, you can create a Python file for each component. Similarly, any custom agents should be housed in an `agents` subdirectory.
|
||||
|
||||
If you use a subdirectory name that is not in our config.yaml file, your component will appear in an `Other` category in the sidebar.
|
||||
|
||||
Your structure should look something like this:
|
||||
|
||||
```
|
||||
.
|
||||
└── custom_components
|
||||
├── document_processor.py
|
||||
└── ...
|
||||
└── agents
|
||||
└── ...
|
||||
└── my_agents <-- Other category
|
||||
└── ...
|
||||
```
|
||||
|
||||
### Loading Custom Components
|
||||
|
||||
The recommended way to load custom components is to set the _`LANGFLOW_COMPONENTS_PATH`_ environment variable to the path of your custom components directory. Then, run the Langflow CLI as usual.
|
||||
|
||||
```bash
|
||||
export LANGFLOW_COMPONENTS_PATH='["/path/to/components"]'
|
||||
langflow
|
||||
```
|
||||
|
||||
Alternatively, you can specify the path to your custom components using the _`--components-path`_ argument when running the Langflow CLI, as shown below:
|
||||
|
||||
```bash
|
||||
langflow --components-path /path/to/components
|
||||
```
|
||||
|
||||
Langflow will attempt to load all of the components found in the specified directory. If a component fails to load due to errors in the component's code, Langflow will print an error message to the console but will continue loading the rest of the components.
|
||||
|
||||
### Interacting with Custom Components
|
||||
|
||||
Once your custom components have been loaded successfully, they will appear in Langflow's sidebar. From there, you can add them to your Langflow canvas for use. However, please note that components with errors will not be available for addition to the canvas. Always ensure your code is error-free before attempting to load components.
|
||||
|
||||
Remember, creating custom components allows you to extend the functionality of Langflow to better suit your unique needs. Happy coding!import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import Admonition from "@theme/Admonition";
|
||||
68
docs/docs/administration/features.mdx
Normal file
68
docs/docs/administration/features.mdx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
# Features
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
When you click for New Project, you will see on the top left corner of the
|
||||
screen, some options such as <strong>Import</strong>, <strong>Export</strong>,{" "}
|
||||
<strong>Code</strong> and <strong>Save</strong>, as displayed in the image
|
||||
below:
|
||||
</div>
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/features.png"),
|
||||
dark: useBaseUrl("img/features.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
<div style={{ marginBottom: "20px" }}>
|
||||
Further down, we will explain each of these options.
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
### Import and Export
|
||||
|
||||
Flows can be exported and imported as JSON files.
|
||||
|
||||
<Admonition type="caution">
|
||||
Watch out for API keys being stored in local files.
|
||||
|
||||
</Admonition>
|
||||
|
||||
---
|
||||
|
||||
### Code
|
||||
|
||||
The Code button shows snippets to use your flow as a Python object or an API.
|
||||
|
||||
**Python Code**
|
||||
|
||||
Through the Langflow package, you can run your flow from a JSON file. The example below shows how to run a flow from a JSON file.
|
||||
|
||||
```python
|
||||
from langflow.load import run_flow_from_json
|
||||
|
||||
results = run_flow_from_json("path/to/flow.json", input_value="Hello, World!")
|
||||
```
|
||||
|
||||
**API**
|
||||
|
||||
Once you save a flow, the API endpoint is created with your latest changes. Click the "code" button to use that flow as an API. You can post-adjust component parameters using the global variable TWEAKS.
|
||||
|
||||
The example below shows a Python script making a POST request to a local API endpoint, which gets a prediction based on the message input.
|
||||
|
||||
<div
|
||||
style={{ marginBottom: "20px", display: "flex", justifyContent: "center" }}
|
||||
>
|
||||
<ReactPlayer playing controls url="/videos/langflow_api.mp4" />
|
||||
</div>
|
||||
|
||||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
import Admonition from "@theme/Admonition";
|
||||
49
docs/docs/administration/langfuse_integration.mdx
Normal file
49
docs/docs/administration/langfuse_integration.mdx
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
# Integrating Langfuse with Langflow
|
||||
|
||||
## Introduction
|
||||
|
||||
Langfuse is an open-source tracing and analytics tool designed for LLM applications. Integrating Langfuse with Langflow provides detailed production traces and granular insights into quality, cost, and latency. This integration allows you to monitor and debug your Langflow's chat or APIs easily.
|
||||
|
||||
## Step-by-Step Instructions
|
||||
|
||||
### Step 1: Create a Langfuse account
|
||||
|
||||
1. Go to [Langfuse](https://langfuse.com) and click on the "Sign In" button in the top right corner.
|
||||
2. Click on the "Sign Up" button and create an account.
|
||||
3. Once logged in, click on "Settings" and then on "Create new API keys."
|
||||
4. Copy the Public key and the Secret Key and save them somewhere safe.
|
||||
{/* Add these keys to your environment variables in the following step. */}
|
||||
|
||||
### Step 2: Set up Langfuse in Langflow
|
||||
|
||||
1. **Export the Environment Variables**: You'll need to export the environment variables `LANGFLOW_LANGFUSE_SECRET_KEY` and `LANGFLOW_LANGFUSE_PUBLIC_KEY` with the values obtained in Step 1.
|
||||
|
||||
You can do this by executing the following commands in your terminal:
|
||||
|
||||
```bash
|
||||
export LANGFLOW_LANGFUSE_SECRET_KEY=<your secret key>
|
||||
export LANGFLOW_LANGFUSE_PUBLIC_KEY=<your public key>
|
||||
```
|
||||
|
||||
Alternatively, you can run the Langflow CLI command:
|
||||
|
||||
```bash
|
||||
LANGFLOW_LANGFUSE_SECRET_KEY=<your secret key> LANGFLOW_LANGFUSE_PUBLIC_KEY=<your public key> langflow
|
||||
```
|
||||
|
||||
If you are self-hosting Langfuse, you can also set the environment variable `LANGFLOW_LANGFUSE_HOST` to point to your Langfuse instance. By default, Langfuse points to the cloud instance at `https://cloud.langfuse.com`.
|
||||
|
||||
2. **Verify Integration**: Ensure that the environment variables are set correctly by checking their existence in your environment, for example by running:
|
||||
|
||||
```bash
|
||||
echo $LANGFLOW_LANGFUSE_SECRET_KEY
|
||||
echo $LANGFLOW_LANGFUSE_PUBLIC_KEY
|
||||
```
|
||||
|
||||
3. **Monitor Langflow**: Now, whenever you use Langflow's chat or API, you will be able to see the tracing of your conversations in Langfuse.
|
||||
|
||||
That's it! You have successfully integrated Langfuse with Langflow, enhancing observability and debugging capabilities for your LLM application.
|
||||
|
||||
---
|
||||
|
||||
Note: For more details or customized configurations, please refer to the official [Langfuse documentation](https://langfuse.com/docs/integrations/langchain).
|
||||
133
docs/docs/administration/login.mdx
Normal file
133
docs/docs/administration/login.mdx
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
import Admonition from "@theme/Admonition";
|
||||
|
||||
# Sign up and Sign in
|
||||
|
||||
## Introduction
|
||||
|
||||
The login functionality in Langflow serves to authenticate users and protect sensitive routes in the application. Starting from version 0.5, Langflow introduces an enhanced login mechanism that is governed by a few environment variables. This allows new secure features.
|
||||
|
||||
## Environment Variables
|
||||
|
||||
The following environment variables are crucial in configuring the login settings:
|
||||
|
||||
- _`LANGFLOW_AUTO_LOGIN`_: Determines whether Langflow should automatically log users in. Default is `True`.
|
||||
- _`LANGFLOW_SUPERUSER`_: The username of the superuser.
|
||||
- _`LANGFLOW_SUPERUSER_PASSWORD`_: The password for the superuser.
|
||||
- _`LANGFLOW_SECRET_KEY`_: A key used for encrypting the superuser's password.
|
||||
- _`LANGFLOW_NEW_USER_IS_ACTIVE`_: Determines whether new users are automatically activated. Default is `False`.
|
||||
|
||||
All of these variables can be passed to the CLI command _`langflow run`_ through the _`--env-file`_ option. For example:
|
||||
|
||||
```bash
|
||||
langflow run --env-file .env
|
||||
```
|
||||
|
||||
<Admonition type="info">
|
||||
It is critical not to expose these environment variables in your code
|
||||
repository. Always set them securely in your deployment environment, for
|
||||
example, using Docker secrets, Kubernetes ConfigMaps/Secrets, or dedicated
|
||||
secure environment configuration systems like AWS Secrets Manager.
|
||||
</Admonition>
|
||||
|
||||
### _`LANGFLOW_AUTO_LOGIN`_
|
||||
|
||||
By default, this variable is set to `True`. When enabled (`True`), Langflow operates as it did in versions prior to 0.5—automatic login without requiring explicit user authentication.
|
||||
|
||||
To disable automatic login and enforce user authentication:
|
||||
|
||||
```bash
|
||||
export LANGFLOW_AUTO_LOGIN=False
|
||||
```
|
||||
|
||||
### _`LANGFLOW_SUPERUSER`_ and _`LANGFLOW_SUPERUSER_PASSWORD`_
|
||||
|
||||
These environment variables are only relevant when `LANGFLOW_AUTO_LOGIN` is set to `False`. They specify the username and password for the superuser, which is essential for administrative tasks.
|
||||
|
||||
To create a superuser manually:
|
||||
|
||||
```bash
|
||||
export LANGFLOW_SUPERUSER=admin
|
||||
export LANGFLOW_SUPERUSER_PASSWORD=securepassword
|
||||
```
|
||||
|
||||
You can also use the CLI command `langflow superuser` to set up a superuser interactively.
|
||||
|
||||
### _`LANGFLOW_SECRET_KEY`_
|
||||
|
||||
This environment variable holds a secret key used for encrypting the superuser's password. Make sure to set this to a secure, randomly generated string.
|
||||
|
||||
```bash
|
||||
export LANGFLOW_SECRET_KEY=randomly_generated_secure_key
|
||||
```
|
||||
|
||||
### _`LANGFLOW_NEW_USER_IS_ACTIVE`_
|
||||
|
||||
By default, this variable is set to `False`. When enabled (`True`), new users are automatically activated and can log in without requiring explicit activation by the superuser.
|
||||
|
||||
## Command-Line Interface
|
||||
|
||||
Langflow provides a command-line utility for managing superusers:
|
||||
|
||||
```bash
|
||||
langflow superuser
|
||||
```
|
||||
|
||||
This command prompts you to enter the username and password for the superuser, unless they are already set using environment variables.
|
||||
|
||||
## Sign-up
|
||||
|
||||
With _`LANGFLOW_AUTO_LOGIN`_ set to _`False`_, Langflow requires users to sign up before they can log in. The sign-up page is the default landing page when a user visits Langflow for the first time.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/sign-up.png"),
|
||||
dark: useBaseUrl("img/sign-up.png"),
|
||||
}}
|
||||
style={{ width: "50%", maxWidth: "600px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
## Profile settings
|
||||
|
||||
Users can change their profile settings by clicking on the profile icon in the top right corner of the application. This opens a dropdown menu with the following options:
|
||||
|
||||
- **Admin Page**: Opens the admin page, which is only accessible to the superuser.
|
||||
- **Profile Settings**: Opens the profile settings page.
|
||||
- **Sign Out**: Logs the user out.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/my-account.png"),
|
||||
dark: useBaseUrl("img/my-account.png"),
|
||||
}}
|
||||
style={{ width: "50%", maxWidth: "600px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
By clicking on **Profile Settings**, the user is taken to the profile settings page, where they can change their password and their profile picture.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/profile-settings.png"),
|
||||
dark: useBaseUrl("img/profile-settings.png"),
|
||||
}}
|
||||
style={{ maxWidth: "600px", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
By clicking on **Admin Page**, the superuser is taken to the admin page, where they
|
||||
can manage users and groups.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/admin-page.png"),
|
||||
dark: useBaseUrl("img/admin-page.png"),
|
||||
}}
|
||||
style={{ maxWidth: "600px", margin: "0 auto" }}
|
||||
|
||||
/>
|
||||
73
docs/docs/administration/prompt-customization.mdx
Normal file
73
docs/docs/administration/prompt-customization.mdx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
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.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/prompt_customization.png"),
|
||||
dark: useBaseUrl("img/prompt_customization.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
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.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/prompt_customization2.png"),
|
||||
dark: useBaseUrl("img/prompt_customization2.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
Once inserted, these variables are immediately recognized as new fields in the prompt component. Here, you can define their values within the component itself or leave a field empty to be adjusted over the chat interface.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/prompt_customization3.png"),
|
||||
dark: useBaseUrl("img/prompt_customization3.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
You can also use documents or output parsers as prompt variables. By plugging them into prompt handles, they’ll disable and feed that input field.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/prompt_customization4.png"),
|
||||
dark: useBaseUrl("img/prompt_customization4.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
||||
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.
|
||||
|
||||
{" "}
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: useBaseUrl("img/prompt_customization5.png"),
|
||||
dark: useBaseUrl("img/prompt_customization5.png"),
|
||||
}}
|
||||
style={{ width: "100%", maxWidth: "800px", margin: "0 auto" }}
|
||||
/>
|
||||
|
|
@ -12,7 +12,7 @@ To use a custom component, follow these steps:
|
|||
|
||||
<Admonition type="info" label="Tip">
|
||||
|
||||
For an in-depth explanation of custom components, their rules, and applications, make sure to read [Custom Component guidelines](../guidelines/custom-component).
|
||||
For an in-depth explanation of custom components, their rules, and applications, make sure to read [Custom Component guidelines](../administration/custom-component).
|
||||
|
||||
</Admonition>
|
||||
|
||||
|
|
@ -57,7 +57,7 @@ The CustomComponent class serves as the foundation for creating custom component
|
|||
|
||||
<Admonition type="info">
|
||||
Unlike Langchain types, base Python types do not add a
|
||||
[handle](../guidelines/components) to the field by default. To add handles,
|
||||
[handle](../administration/components) to the field by default. To add handles,
|
||||
use the _`input_types`_ key in the _`build_config`_ method.
|
||||
</Admonition>
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ The `PromptTemplate` component allows users to create prompts and define variabl
|
|||
<Admonition type="info">
|
||||
Once a variable is defined in the prompt template, it becomes a component
|
||||
input of its own. Check out [Prompt
|
||||
Customization](../guidelines/prompt-customization) to learn more.
|
||||
Customization](../administration/prompt-customization) to learn more.
|
||||
</Admonition>
|
||||
|
||||
- **template:** Template used to format an individual request.
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ Now, let's add the [parameters](focus://11[20:55]) and the [return type](focus:/
|
|||
|
||||
- _`flow_name`_ is the name of the flow we want to run.
|
||||
- _`document`_ is the input document to be passed to that flow.
|
||||
- Since _`Document`_ is a Langchain type, it will add an input [handle](../guidelines/components) to the component ([see more](../components/custom)).
|
||||
- Since _`Document`_ is a Langchain type, it will add an input [handle](../administration/components) to the component ([see more](../components/custom)).
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -242,7 +242,7 @@ class FlowRunner(CustomComponent):
|
|||
|
||||
```
|
||||
|
||||
You can load this flow using _`get_flow`_ and set a _`tweaks`_ dictionary to customize it. Find more about tweaks in our [features guidelines](../guidelines/features#code).
|
||||
You can load this flow using _`get_flow`_ and set a _`tweaks`_ dictionary to customize it. Find more about tweaks in our [features guidelines](../administration/features#code).
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -112,8 +112,8 @@ Well done! You've built your first prompt in Langflow. 🎉
|
|||
|
||||
By adding Langflow components to this prompt, you can build all sorts of interesting flows.
|
||||
|
||||
* [Memory chatbot](/guides/memory-chatbot.mdx)
|
||||
* [Blog writer](/guides/blog-writer.mdx)
|
||||
* [Document QA](/guides/document-qa.mdx)
|
||||
* [Memory chatbot](/starter-projects/memory-chatbot.mdx)
|
||||
* [Blog writer](/starter-projects/blog-writer.mdx)
|
||||
* [Document QA](/starter-projects/document-qa.mdx)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -35,4 +35,4 @@ Use Langflow's simple but powerful UI to build any AI application you can dream
|
|||
Learn more about the exciting changes in Langflow 1.0, and how to migrate your existing Langflow projects.
|
||||
|
||||
* [A new chapter for Langflow](/whats-new/a-new-chapter-langflow)
|
||||
* [Migration guides](/whats-new/migrating-to-one-point-zero)
|
||||
* [Migration guides](/migration/migrating-to-one-point-zero)
|
||||
136
docs/docs/migration/migrating-to-one-point-zero.mdx
Normal file
136
docs/docs/migration/migrating-to-one-point-zero.mdx
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
import Admonition from "@theme/Admonition";
|
||||
|
||||
# Migrating to Langflow 1.0: A Guide
|
||||
|
||||
<Admonition type="caution" icon="🚧" title="ZONE UNDER CONSTRUCTION">
|
||||
<p>
|
||||
We are currently working on updating this guide to provide the most accurate
|
||||
and up-to-date information on migrating to Langflow 1.0. We will be adding
|
||||
more content and examples to help you navigate the changes and improvements
|
||||
in the new version.
|
||||
</p>
|
||||
</Admonition>
|
||||
|
||||
Langflow 1.0 is a significant update that brings many exciting changes and improvements to the platform.
|
||||
This guide will walk you through the key improvements and help you migrate your existing projects to the new version.
|
||||
|
||||
If you have any questions or need assistance during the migration process, please don't hesitate to reach out to in our [Discord](https://discord.gg/wZSWQaukgJ) or [GitHub](https://github.com/langflow-ai/langflow/issues) community.
|
||||
|
||||
We have a special channel in our Discord server dedicated to Langflow 1.0 migration, where you can ask questions, share your experiences, and get help from the community.
|
||||
|
||||
## TLDR;
|
||||
|
||||
- Inputs and Outputs of Components have changed
|
||||
- We've surfaced steps that were previously run in the background
|
||||
- Continued support for LangChain and new support for multiple frameworks
|
||||
- Redesigned sidebar and customizable interaction panel
|
||||
- New Native Categories and Components
|
||||
- Improved user experience with Text and Record modes
|
||||
- CustomComponent for all components
|
||||
- Compatibility with previous versions using Runnable Executor
|
||||
- Multiple flows in the canvas
|
||||
- Improved component status
|
||||
- Ability to connect Output components to any other Component
|
||||
- Rename and edit component descriptions
|
||||
- Pass tweaks and inputs in the API using Display Name
|
||||
- Global Variables for Text Fields
|
||||
- Experimental components like SubFlow and Flow as Tool
|
||||
- Experimental State Management system with Notify and Listen components
|
||||
|
||||
## Inputs and Outputs of Components
|
||||
|
||||
Langflow 1.0 introduces adds the concept of Inputs and Outputs to flows, allowing a clear definition of the data flow between components. Discover how to use Inputs and Outputs to pass data between components and create more dynamic flows.
|
||||
|
||||
[Learn more about Inputs and Outputs of Components](../migration/inputs-and-outputs)
|
||||
|
||||
## To Compose or Not to Compose: the choice is yours
|
||||
|
||||
Even though composition is still possible in Langflow 1.0, the new standard is getting data moving through the flow. This allows for more flexibility and control over the data flow in your projects.
|
||||
|
||||
We will create guides on how to interweave LangChain components with our Core components soon.
|
||||
|
||||
## Continued Support for LangChain and Multiple Frameworks
|
||||
|
||||
Langflow 1.0 continues to support LangChain while also introducing support for multiple frameworks. This is another important boon that adding the paradigm of data flow brings to the table. Find out how to leverage the power of different frameworks in your projects.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Sidebar Redesign and Customizable Interaction Panel
|
||||
|
||||
We've expanded on the chat experience by creating a customizable interaction panel that allows you to design a panel that fits your needs and interact with it. The sidebar has also been redesigned to provide a more intuitive and user-friendly experience. Explore the new sidebar and interaction panel features to enhance your workflow.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## New Native Categories and Components
|
||||
|
||||
Langflow 1.0 introduces many new native categories, including Inputs, Outputs, Helpers, Experimental, Models, and more. Discover the new components available, such as Chat Input, Prompt, Files, API Request, and others.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## New Way of Using Langflow: Text and Record (and more to come)
|
||||
|
||||
With the introduction of Text and Record types connections between Components are more intuitive and easier to understand. This is the first step in a series of improvements to the way you interact with Langflow. Learn how to use Text, and Record and how they help you build better flows.
|
||||
|
||||
[Learn more about Text and Record](../migration/text-and-record)
|
||||
|
||||
## CustomComponent for All Components
|
||||
|
||||
Almost all components in Langflow 1.0 are now CustomComponents, allowing you to check and modify the code of each component. Discover how to leverage this feature to customize your components to your specific needs.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Compatibility with Previous Versions
|
||||
|
||||
To use flows built in previous versions of Langflow, you can utilize the experimental component Runnable Executor along with an Input and Output. **We'd love your feedback on this**. Learn how to adapt your existing flows to work seamlessly in the new version of Langflow.
|
||||
|
||||
[Learn more about Compatibility with Previous Versions](../migration/compatibility)
|
||||
|
||||
## Multiple Flows in the Canvas
|
||||
|
||||
Langflow 1.0 allows you to have more than one flow in the canvas and run them separately. Discover how to create and manage multiple flows within a single project.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Improved Component Status
|
||||
|
||||
Each component now displays its status more clearly, allowing you to quickly identify any issues or errors. Explore how to use the new component status feature to troubleshoot and optimize your flows.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Connecting Output Components
|
||||
|
||||
You can now connect Output components to any other component (that has a Text output), providing a better understanding of the data flow. Explore the possibilities of connecting Output components and how it enhances your flow's functionality.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Renaming and Editing Component Descriptions
|
||||
|
||||
Langflow 1.0 allows you to rename and edit the description of each component, making it easier to understand and interact with the flow. Learn how to customize your component names and descriptions for improved clarity.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Passing Tweaks and Inputs in the API
|
||||
|
||||
Things got a whole lot easier. You can now pass tweaks and inputs in the API by referencing the Display Name of the component. Discover how to leverage this feature to dynamically control your flow's behavior.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Global Variables for Text Fields
|
||||
|
||||
Global Variables can be used in any Text Field across your projects. Learn how to define and utilize Global Variables to streamline your workflow.
|
||||
|
||||
[Learn more about Global Variables](../migration/global-variables)
|
||||
|
||||
## Experimental Components
|
||||
|
||||
Explore the experimental components available in Langflow 1.0, such as SubFlow, which allows you to load a flow as a component dynamically, and Flow as Tool, which enables you to use a flow as a tool for an Agent.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
## Experimental State Management System
|
||||
|
||||
We are experimenting with a State Management system for flows that allows components to trigger other components and pass messages between them using the Notify and Listen components. Discover how to leverage this system to create more dynamic and interactive flows.
|
||||
|
||||
**Guide coming soon**
|
||||
|
||||
We hope this guide helps you navigate the changes and improvements in Langflow 1.0. If you have any questions or need further assistance, please don't hesitate to reach out to us in our [Discord](https://discord.gg/wZSWQaukgJ).
|
||||
|
|
@ -25,3 +25,16 @@ For this error to occur, two scenarios are possible:
|
|||
In this case, you might not be running the correct executable.
|
||||
To solve this issue, you can run the correct executable by running _`python -m langflow run`_ instead of _`langflow run`_ and if that doesn't work, you can try uninstalling langflow and reinstalling it using _`python -m pip install langflow --pre -U`_.
|
||||
2. Some version conflicts might have occurred during the installation process. Run _`python -m pip install langflow --pre -U --force-reinstall`_ to reinstall langflow and its dependencies.
|
||||
|
||||
## _`Something went wrong running migrations. Please, run 'langflow migration --fix'`_
|
||||
|
||||
TLDR;
|
||||
|
||||
- Clear the cache by deleting the contents of the cache folder.
|
||||
This folder can be found at:
|
||||
- **Linux or WSL2 on Windows**: `home/<username>/.cache/langflow/`
|
||||
- **MacOS**: `/Users/<username>/Library/Caches/langflow/`
|
||||
|
||||
If you wish to retain your files, ensure to back them up before clearing the folder.
|
||||
|
||||
This error often occurs when upgrading Langflow, the new version can't override `langflow-pre.db` in `.cache/langflow/`. Clearing the cache removes this file but will also erase your settings.
|
||||
83
docs/docs/starter-projects/basic-prompting.mdx
Normal file
83
docs/docs/starter-projects/basic-prompting.mdx
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
import ThemedImage from "@theme/ThemedImage";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import ZoomableImage from "/src/theme/ZoomableImage.js";
|
||||
import ReactPlayer from "react-player";
|
||||
|
||||
# Basic prompting
|
||||
|
||||
Prompts serve as the inputs to a large language model (LLM), acting as the interface between human instructions and computational tasks.
|
||||
|
||||
By submitting natural language requests in a prompt to an LLM, you can obtain answers, generate text, and solve problems.
|
||||
|
||||
This article demonstrates how to use Langflow's prompt tools to issue basic prompts to an LLM, and how various prompting strategies can affect your outcomes.
|
||||
|
||||
## Prerequisites
|
||||
|
||||
1. Install Langflow.
|
||||
```bash
|
||||
python -m pip install langflow --pre
|
||||
```
|
||||
|
||||
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 basic prompting project
|
||||
|
||||
1. From the Langflow dashboard, click **New Project**.
|
||||
2. Select **Basic Prompting**.
|
||||
3. The **Basic Prompting** flow is created.
|
||||
|
||||
<ZoomableImage
|
||||
alt="Docusaurus themed image"
|
||||
sources={{
|
||||
light: "img/basic-prompting.png",
|
||||
dark: "img/basic-prompting.png",
|
||||
}}
|
||||
style={{ width: "80%", margin: "20px auto" }}
|
||||
/>
|
||||
|
||||
This flow allows you to chat with the **OpenAI** component via a **Prompt** component.
|
||||
Examine the **Prompt** component. The **Template** field instructs the LLM to `Answer the user as if you were a pirate.`
|
||||
This should be interesting...
|
||||
|
||||
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 basic prompting 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 responds in a markedly piratical manner!
|
||||
|
||||
## Modify the prompt for a different result
|
||||
|
||||
1. To modify your prompt results, in the **Prompt** template, click the **Template** field.
|
||||
The **Edit Prompt** window opens.
|
||||
2. Change `Answer the user as if you were a pirate` to a different character, perhaps `Answer the user as if you were Harold Abelson.`
|
||||
3. Run the basic prompting flow again.
|
||||
The response will be markedly different.
|
||||
|
||||
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue