docs: update docs from notion (#2684)
Co-authored-by: lucaseduoli <lucaseduoli@users.noreply.github.com>
This commit is contained in:
github-actions[bot]
GitHub
parent
6756ef22b7
commit
b731983f31
51 changed files with 533 additions and 232 deletions
|
|
@ -36,10 +36,13 @@ The **Python Code** tab displays code to interact with your flow's `.json` f
|
|||
The **Tweaks** tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the **Chat Input** component's `input_value` will change that value across all API calls.
|
||||
|
||||
|
||||
<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/d4b5f648-d99f-47cc-9ac6-986e1c32a71d/langflow_api.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T215853Z&X-Amz-Expires=3600&X-Amz-Signature=04dac9770b972cad199be655db11a8e81d293b5eba4a32b10fa680487f850650&X-Amz-SignedHeaders=host&x-id=GetObject" />
|
||||
<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/d4b5f648-d99f-47cc-9ac6-986e1c32a71d/langflow_api.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T232153Z&X-Amz-Expires=3600&X-Amz-Signature=bd499e71c606d6c2e3adf576abbfb5ce39105a0166bd9f7fdaa1e1a63529c64b&X-Amz-SignedHeaders=host&x-id=GetObject" />
|
||||
|
||||
|
||||
### Chat Widget HTML {#48f121a6cb3243979a341753da0c2700}
|
||||
## Chat Widget {#48f121a6cb3243979a341753da0c2700}
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
The **Chat Widget HTML** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
|
||||
|
|
@ -63,67 +66,83 @@ Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read belo
|
|||
The Chat Widget can be embedded into any HTML page, inside a `<body>` tag, as demonstrated in the video below.
|
||||
|
||||
|
||||
<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/01200476-f343-41e1-8be7-059250e0ce5e/langflow_widget.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T215853Z&X-Amz-Expires=3600&X-Amz-Signature=20a6051ace6798a47ce595026a856286f81facd75ad04adae75edf0368d30c0e&X-Amz-SignedHeaders=host&x-id=GetObject" />
|
||||
<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/01200476-f343-41e1-8be7-059250e0ce5e/langflow_widget.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T232153Z&X-Amz-Expires=3600&X-Amz-Signature=e0430a3c60852de518287b6dbb8e3437663b880dee6d5d0016e21a257c21a6c8&X-Amz-SignedHeaders=host&x-id=GetObject" />
|
||||
|
||||
|
||||
### Embed your flow with React {#fe5d3b1c42e74e4c84ebc9d1799b7665}
|
||||
|
||||
1. To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
|
||||
|
||||
To embed the Chat Widget using React, insert this `<script>` tag into the React _index.html_ file, inside the `<body>`tag:
|
||||
|
||||
|
||||
```javascript
|
||||
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
||||
```
|
||||
|
||||
1. Declare your Web Component and encapsulate it in a React component.
|
||||
|
||||
|
||||
Declare your Web Component and encapsulate it in a React component.
|
||||
|
||||
|
||||
```javascript
|
||||
declare global { namespace JSX { interface IntrinsicElements { "langflow-chat": any; } }}export default function ChatWidget({ className }) { return ( <div className={className}> <langflow-chat chat_inputs='{"your_key":"value"}' chat_input_field="your_chat_key" flow_id="your_flow_id" host_url="langflow_url" ></langflow-chat> </div> );}
|
||||
```
|
||||
|
||||
1. Finally, you can place the component anywhere in your code to display the Chat Widget.
|
||||
|
||||
---
|
||||
|
||||
Finally, you can place the component anywhere in your code to display the Chat Widget.
|
||||
|
||||
|
||||
### Embed your flow with Angular {#4fd87355b9aa409894acfbb9e1497980}
|
||||
|
||||
1. To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
|
||||
|
||||
To use the chat widget in Angular, first add this `<script>` tag into the Angular _index.html_ file, inside the `<body>` tag.
|
||||
|
||||
|
||||
```javascript
|
||||
<script src="https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
|
||||
```
|
||||
|
||||
1. 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`.
|
||||
2. Open the module file (it typically ends with _.module.ts_) where you'd add the `langflow-chat` web component.
|
||||
3. Import `CUSTOM_ELEMENTS_SCHEMA` at the top of the file:
|
||||
|
||||
|
||||
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:
|
||||
|
||||
`import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";`
|
||||
|
||||
1. Add `CUSTOM_ELEMENTS_SCHEMA` to the 'schemas' array inside the '@NgModule' decorator:
|
||||
- Add `CUSTOM_ELEMENTS_SCHEMA` to the 'schemas' array inside the '@NgModule' decorator:
|
||||
|
||||
```javascript
|
||||
@NgModule({ declarations: [ // ... Other components and directives ... ], imports: [ // ... Other imported modules ... ], schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here})export class YourModule {}
|
||||
```
|
||||
|
||||
1. 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:
|
||||
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
|
||||
INFO
|
||||
:::tip
|
||||
|
||||
`CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows Angular to recognize custom elements. Adding `CUSTOM_ELEMENTS_SCHEMA` tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like `langflow-chat`. Notice that you can only use the Chat Widget in components that are part of the module where you added `CUSTOM_ELEMENTS_SCHEMA`.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
## Chat Widget Configuration {#5ede4bbbd2ac43e29c90f3edb43cba58}
|
||||
|
||||
- `CUSTOM_ELEMENTS_SCHEMA` is a built-in schema that allows Angular to recognize custom elements.
|
||||
- Adding `CUSTOM_ELEMENTS_SCHEMA` tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like `langflow-chat`.
|
||||
- Notice that you can only use the Chat Widget in components that are part of the module where you added `CUSTOM_ELEMENTS_SCHEMA`.
|
||||
|
||||
---
|
||||
|
||||
|
||||
## Chat widget configuration {#5ede4bbbd2ac43e29c90f3edb43cba58}
|
||||
|
||||
|
||||
Use the widget API to customize your Chat Widget:
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -9,24 +9,25 @@ import ReactPlayer from "react-player";
|
|||
The **Playground** is a dynamic interface designed for real-time interaction with AIs, allowing users to chat, access memories and monitor inputs and outputs. Here, users can directly prototype and their models, making adjustments and observing different outcomes.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
As long as you have an [Input or Output](/components-io) component working, you can open it up by clicking the **Playground** button.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
>
|
||||
> 💡 Notice how the **Playground's** window arrangement changes depending on what components are being used. Langflow can be used for applications that go beyond chat-based interfaces.
|
||||
>
|
||||
:::tip
|
||||
|
||||
Notice how the **Playground's** window arrangement changes depending on what components are being used. Langflow can be used for applications that go beyond chat-based interfaces.
|
||||
|
||||
:::
|
||||
|
||||
|
||||
|
||||
|
||||
You can also open a flow's **Playground** without entering its workspace. From **My Collections** or **Langflow Store**, click the **Playground** in one of the projects card.
|
||||
|
||||
|
||||
<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/80ac6543-5548-4751-94fd-ddca60c23e62/langflow_playground.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T215851Z&X-Amz-Expires=3600&X-Amz-Signature=47ab219c1220fd83e433fd9199f597045bf9b6829313a7686dea70bd7b35afb5&X-Amz-SignedHeaders=host&x-id=GetObject" />
|
||||
<ReactPlayer controls url="https://prod-files-secure.s3.us-west-2.amazonaws.com/09f11537-5a5b-4f56-9e8d-de8ebcfae549/80ac6543-5548-4751-94fd-ddca60c23e62/langflow_playground.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240712%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240712T232151Z&X-Amz-Expires=3600&X-Amz-Signature=368f36f4aeb440a76c48960cc542c28dfc4f536686a32d8338b1dc66414b1588&X-Amz-SignedHeaders=host&x-id=GetObject" />
|
||||
|
||||
|
||||
## Memory Management {#821a5ee2a8a44d35b49943cba630511c}
|
||||
|
|
@ -38,8 +39,5 @@ You can also open a flow's **Playground** without entering its workspace. From *
|
|||
Whenever you send a message from the **Playground** interface, under the **Memories** **Tab** you'll see a table of previous interactions for that session.
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
Langflow allows every chat message to be stored, and a single flow can have multiple memory sessions. To learn more about how to use memories in Langflow, see [Chat Memory](/guides-chat-memory).
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ slug: /workspace
|
|||
---
|
||||
|
||||
|
||||
The **Langflow Workspace** is where you assemble new flows and create AIs by connecting and running components.
|
||||
The **Langflow Workspace** is where you assemble new flows and create AIs by connecting and running components.
|
||||
|
||||
|
||||
|
||||
|
|
@ -21,9 +21,6 @@ The **Langflow Workspace** is where you assemble new flows and create AIs by c
|
|||
### Sidebar {#9d571b1d46804a01bcd8fbb9a4677af4}
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
Located on the left, this the sidebar includes several collapsible sections that categorize the different types of pre-built components available in Langflow. Use the search bar to locate components by name.
|
||||
|
||||
|
||||
|
|
@ -33,9 +30,6 @@ Located on the left, this the sidebar includes several collapsible sections that
|
|||
### Canvas {#5b050d0f8406436a9201f4711f0063ae}
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
The canvas is the main area in the center where you can drag and drop components to create workflows.
|
||||
|
||||
|
||||
|
|
@ -48,9 +42,6 @@ Use canvas controls in the bottom left side for zooming in and out, resetting th
|
|||
### Top Navigation Bar {#603c9941be154e1eba4e7c9ec9554b92}
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
In the top navigation bar, the dropdown menu labeled with the project name offers several management and customization options for the current flow in the Langflow Workspace.
|
||||
|
||||
|
||||
|
|
@ -68,9 +59,6 @@ In the top navigation bar, the dropdown menu labeled with the project name offer
|
|||
### Toolbar {#8038bcc315c34350a1f587e1ad0de59f}
|
||||
|
||||
|
||||
---
|
||||
|
||||
|
||||
The toolbar at the bottom-right corner that provides options for executing, accessing the API, and sharing workflows.
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue