# langflow-embedded-chat > Welcome to the Langflow Embedded Chat repository! ๐ŸŽ‰ Latest version **0.1.1** (published 2023-08-01) ยท 0 weekly downloads ## Install ```sh npm install langflow-embedded-chat pnpm add langflow-embedded-chat yarn add langflow-embedded-chat bun add langflow-embedded-chat ``` ## Health **Score 15/100 (F)** โ€” status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.1 | | Published | 2023-08-01 | | First published | 2023-08-01 | | Weekly downloads | 0 | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 17 | | Unpacked size | 253.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | cristhianzl | ## Links - npm: https://www.npmjs.com/package/langflow-embedded-chat - npm.io page: https://npm.io/package/langflow-embedded-chat ## Dependencies (17) - [axios](https://npm.io/package/axios.md) ^1.4.0 - [react](https://npm.io/package/react.md) ^18.2.0 - [react-dom](https://npm.io/package/react-dom.md) ^18.2.0 - [typescript](https://npm.io/package/typescript.md) ^4.9.5 - [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4 - [@types/jest](https://npm.io/package/@types/jest.md) ^27.5.2 - [@types/node](https://npm.io/package/@types/node.md) ^16.18.37 - [@types/react](https://npm.io/package/@types/react.md) ^18.2.14 - [lucide-react](https://npm.io/package/lucide-react.md) ^0.256.0 - [react-shadow](https://npm.io/package/react-shadow.md) ^20.3.0 - [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^18.2.6 - [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0 - [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^2.2.0 - [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.16.5 - [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0 - [@r2wc/react-to-web-component](https://npm.io/package/@r2wc/react-to-web-component.md) ^2.0.2 ## Recent versions - 0.1.1 (latest) โ€” 2023-08-01 - 0.1.0 โ€” 2023-08-01 ## README # Langflow Embedded Chat โ›“๏ธ Welcome to the Langflow Embedded Chat repository! ๐ŸŽ‰ The Langflow Embedded Chat is a powerful web component that enables seamless communication with the [Langflow โ›“๏ธ](https://github.com/logspace-ai/langflow). This widget provides a chat interface, allowing you to integrate Langflow โ›“๏ธ into your web applications effortlessly. [![MIT License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) ## What is Langflow? 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. ## Features ๐ŸŒŸ 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. ## Installation ### Option 1: CDN Link Use the Langflow Widget directly from the CDN by including the following script tag in your HTML: ```html ``` ### Option 2: Local Build 1. Clone this repository to your local machine: ```bash git clone https://github.com/logspace-ai/langflow-embedded-chat.git ``` 2. Navigate to the project directory: ```bash cd langflow-embedded-chat ``` 3. Build the project to generate the bundle: ```bash npm run build ``` 5. After the build process completes, you'll find the bundle in the `dist/build/static/js` folder. You can include this JavaScript file in your HTML: ```html ``` ## Usage ### on simple HTML ```html ``` ### on React Import the js bundle in the index.html of your react project ```html ``` Encapsulate your custom element in a react component ```html export default function ChatWidget() { return (
); } ``` ## Configuration 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 | | chat_output_key | string | 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 | - **bot_message_style:** - Type: JSON - Required: No - Description: Styling options for formatting bot messages in the chat window. - **chat_input_field:** - Type: String - Required: Yes - Description: Specifies the input field type for chat messages. - **chat_inputs:** - Type: JSON - Required: Yes - Description: Defines the chat input elements and their values. - **chat_output_key:** - Type: String - Required: No - Description: Specify which output to choose if there is more than one output. - **chat_position:** - Type: String - Required: No - Description: Determines the position of the chat window (top-left, top-center, top-right, center-left, center-right, bottom-right, bottom-center, bottom-left). - **chat_trigger_style:** - Type: JSON - Required: No - Description: Styling options for the chat trigger. - **chat_window_style:** - Type: JSON - Required: No - Description: Styling options for the overall chat window. - **error_message_style:** - Type: JSON - Required: No - Description: Styling options for error messages in the chat window. - **flow_id:** - Type: String - Required: Yes - Description: Identifier for the flow associated with the component. - **height:** - Type: Number - Required: No - Description: Specifies the height of the chat window in pixels. - **host_url:** - Type: String - Required: Yes - Description: The URL of the host for communication with the chat component. - **input_container_style:** - Type: JSON - Required: No - Description: Styling options for the input container where chat messages are typed. - **input_style:** - Type: JSON - Required: No - Description: Styling options for the chat input field. - **Online:** - Type: Boolean - Required: No - Description: Indicates if the chat component is online or offline. - **online_message:** - Type: String - Required: No - Description: Custom message to display when the chat component is online. - **placeholder:** - Type: String - Required: No - Description: Placeholder text for the chat input field. - **placeholder_sending:** - Type: String - Required: No - Description: Placeholder text to display while a message is being sent. - **send_button_style:** - Type: JSON - Required: No - Description: Styling options for the send button in the chat window. - **send_icon_style:** - Type: JSON - Required: No - Description: Styling options for the send icon in the chat window. - **tweaks:** - Type: JSON - Required: No - Description: Additional custom tweaks for the associated flow. - **user_message_style:** - Type: JSON - Required: No - Description: Styling options for formatting user messages in the chat window. - **width:** - Type: Number - Required: No - Description: Specifies the width of the chat window in pixels. - **window_title:** - Type: String - Required: No - Description: Title for the chat window, displayed in the header or title bar. ## License This project is licensed under the [MIT License](https://opensource.org/licenses/MIT) - see the [LICENSE](https://github.com/logspace-ai/langflow-embedded-chat/tree/main/LICENSE) file for details. --- _Source: https://npm.io/package/langflow-embedded-chat ยท Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._