Welcome to the Langflow Embedded Chat repository! 🎉
The Langflow Embedded Chat is a powerful web component that enables seamless communication with the Langflow ⛓️. This widget provides a chat interface, allowing you to integrate Langflow ⛓️ into your web applications effortlessly.
Langflow is a no-code open-source project that empowers developers to build cutting-edge applications using Language Model technologies. With Langflow, you can leverage the power of LLMs (Large Language Models) to enhance user interactions, generate human-like text, and gain valuable insights from natural language data.
🌟 Seamless Integration: Easily integrate the Langflow Widget into your website or web application with just a few lines of JavaScript.
🚀 Interactive Chat Interface: Engage your users with a user-friendly chat interface, 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.
You can choose from two installation options based on your preference:
- Clone this repository to your local machine:
git clone https://github.com/logspace-ai/langflow-embedded-chat.git- Navigate to the project directory:
cd langflow-embedded-chat- Build the project to generate the bundle:
npm run build- After the build process completes, you'll find the bundle in the
dist/build/static/jsfolder. You can include this JavaScript file in your HTML:
<script src="path/to/your/langflow-widget.js"></script>Alternatively, you can use the Langflow Widget directly from the CDN by including the following script tag in your HTML:
<script src="https://cdn.example.com/langflow-widget.js"></script>Make sure to replace https://cdn.example.com/langflow-widget.js with the actual URL of the CDN hosting the Langflow Widget.
Now, users can choose to either build the project locally or use the CDN link based on their needs. This provides them with flexibility and convenience when integrating the Langflow Widget into their applications. If you have any more updates or changes, feel free to let me know! I'm here to assist you further. Happy coding!
<langflow-chat
chat_input_field="the field in the flow that is used as chat input"
chat_inputs='your input object'
host_url="langflow url"
flow_id="your_flow_id"
></langflow-chat>Use the widget API to customize your widget:
| Prop | Type | Required |
|---|---|---|
| bot_message_style | json | No |
| chat_input_field | string | Yes |
| chat_inputs | json | Yes |
| chat_position | string | No |
| chat_trigger_style | json | No |
| chat_window_style | json | No |
| error_message_style | json | No |
| flow_id | string | Yes |
| height | number | No |
| host_url | string | Yes |
| input_container_style | json | No |
| input_style | json | No |
| online | boolean | No |
| online_message | string | No |
| placeholder | string | No |
| placeholder_sending | string | No |
| send_button_style | json | No |
| send_icon_style | json | No |
| tweaks | json | No |
| user_message_style | json | No |
| width | number | No |
| window_title | string | No |
This project is licensed under the MIT License - see the LICENSE file for details.