Guidelines

Chat Widget

The Langflow Chat Widget is a powerful web component that enables communication with a Langflow project. This widget allows for a chat interface embedding, allowing the integration of Langflow into web applications effortlessly.

Features

🌟 Seamless Integration: Easily integrate the Langflow Chat Widget into your website or web application with just a few lines of JavaScript.

🚀 Interactive Chat Interface: Engage your users with a user-friendly conversation, 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.

Usage

You can get the HTML code embedded with the chat by clicking the Code button at the Sidebar after building a flow.

Clicking the Chat Widget HTML tab, you'll get the code to be inserted. Read below to learn how to use it with HTML, React and Angular.

HTML

The Chat Widget can be embedded into any HTML page, inside a <body> tag, as demonstrated in the video below.

React

To embed the Chat Widget using React, you'll need to insert this <script> tag into the React index.html file, inside the <body> tag:

<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@main/dist/build/static/js/bundle.min.js"></script>

Then, declare your Web Component and encapsulate it in a React component.

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>
  );
}

Finally, you can place the component anywhere in your code to display the Chat Widget.

Angular

To use it in Angular, first add this <script> tag into the Angular index.html file, inside the <body> tag.

<script src="https://cdn.jsdelivr.net/gh/logspace-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.

Open the module file (it typically ends with .module.ts) where you'd add the langflow-chat web component.
Import CUSTOM_ELEMENTS_SCHEMA at the top of the file:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

Add CUSTOM_ELEMENTS_SCHEMA to the 'schemas' array inside the '@NgModule' decorator:

@NgModule({
  declarations: [
    // ... Other components and directives ...
  ],
  imports: [
    // ... Other imported modules ...
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // Add the CUSTOM_ELEMENTS_SCHEMA here
})
export class YourModule {}

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:

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:

<langflow-chat
  chat_inputs='{"your_key":"value"}'
  chat_input_field="your_chat_key"
  flow_id="your_flow_id"
  host_url="langflow_url"
></langflow-chat>

INFO

CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows Angular to recognize custom elements.

INFO

Adding CUSTOM_ELEMENTS_SCHEMA tells Angular to allow custom elements in your templates, and it will suppress the warning related to unknown elements like langflow-chat.

INFO

Notice that you can only use the Chat Widget in components that are part of the module where you added CUSTOM_ELEMENTS_SCHEMA.

Configuration

Use the widget API to customize your Chat Widget:

CAUTION

Props with the type JSON need to be passed as Stringified JSONs, with the format {"key":"value"}.

Chat Interface

Custom Components

Getting Started

👋 Welcome to Langflow

📦 How to install?

🤗 HuggingFace Spaces

🎨 Creating Flows

Guidelines

API Keys

Assynchronous Processing

Component

Features

Collection

Prompt Customization

Chat Interface

Chat Widget

Custom Components

Step-by-Step Guides

Async API

Integrating documents with prompt variables

Building chatbots with System Message

Integrating Langfuse with Langflow

Examples

FlowRunner Component

Conversation Chain

Buffer Memory

MidJourney Prompt Chain

CSV Loader

Serp API Tool

Multiple Vector Stores

Python Function

📚 How to Upload Examples?

Deployment

Deploy on Google Cloud Platform

Contributing

How to contribute?

GitHub Issues

Community

Search Docs…