Improve JavaScript API Code Snippet in Modal

[edwinjosechittilappilly]

Feature Request

The current JavaScript code snippet in the API modal is not an ideal example of how our developers would typically write or use JavaScript, especially when compared to the curl snippet. A more equivalent and intuitive snippet would fetch data from the network using fetch rather than employing a client.

Suggested Solution:

Please update the JavaScript code snippet in the modal to align more closely with the curl snippet. A suggested code would look something like this:

fetch("https://api.langflow.astra.datastax.com/lf/7436dcd2-a480-4009-bce2-43ba959692e5/api/v1/run/5a232ac1-df88-478e-ad90-be6a98ae08a2?stream=false", {
  method: "POST",
  headers: {
    Authorization: <TOKEN>,
  },
  body: JSON.stringify({}), // Add body data if needed
})
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Motivation

Additional Feedback:

1. The Python API snippet faces a similar issue as it tries to illustrate a “main” that is not reflective of real-world usage in most server cases.
2. The current curl syntax is manually copied and transposed to JavaScript, which still contains issues and could be improved.
3. A suggestion was made to create an npm package that simplifies handling API requests, including both streaming and non-streaming options. This could provide a more cohesive and streamlined experience for developers.

cc: @philnash @mieslep

Your Contribution

No response

[AciD-sEc]

Thank you for considering this enhancement to the JavaScript API modal snippet. I believe updating it to use fetch instead of a client library will provide a clearer, more intuitive example for developers. Here’s a suggested approach: fetch("https://api.langflow.astra.datastax.com/lf/7436dcd2-a480-4009-bce2-43ba959692e5/api/v1/run/5a232ac1-df88-478e-ad90-be6a98ae08a2?stream=false", { method: "POST", headers: { Authorization: "Bearer <TOKEN>", "Content-Type": "application/json" }, body: JSON.stringify({ key: "value" }) // Replace with actual request data }) .then(response => { if (!response.ok) throw new Error('Network response was not ok'); return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); This snippet improves readability, especially for developers familiar with the fetch API, by making API requests straightforward and comparable to the existing curl snippet.

Additionally, I see potential for similar improvements to the Python API snippet, which could better reflect real-world usage by avoiding an illustrative main and focusing instead on practical, server-oriented examples. Here’s a possible revision: `import requests

url = "https://api.langflow.astra.datastax.com/lf/7436dcd2-a480-4009-bce2-43ba959692e5/api/v1/run/5a232ac1-df88-478e-ad90-be6a98ae08a2" headers = { "Authorization": "Bearer ", "Content-Type": "application/json" } data = {} # Replace with actual request payload

response = requests.post(url, headers=headers, json=data) print(response.json() if response.ok else f"Error: {response.status_code}") ` Additionally, creating an npm package that simplifies API interactions with both streaming and non-streaming options would streamline the process for JavaScript developers, providing a more cohesive experience when handling Langflow API requests.

Thank you for the opportunity to contribute. Please let me know if there’s any additional feedback or specific guidelines for these updates!