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

docs: chat widget refresh (#8162)

Browse source 
* pause-at-angular

* text-io-works-but-no-context

* chat-widget-tsx

* split-out-page

* angular-section

* mikes-edits-for-indentation

* cleanup

* indentation

* Apply suggestions from code review

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

* remove-widget-causing-scroll-problems

---------

Co-authored-by: KimberlyFields <46325568+KimberlyFields@users.noreply.github.com>
This commit is contained in:
Mendon Kissling 2025-05-28 11:44:37 -04:00 • committed by GitHub
commit 09a65f6f41
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 308 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

139
docs/docs/Concepts/concepts-publish.md
View file

@ -4,6 +4,7 @@ slug: /concepts-publish
--- ---
import Tabs from '@theme/Tabs'; import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem'; import TabItem from '@theme/TabItem';
import ChatWidget from '@site/src/components/ChatWidget';
Langflow provides several ways to publish and integrate your flows into external applications. Whether you want to expose your flow as an API endpoint, 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. Langflow provides several ways to publish and integrate your flows into external applications. Whether you want to expose your flow as an API endpoint, 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.
@ -65,139 +66,6 @@ For example, changing the **Chat Input** component's `input_value` changes that
For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files-v1). For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files-v1).
### 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).
## 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>
<langflow-chat
window_title="Basic Prompting"
flow_id="801abb1e-19b9-4278-9632-179b6d84f126"
host_url="http://localhost:7860"
></langflow-chat>
```
### Embed the chat widget with React
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>
```
1. 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>
);
}
```
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, 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`.
`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`.
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';`
3. 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 { }
```
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>
```
### Chat widget configuration
Use the widget API to customize your Chat Widget.
Props with the type JSON need to be passed as stringified JSONs, with the format \{"key":"value"\}.
| Prop | Type | Required | Description |
| --------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| bot_message_style | JSON | No | Applies custom formatting to bot messages. |
| 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. |
## Shareable playground ## Shareable playground
The **Shareable playground** exposes your Langflow application's **Playground** at the `/public_flow/{flow-id}` endpoint. The **Shareable playground** exposes your Langflow application's **Playground** at the `/public_flow/{flow-id}` endpoint.
@ -206,3 +74,8 @@ You can share this endpoint publicly using a sharing platform like [Ngrok](https
If you're using **Datastax Langflow**, you can share the URL with any users within your **Organization**. If you're using **Datastax Langflow**, you can share the URL with any users within your **Organization**.
## 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.
For more information, see [Embedded chat widget](/embedded-chat-widget).

266
docs/docs/Concepts/embedded-chat-widget.md Normal file
View file

@ -0,0 +1,266 @@
---
title: Embedded chat widget
slug: /embedded-chat-widget
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import ChatWidget from '@site/src/components/ChatWidget';
On the [Publish pane](/concepts-publish), the **Embed into site** tab displays code that can be inserted in the `<body>` of your HTML to interact with your flow.
The chat widget is implemented as a web component called `langflow-chat` and is loaded from a CDN. For more information, see the [langflow-embedded-chat repository](https://github.com/langflow-ai/langflow-embedded-chat).
For a sandbox example, see the [Langflow embedded chat CodeSandbox](https://codesandbox.io/p/sandbox/langflow-embedded-chat-example-dv9zpx).
The following example includes the minimum required inputs, called [props](https://react.dev/learn/passing-props-to-a-component) in React, for using the chat widget in your HTML code, which are `host_url` and `flow_id`.
The `host_url` value must be `HTTPS`, and may not include a `/` after the URL.
The `flow_id` value is found in your Langflow URL.
For a Langflow server running the [Basic prompting flow](/starter-projects-basic-prompting) at `https://c822-73-64-93-151.ngrok-free.app/flow/dcbed533-859f-4b99-b1f5-16fce884f28f`, your chat widget code is similar to the following:
```html
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
</head>
<body>
<langflow-chat
host_url="https://c822-73-64-93-151.ngrok-free.app"
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
></langflow-chat>
</body>
</html>
```
When this code is embedded within HTML, it becomes a responsive chatbot, powered by the basic prompting flow.
![Default chat widget](/img/chat-widget-default.png)
To configure your chat widget further, include additional props.
All props and their types are listed in [index.tsx](https://github.com/langflow-ai/langflow-embedded-chat/blob/main/src/index.tsx).
To add some styling to the chat widget, customize its elements with JSON:
```html
<langflow-chat
host_url="https://c822-73-64-93-151.ngrok-free.app"
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
chat_window_style='{
"backgroundColor": "#1a0d0d",
"border": "4px solid #b30000",
"borderRadius": "16px",
"boxShadow": "0 8px 32px #b30000",
"color": "#fff",
"fontFamily": "Georgia, serif",
"padding": "16px"
}'
window_title="Custom Styled Chat"
height="600"
width="400"
></langflow-chat>
```
To add a custom [session ID](/session-id) value and an API key for authentication to your Langflow server:
```html
<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>
</head>
<body>
<langflow-chat
host_url="https://c822-73-64-93-151.ngrok-free.app"
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
api_key="YOUR_API_KEY"
session_id="YOUR_SESSION_ID"
></langflow-chat>
</body>
</html>
```
The chat widget requires your flow to contain **Chat Input** and **Chat Output** components for the widget to communicate with it.
Sending a message to Langflow without a **Chat Input** still triggers the flow, but the LLM warns you the message is empty.
**Text Input** and **Text Output** components can send and receive messages with Langflow, but without the ongoing LLM "chat" context.
## Embed the chat widget with React
To use the chat widget in your React application, create a component that loads the widget script and renders the chat interface:
1. 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
host_url="https://c822-73-64-93-151.ngrok-free.app"
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
></langflow-chat>
</div>
);
}
```
2. Place the component anywhere in your code to display the chat widget.
For example, in this docset, the React widget component is located at `docs > src > components > ChatWidget > index.tsx`.
`index.tsx` includes a script to load the chat widget code from CDN and initialize the `ChatWidget` component with props pointing to a Langflow server.
```javascript
import React, { useEffect } from 'react';
// Component to load the chat widget script
const ChatScriptLoader = () => {
useEffect(() => {
if (!document.querySelector('script[src*="langflow-embedded-chat"]')) {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js';
script.async = true;
document.body.appendChild(script);
}
}, []);
return null;
};
declare global {
namespace JSX {
interface IntrinsicElements {
"langflow-chat": any;
}
}
}
export default function ChatWidget({ className }) {
return (
<div className={className}>
<ChatScriptLoader />
<langflow-chat
host_url="https://c822-73-64-93-151.ngrok-free.app"
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
></langflow-chat>
</div>
);
}
```
3. To import the component to your page, add this to your site.
```
import ChatWidget from '@site/src/components/ChatWidget';
```
4. To add the widget to your page, include `<ChatWidget className="my-chat-widget" />`.
## Embed the chat widget with Angular
To use the chat widget in your [Angular](https://angular.dev/overview) application, create a component that loads the widget script and renders the chat interface.
Angular requires you to explicitly allow custom web components like `langflow-chat` in components, so you must add the `<langflow-chat>` element to your Angular template and configure Angular to recognize it. Add `CUSTOM_ELEMENTS_SCHEMA` to your module's configuration to enable this.
To add `CUSTOM_ELEMENTS_SCHEMA` to your module's configuration, do the following:
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';`
3. Add `CUSTOM_ELEMENTS_SCHEMA` to the `schemas` array inside the `@NgModule` decorator:
```javascript
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
```
4. Add the chat widget to your component's template by including the `langflow-chat` element in your component's `.component.ts` file:
For style properties that accept `JSON` objects like `chat_window_style` and `bot_message_style`, use Angular's property binding syntax `[propertyName]` to pass them as JavaScript objects.
```javascript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div class="container">
<h1>Langflow Chat Test</h1>
<langflow-chat
host_url="https://c822-73-64-93-151.ngrok-free.app"
flow_id="dcbed533-859f-4b99-b1f5-16fce884f28f"
[chat_window_style]='{"backgroundColor": "#ffffff"}'
[bot_message_style]='{"color": "#000000"}'
[user_message_style]='{"color": "#000000"}'
window_title="Chat with us"
placeholder="Type your message..."
height="600"
width="400"
chat_position="bottom-right"
></langflow-chat>
</div>
`,
styles: [`
.container {
padding: 20px;
text-align: center;
}
`]
})
export class AppComponent {
title = 'Langflow Chat Test';
}
```
## Chat widget configuration
Use the widget API to customize your chat widget.
Props with the type `JSON` need to be passed as stringified JSON, with the format \{"key":"value"\}.
All props and their types are listed in [index.tsx](https://github.com/langflow-ai/langflow-embedded-chat/blob/main/src/index.tsx).
| Prop | Type | Description |
|----------------------|---------|------------------------------------------------|
| flow_id | String | Required. Identifier for the flow associated with the component. |
| host_url | String | Required. URL of the host for communication with the chat component. |
| api_key | String | X-API-Key header to send to Langflow. |
| additional_headers | JSON | Additional headers to be sent to the Langflow server. |
| session_id | String | Custom session id to override the random session id. |
| height | Number | Height of the chat window in pixels. |
| width | Number | Width of the chat window in pixels. |
| chat_position | String | Position of chat window, such as `top-right` or `bottom-left`. |
| start_open | Boolean | Whether the chat window should be open by default. |
| chat_window_style | JSON | Overall chat window appearance. |
| chat_trigger_style | JSON | Chat trigger button styling. |
| bot_message_style | JSON | Bot message formatting. |
| user_message_style | JSON | User message formatting. |
| error_message_style | JSON | Error message formatting. |
| input_style | JSON | Chat input field styling. |
| input_container_style| JSON | Input container styling. |
| send_button_style | JSON | Send button styling. |
| send_icon_style | JSON | Send icon styling. |
| window_title | String | Title displayed in the chat window header. |
| placeholder | String | Placeholder text for the chat input field. |
| placeholder_sending | String | Placeholder text while sending a message. |
| online | Boolean | Whether the chat component is online. |
| online_message | String | Custom message when chat is online. |
| input_type | String | Input type for chat messages. |
| output_type | String | Output type for chat messages. |
| output_component | String | Output ID when multiple outputs are present. |
| chat_output_key | String | Which output to display if multiple outputs are available. |
| tweaks | JSON | Additional custom adjustments for the flow. |

1
docs/sidebars.js
View file

@ -40,6 +40,7 @@ module.exports = {
"Concepts/concepts-flows", "Concepts/concepts-flows",
"Concepts/concepts-objects", "Concepts/concepts-objects",
"Concepts/concepts-publish", "Concepts/concepts-publish",
"Concepts/embedded-chat-widget",
"Concepts/mcp-server", "Concepts/mcp-server",
"Concepts/concepts-file-management", "Concepts/concepts-file-management",
"Concepts/concepts-voice-mode", "Concepts/concepts-voice-mode",

35
docs/src/components/ChatWidget/index.tsx Normal file
View file

@ -0,0 +1,35 @@
import React, { useEffect } from 'react';
// Component to load the chat widget script
const ChatScriptLoader = () => {
useEffect(() => {
if (!document.querySelector('script[src*="langflow-embedded-chat"]')) {
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/gh/langflow-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js';
script.async = true;
document.body.appendChild(script);
}
}, []);
return null;
};
declare global {
namespace JSX {
interface IntrinsicElements {
"langflow-chat": any;
}
}
}
export default function ChatWidget({ className }) {
return (
<div className={className}>
<ChatScriptLoader />
<langflow-chat
host_url="http://localhost:7860"
flow_id="YOUR_FLOW_ID"
></langflow-chat>
</div>
);
}

BIN
docs/static/img/chat-widget-default.png vendored Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 380 KiB