Github
Huggingface
Oficial Documentation
Langflow Chat Widget - React
The Langflow Chat Widget is a powerful web component that facilitates seamless communication with a Langflow project. With this widget, you can effortlessly integrate Langflow into your web applications, providing an interactive chat interface empowered by Langflow's advanced language understanding capabilities.
Installation
$npm install --save langflow-chat
$yarn add langflow-chat
Features
🎛️ Customizable Styling: Tailor the appearance of the chat widget to harmonize with your application's design and branding.
To embed the chat, you can obtain the HTML code by clicking the Code button in the Sidebar after building a flow. Access the Chat Widget HTML tab to obtain the code for insertion. Refer to the instructions below to learn how to use it with HTML, React, and Angular. Usage
To use the Langflow Chat Widget in your React application, simply wrap it inside a React fragment as shown below:
The gist
<>
<langflow-chat
chat_inputs='{"your_key":"value"}'
chat_input_field="your_chat_key"
flow_id="your_flow_id"
host_url="langflow_url"
>
</langflow-chat>
</>
Options
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. |
Check the Documentationdocumentation to get you started!
Note: Make sure you have a Langflow project set up before using the chat widget.
Feel free to customize the implementation according to your specific needs and enjoy the seamless communication experience with your users!