diff --git a/docs/docs/Concepts/concepts-publish.md b/docs/docs/Concepts/concepts-publish.md index 7b753dc80..97b94bf1c 100644 --- a/docs/docs/Concepts/concepts-publish.md +++ b/docs/docs/Concepts/concepts-publish.md @@ -4,6 +4,7 @@ slug: /concepts-publish --- import Tabs from '@theme/Tabs'; 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. @@ -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). -### 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 `` of your HTML to interact with your flow. - -```html - - - -``` - -### Embed the chat widget with React - -To embed the Chat Widget using React, add this ` -``` - -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 ( -
- -
- ); -} -``` -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 ` -``` - -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 - -``` - -### 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 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**. +## Embed into site + +The **Embed into site** tab displays code that can be inserted in the `` of your HTML to interact with your flow. + +For more information, see [Embedded chat widget](/embedded-chat-widget). diff --git a/docs/docs/Concepts/embedded-chat-widget.md b/docs/docs/Concepts/embedded-chat-widget.md new file mode 100644 index 000000000..1c68a1f27 --- /dev/null +++ b/docs/docs/Concepts/embedded-chat-widget.md @@ -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 `` 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 + + + + + + + + +``` + +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 + +``` + +To add a custom [session ID](/session-id) value and an API key for authentication to your Langflow server: +```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 ( +
+ +
+ ); +} +``` +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 ( +
+ + +
+ ); +} +``` + +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 ``. + +## 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 `` 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: ` +
+

Langflow Chat Test

+ +
+ `, + 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. | \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index 57b42bb83..36b5b4a4f 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -40,6 +40,7 @@ module.exports = { "Concepts/concepts-flows", "Concepts/concepts-objects", "Concepts/concepts-publish", + "Concepts/embedded-chat-widget", "Concepts/mcp-server", "Concepts/concepts-file-management", "Concepts/concepts-voice-mode", diff --git a/docs/src/components/ChatWidget/index.tsx b/docs/src/components/ChatWidget/index.tsx new file mode 100644 index 000000000..cfda523ac --- /dev/null +++ b/docs/src/components/ChatWidget/index.tsx @@ -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 ( +
+ + +
+ ); + } \ No newline at end of file diff --git a/docs/static/img/chat-widget-default.png b/docs/static/img/chat-widget-default.png new file mode 100644 index 000000000..d13088fcb Binary files /dev/null and b/docs/static/img/chat-widget-default.png differ