Streaming Workflows

AI Tutor API supports real-time streaming responses, enabling progressive data retrieval for enhanced user experience. This feature is particularly valuable for applications requiring immediate feedback and interactive learning experiences.

Client-side streaming in AI Tutor API allows for efficient data transmission, displaying results as they become available, making it ideal for real-time tutoring sessions and interactive educational content delivery.

Key Components of Streaming Implementation

Single-Use Token Authentication

Secure your requests with single-use tokens for client-side authentication.

Real-time Data Streaming

Receive and display progressive responses as the AI tutor generates content.

Client-side Integration

Easy-to-implement React components for handling streaming responses.

Flexible Input Processing

Support for various input formats in streaming requests.

Implementation Guide

Step 1: Generate Authentication Token

Step 2: Make Streaming Request

Use the token to make a streaming request to the AI Tutor API:

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

Step 3: Implement React Component

Use this React component to handle streaming responses:

"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",
      },
    });

    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>
  );
}

Step 4: Handle Responses

Best Practices for Streaming Implementation

Error Handling

Loading States

Token Management

Performance Optimization

Benefits of Streaming in AI Tutor API

Real-time Feedback: Immediate display of AI tutor responses as they’re generated.
Enhanced UX: Better user experience with progressive content loading.
Resource Efficiency: Optimized data transmission and processing.
Interactive Learning: Support for real-time interactive tutoring sessions.
Scalability: Efficient handling of large responses through chunked transfer.

Get Started with AI Tutor

AI Tutor

Pixio

Account

Machine

Pixio Model Info

Pixio API Endpoint

AI Tutor RAG API Endpoint

AI Tutor API Endpoint

AI Tutor API supports real-time streaming responses, enabling progressive data retrieval for enhanced user experience. This feature is particularly valuable for applications requiring immediate feedback and interactive learning experiences.

Key Components of Streaming Implementation

Single-Use Token Authentication

Real-time Data Streaming

Client-side Integration

Flexible Input Processing

Implementation Guide

Best Practices for Streaming Implementation

Benefits of Streaming in AI Tutor API

Get Started with AI Tutor

AI Tutor

Pixio

Account

Machine

Pixio Model Info

Pixio API Endpoint

AI Tutor RAG API Endpoint

AI Tutor API Endpoint

​AI Tutor API supports real-time streaming responses, enabling progressive data retrieval for enhanced user experience. This feature is particularly valuable for applications requiring immediate feedback and interactive learning experiences.

​Key Components of Streaming Implementation

Single-Use Token Authentication

Real-time Data Streaming

Client-side Integration

Flexible Input Processing

​Implementation Guide

​Best Practices for Streaming Implementation

​Benefits of Streaming in AI Tutor API

AI Tutor API supports real-time streaming responses, enabling progressive data retrieval for enhanced user experience. This feature is particularly valuable for applications requiring immediate feedback and interactive learning experiences.

Key Components of Streaming Implementation

Implementation Guide

Best Practices for Streaming Implementation

Benefits of Streaming in AI Tutor API