From 80b01c0951f394612daa674e5a279759351a3e4d Mon Sep 17 00:00:00 2001
From: Mendon Kissling <59585235+mendonk@users.noreply.github.com>
Date: Tue, 25 Feb 2025 13:30:28 -0500
Subject: [PATCH] docs: api pane updates (#6343)

* initial-code

* cleanup

* order-same-as-pane

* docs:javascript-js
---
 docs/docs/Concepts/concepts-api.md | 71 ++++++++++++++++++------------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/docs/docs/Concepts/concepts-api.md b/docs/docs/Concepts/concepts-api.md
index 244efee3e..b6f882a6b 100644
--- a/docs/docs/Concepts/concepts-api.md
+++ b/docs/docs/Concepts/concepts-api.md
@@ -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: