Streaming Workflow (Client-side requests)

To ensure efficient data retrieval and enhance user experience, our API supports streaming requests. By leveraging streaming, you can start receiving data more rapidly, even before the full response is ready. This is particularly useful for applications requiring displaying progressive results.

Since these requests come directly from the client, its authenticated using a single use token which can using generated using this endpoint.

Once you have obtained the single-use token, you can proceed to initiate a request. Ensure that you include the token as a query parameter in the request. If the workflow requires any inputs, these can be included in the request body as JSON.

Here is a sample request:

cURL

curl --request POST \
  --url https://manageprompt.com/api/v1/run/{your-workflow-id}/stream?token=pub_tok_339db872d1a99b6996707 \
  --header 'Content-Type: application/json' \
  --data '{"topic":"vision pro"}'

On the client side, you can retrieve the response and progressively display it in the UI. Here is an example of a React component that fetches a response from a stream and renders it in the UI.

TypeScript

"use client";

import { useCallback, useEffect, useState } from "react";
import { Spinner } from "./loaders";

export default function StreamingText({
  url,
  fallbackText,
  className,
}: {
  url: string;
  fallbackText: string;
  className?: string;
}) {
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState("");

  const getData = useCallback(async () => {
    setLoading(true);
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      // add optional data (if inputs)
    });

    if (!response.ok) {
      return null;
    }

    const data = response.body;
    if (!data) {
      setResult(fallbackText);
      return;
    }

    const reader = data.getReader();
    const decoder = new TextDecoder();
    let done = false;

    setLoading(false);

    while (!done) {
      const { value, done: doneReading } = await reader.read();
      done = doneReading;
      const chunkValue = decoder.decode(value);
      setResult((prev) => (prev ?? "") + chunkValue);
    }
  }, [url, fallbackText]);

  useEffect(() => {
    if (url) {
      getData();
    }
  }, []);

  return loading ? (
    <Spinner className={className} />
  ) : (
    <p className={className}>{result}</p>
  );
}