From 0046d1884e30794f9e372ecba2c484a00675be9a Mon Sep 17 00:00:00 2001 From: Mendon Kissling <59585235+mendonk@users.noreply.github.com> Date: Thu, 13 Feb 2025 13:31:22 -0500 Subject: [PATCH] delete-site-and-redirect --- docs/docs/Concepts/concepts-api.md | 221 ----------------------------- docs/docusaurus.config.js | 7 +- docs/sidebars.js | 2 +- 3 files changed, 6 insertions(+), 224 deletions(-) delete mode 100644 docs/docs/Concepts/concepts-api.md diff --git a/docs/docs/Concepts/concepts-api.md b/docs/docs/Concepts/concepts-api.md deleted file mode 100644 index 244efee3ee..0000000000 --- a/docs/docs/Concepts/concepts-api.md +++ /dev/null @@ -1,221 +0,0 @@ ---- -title: API pane -slug: /concepts-api ---- - -The **API** pane presents code templates for integrating your flow into external applications. - -![](/img/api-pane.png) - -## 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. - -To use the `requests` library: - -1. Copy and paste the code into a Python script. -2. Run the script and pass your message with it. - -```python -python3 python-api-script.py --message="tell me about something interesting" -``` -## Python code - -The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime. - -To use your code in a Python application using the Langflow runtime, you have to first download your flow’s JSON file. - -1. In your **Workspace**, click **Settings**, and then select **Export**. - -2. Download the flow to your local machine. Make sure the flow path in the script matches the flow’s location on your machine. - -3. Copy and paste the code from the API tab into a Python script file. -It will look like this: - -```python -from langflow.load import run_flow_from_json -TWEAKS = { - "ChatInput-kKhri": {}, - "Prompt-KDSi5": {}, - "ChatOutput-Vr3Q7": {}, - "OpenAIModel-4xYtx": {} -} - -result = run_flow_from_json(flow="./basic-prompting-local.json", - input_value="tell me about something interesting", - fallback_to_env_vars=True, # False by default - tweaks=TWEAKS) - -print(result) -``` - -4. Run the script: - -```python -python3 python-api-script.py -``` - -## 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 - -For information on sending files to the Langflow API, see [API examples](/api-reference-api-examples#upload-image-files). - -## Chat Widget - -The **Chat Widget HTML** tab displays code that can be inserted in the `` 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 the chat widget into HTML - -To embed the chat widget into any HTML page, insert the code snippet. inside a `` tag. - -```html - - - -``` - -### Embed the chat widget with React - -To embed the Chat Widget using React, insert this ` -``` - -Declare your Web Component and encapsulate it in a React component. - -```javascript -declare global { - namespace JSX { - interface IntrinsicElements { - "langflow-chat": any; - } - } -} - -export default function ChatWidget({ className }) { - return ( -
- -
- ); -} -``` - -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, first add this ` -``` - -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: - -```javascript -@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: - -```javascript - -``` - -:::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. | - -## 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: - -```bash -curl -X POST \ - "http://127.0.0.1:7860/api/v1/webhook/**YOUR_FLOW_ID**" \ - -H 'Content-Type: application/json'\ - -d '{"any": "data"}' - ``` - -To test the **Webhook** component in your flow, see the [Webhook component](/components-data#webhook). - diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index e1179c543f..6b4356edd5 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -172,8 +172,11 @@ const config = { from: "/components-rag", }, { - to: "/concepts-api", - from: "/workspace-api", + to: "/concepts-publish", + from: [ + "/concepts-api", + "/workspace-api", + ] }, { to: "/components-custom-components", diff --git a/docs/sidebars.js b/docs/sidebars.js index dd02a6cf31..d3389625cc 100644 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -39,7 +39,7 @@ module.exports = { "Concepts/concepts-components", "Concepts/concepts-flows", "Concepts/concepts-objects", - "Concepts/concepts-api", + "Concepts/concepts-publish", ], }, {