Publish Workflow

Last updated 12 days ago

Publish Workflow

BroxiAI 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 panel presents code templates for integrating your flow into external applications.

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.

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

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:

curl -X POST \
  "https://use.broxi.ai/api/v1/webhook/**YOUR_FLOW_ID**" \
  -H 'Content-Type: application/json'\
  -d '{"any": "data"}'

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

<script src="https://use.broxi.ai/bundle.min.js"></script>
<broxi-widget
    window_title="Simple Flow"
    flow_id="1ede06c1-4514-4216-bb5f-8d6dbffb17d1"
    host_url="https://use.broxi.ai"
    api_key="...">
</broxi-widget>

To embed the Chat Widget using React, add this <script> tag to the React index.html file inside a <body>tag.

<script src="https://use.broxi.ai/bundle.min.js"></script>

Declare your web component and encapsulate it in a React component.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "broxi-widget": any;
    }
  }
}

export default function ChatWidget({ className }) {
  return (
    <div className={className}>
      <broxi-widget
        chat_inputs='{"your_key":"value"}'
        chat_input_field="your_chat_key"
        flow_id="your_flow_id"
        host_url="https://use.broxi.ai"
      ></broxi-widget>
    </div>
  );
}

2. Place the component anywhere in your code to display the chat widget.

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

<script src="https://use.broxi.ai/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.ts where you want to add the broxi-widget web component.
Import CUSTOM_ELEMENTS_SCHEMA at the top of the .module.ts 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:

<broxi-widget  chat_inputs='{"your_key":"value"}'  chat_input_field="your_chat_key"  flow_id="your_flow_id"  host_url="https://use.broxi.ai"></broxi-widget>

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

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

Specifies which output to display if multiple outputs are available.

chat_position

String

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

Styles the chat trigger button.

chat_window_style

JSON

Customizes the overall appearance of the chat window.

error_message_style

JSON

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

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

Applies styling to the container where chat messages are entered.

input_style

JSON

Sets the style for the chat input field.

online

Boolean

Toggles the online status of the chat component.

online_message

String

Sets a custom message to display when the chat component is online.

placeholder

String

Sets the placeholder text for the chat input field.

placeholder_sending

String

Sets the placeholder text to display while a message is being sent.

send_button_style

JSON

Sets the style for the send button in the chat window.

send_icon_style

JSON

Sets the style for the send icon in the chat window.

tweaks

JSON

Applies additional custom adjustments for the associated flow.

user_message_style

JSON

Determines the formatting for user messages in the chat window.

width

Number

Sets the width of the chat window in pixels.

window_title

String

Sets the title displayed in the chat window's header or title bar.

The Shareable playground exposes your BroxiAI workflow's Playground at the public access.

PreviousPlayground NextFile Manager

Last updated 12 days ago

API Access

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

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.

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

Temporary overrides

Webhook cURL

curl -X POST \
  "https://use.broxi.ai/api/v1/webhook/**YOUR_FLOW_ID**" \
  -H 'Content-Type: application/json'\
  -d '{"any": "data"}'

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.

<script src="https://use.broxi.ai/bundle.min.js"></script>
<broxi-widget
    window_title="Simple Flow"
    flow_id="1ede06c1-4514-4216-bb5f-8d6dbffb17d1"
    host_url="https://use.broxi.ai"
    api_key="...">
</broxi-widget>

To embed the Chat Widget using React, add this <script> tag to the React index.html file inside a <body>tag.

<script src="https://use.broxi.ai/bundle.min.js"></script>

Declare your web component and encapsulate it in a React component.

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "broxi-widget": any;
    }
  }
}

export default function ChatWidget({ className }) {
  return (
    <div className={className}>
      <broxi-widget
        chat_inputs='{"your_key":"value"}'
        chat_input_field="your_chat_key"
        flow_id="your_flow_id"
        host_url="https://use.broxi.ai"
      ></broxi-widget>
    </div>
  );
}

2. Place the component anywhere in your code to display the chat widget.

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

<script src="https://use.broxi.ai/bundle.min.js"></script>

Open the module file .module.ts where you want to add the broxi-widget web component.
Import CUSTOM_ELEMENTS_SCHEMA at the top of the .module.ts 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:

<broxi-widget  chat_inputs='{"your_key":"value"}'  chat_input_field="your_chat_key"  flow_id="your_flow_id"  host_url="https://use.broxi.ai"></broxi-widget>

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

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

Specifies which output to display if multiple outputs are available.

chat_position

String

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

Styles the chat trigger button.

chat_window_style

JSON

Customizes the overall appearance of the chat window.

error_message_style

JSON

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

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

Applies styling to the container where chat messages are entered.

input_style

JSON

Sets the style for the chat input field.

online

Boolean

Toggles the online status of the chat component.

online_message

String

Sets a custom message to display when the chat component is online.

placeholder

String

Sets the placeholder text for the chat input field.

placeholder_sending

String

Sets the placeholder text to display while a message is being sent.

send_button_style

JSON

Sets the style for the send button in the chat window.

send_icon_style

JSON

Sets the style for the send icon in the chat window.

tweaks

JSON

Applies additional custom adjustments for the associated flow.

user_message_style

JSON

Determines the formatting for user messages in the chat window.

width

Number

Sets the width of the chat window in pixels.

window_title

String

Sets the title displayed in the chat window's header or title bar.

Shareable playground

The Shareable playground exposes your BroxiAI workflow's Playground at the public access.

Publish Workflow

Publish Workflow

API Access

API Access

Temporary overrides

Webhook cURL

Embed into site

Embed the chat widget with React

Embed the chat widget with Angular

Chat widget configuration

Shareable playground

Temporary overrides

Webhook cURL

Embed into site

Embed the chat widget with React

Embed the chat widget with Angular

Chat widget configuration

Shareable playground