jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

docs: api pane updates (#6343)

Browse source 
* initial-code

* cleanup

* order-same-as-pane

* docs:javascript-js
This commit is contained in:
Mendon Kissling 2025-02-25 13:30:28 -05:00 • committed by GitHub
commit 80b01c0951
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 42 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

71
docs/docs/Concepts/concepts-api.md
View file

@ -3,15 +3,22 @@ title: API pane
slug: /concepts-api
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
The **API** pane presents code templates for integrating your flow into external applications.
![](/img/api-pane.png)
## cURL
<Tabs>
<TabItem value="curl" label="curl" default>
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
</TabItem>
<TabItem value="Python API" label="Python API">
The **Python API** tab displays code to interact with your flow using the Python HTTP `requests` library.
@ -21,9 +28,28 @@ To use the `requests` library:
2. Run the script and pass your message with it.
```python
python3 python-api-script.py --message="tell me about something interesting"
python3 python-test-script.py --message="tell me about something interesting"
```
## Python code
</TabItem>
<TabItem value="JS API" label="JS API" default>
The **JavaScript API** tab displays code to interact with your flow in JavaScript.
1. Copy and paste the code into a JavaScript file.
2. Run the script with any necessary arguments for your flow:
```plain
node test-script.js "tell me about something interesting"
```
The response content depends on your flow. Make sure the endpoint returns a successful response.
</TabItem>
<TabItem value="Python code" label="Python code" default>
The **Python Code** tab displays code to interact with your flow's `.json` file using the Langflow runtime.
@ -34,38 +60,16 @@ To use your code in a Python application using the Langflow runtime, you have to
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
python python-test-script.py
```
## Tweaks
</TabItem>
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).
</Tabs>
## Chat Widget
@ -206,6 +210,15 @@ Props with the type JSON need to be passed as stringified JSONs, with the format
| 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. |
## 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).
## 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: