Publish flows
Langflow provides several ways to publish and integrate your flows into external applications. Whether you want to expose your flow via API endpoints, embed it as a chat widget in your website, or share it as a public playground, this guide covers the options available for making your flows accessible to users.
API access
The API pane presents code templates for integrating your flow into external applications.
- Python
- JavaScript
- curl
The Python tab displays code to interact with your flow using the Python requests library.
- Copy and paste the code into a Python script.
- Run the script.
_10python3 python-test-script.py --message="tell me about something interesting"
The response content depends on your flow. Make sure the endpoint returns a successful response.
The JavaScript API tab displays code to interact with your flow in JavaScript.
- Copy and paste the code into a JavaScript file.
- Run the script.
_10node test-script.js "tell me about something interesting"
The response content depends on your flow. Make sure the endpoint returns a successful response.
The cURL tab displays sample code for posting a query to your flow.
Copy the code and run it to post a query to your flow and get the result.
The response content depends on your flow. Make sure the endpoint returns a successful response.
Temporary overrides
The Temporary overrides 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 changes that value across all API calls to the /run endpoint of this flow.
Send files to your flow with the API
For information on sending files to the Langflow API, see API examples.
Webhook cURL
When a Webhook component is added to the workspace, a new Webhook cURL tab becomes available in the API pane that contains an HTTP POST request for triggering the webhook component. For example:
_10curl -X POST \_10 "http://127.0.0.1:7860/api/v1/webhook/**YOUR_FLOW_ID**" \_10 -H 'Content-Type: application/json'\_10 -d '{"any": "data"}'
To test the Webhook component in your flow, see the Webhook component.
Embed into site
The Embed into site tab displays code that can be inserted in the <body> of your HTML to interact with your flow.
_10<script src="https://cdn.jsdelivr.net/gh/logspace-ai/langflow-embedded-chat@v1.0.7/dist/build/static/js/bundle.min.js""></script>_10_10 <langflow-chat_10 window_title="Basic Prompting"_10 flow_id="801abb1e-19b9-4278-9632-179b6d84f126"_10 host_url="http://localhost:7860"_10_10 ></langflow-chat>
Embed the chat widget with React
To embed the Chat Widget using React, add this <script> tag to the React index.html file inside a <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.
_20declare global {_20 namespace JSX {_20 interface IntrinsicElements {_20 "langflow-chat": any;_20 }_20 }_20}_20_20export default function ChatWidget({ className }) {_20 return (_20 <div className={className}>_20 <langflow-chat_20 chat_inputs='{"your_key":"value"}'_20 chat_input_field="your_chat_key"_20 flow_id="your_flow_id"_20 host_url="langflow_url"_20 ></langflow-chat>_20 </div>_20 );_20}
- Place the component anywhere in your code to display the chat widget.
Embed the chat widget with Angular
To use the chat widget in Angular, add this <script> tag to the Angular index.html file inside a <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.
CUSTOM_ELEMENTS_SCHEMA is a built-in schema that allows custom elements in your Angular templates, and suppresses warnings related to unknown elements like langflow-chat.
- Open the module file
.module.tswhere you want to add thelangflow-chatweb component. - Import
CUSTOM_ELEMENTS_SCHEMAat the top of the.module.tsfile:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
- Add
CUSTOM_ELEMENTS_SCHEMAto the 'schemas' array inside the '@NgModule' decorator:
_12@NgModule({_12 declarations: [_12 // ... Other components and directives ..._12 ],_12 imports: [_12 // ... Other imported modules ..._12 ],_12 schemas: [_12 CUSTOM_ELEMENTS_SCHEMA // Add the CUSTOM_ELEMENTS_SCHEMA here_12 ]_12})_12export class YourModule { }
- In your Angular project, find the component belonging to the module where
CUSTOM_ELEMENTS_SCHEMAwas added. Inside the template, add thelangflow-chattag 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>
Chat widget configuration
Use the widget API to customize your Chat Widget.
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. |
Shareable playground
The Shareable playground exposes your Langflow application's Playground at the /public_flow/{flow-id} endpoint.
You can share this endpoint publicly using a sharing platform like Ngrok or zrok.
If you're using Datastax Langflow, you can share the URL with any users within your Organization.
