API

The API section presents code templates for integrating your flow into external applications.

cURL

The cURL tab displays sample code for posting a query to your flow. Modify the input_value to change your input message. Copy the code and run it to post a query to your flow and get the result.

Python API

The Python API tab displays code to interact with your flow using the Python HTTP requests library.

Python Code

The Python Code tab displays code to interact with your flow's .json file using the Langflow runtime.

Tweaks

The Tweaks tab displays the available parameters for your flow. Modifying the parameters changes the code parameters across all windows. For example, changing the Chat Input component's input_value will change that value across all API calls.

Send image files to your flow with the API

Send image files to the Langflow API for AI analysis.

The default file limit is 100 MB. To configure this value, change the LANGFLOW_MAX_FILE_SIZE_UPLOAD environment variable. For more information, see Supported environment variables.

To send an image to your flow with the API, POST the image file to the v1/files/upload/<YOUR-FLOW-ID> endpoint of your flow.


_10curl -X POST "http://127.0.0.1:7860/api/v1/files/upload/a430cc57-06bb-4c11-be39-d3d4de68d2c4" \
_10  -H "Content-Type: multipart/form-data" \
_10  -F "file=@image-file.png"

The API returns the image file path in the format "file_path":"<YOUR-FLOW-ID>/<TIMESTAMP>_<FILE-NAME>"}.


_10{"flowId":"a430cc57-06bb-4c11-be39-d3d4de68d2c4","file_path":"a430cc57-06bb-4c11-be39-d3d4de68d2c4/2024-11-27_14-47-50_image-file.png"}

Post the image file to the Chat Input component of a Basic prompting flow. Pass the file path value as an input in the Tweaks section of the curl call to Langflow.


_12curl -X POST \
_12    "http://127.0.0.1:7860/api/v1/run/a430cc57-06bb-4c11-be39-d3d4de68d2c4?stream=false" \
_12    -H 'Content-Type: application/json'\
_12    -d '{
_12    "output_type": "chat",
_12    "input_type": "chat",
_12    "tweaks": {
_12  "ChatInput-b67sL": {
_12    "files": "a430cc57-06bb-4c11-be39-d3d4de68d2c4/2024-11-27_14-47-50_image-file.png",
_12    "input_value": "what do you see?"
_12  }
_12}}'

Your chatbot describes the image file you sent.


_10"text": "This flowchart appears to represent a complex system for processing financial inquiries using various AI agents and tools. Here’s a breakdown of its components and how they might work together..."

Chat Widget

The Chat Widget HTML tab displays code that can be inserted in the <body> of your HTML to interact with your flow.

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.

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.

Embed your flow into HTML

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

Embed your flow with React

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


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

Declare your Web Component and encapsulate it in a React component.


_10declare 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.

Embed your flow with Angular

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


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


_10@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:


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

tip

CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows Angular to recognize custom elements. 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. Notice that you can only use the Chat Widget in components that are part of the module where you added CUSTOM_ELEMENTS_SCHEMA.

Chat Widget 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"}.

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.

cURL​

Python API​

Python Code​

Tweaks​

Send image files to your flow with the API​

Chat Widget​

Embed your flow into HTML​

Embed your flow with React​

Embed your flow with Angular​

Chat Widget Configuration​