AI Interaction & Funnel Lab

Agentic Streaming UX & Funnel Studio

Fine-tune token velocities, TTFT thresholds, tool-calling disclosures, and generative UI widgets. Model real-time user drop-off curves and cognitive load for enterprise AI workflows.

← Back to Tools

Streaming Parameters

Time to First Token (TTFT)350 ms

Fast (80ms)Human Norm (350ms)Laggy (2000ms)

Token Velocity45 tok/s

Reading Speed (25)Optimal (45-60)Instant Burst (120)

Reasoning / Thinking Accordion

MCP Tool Execution Badges

Actionable Generative UI Card

HCI Behavioural Index

Perceived Speed81/100

Predicted Drop-off~7.8%

agentic-stream-preview

Idle

User Prompt

"Analyze the latency spike on our Mumbai shard and optimize our query pools."

Click "Start Streaming Flow" to test live token generation...

// Production useAgenticStreaming Hook
import { useState, useCallback, useRef } from "react";

export function useAgenticStreaming(options = { ttft: 350, velocity: 45 }) {
  const [state, setState] = useState<"idle" | "thinking" | "streaming" | "ready">("idle");
  const [output, setOutput] = useState("");
  const abortControllerRef = useRef<AbortController | null>(null);

  const streamQuery = useCallback(async (prompt: string) => {
    abortControllerRef.current = new AbortController();
    setState("thinking");
    setOutput("");

    try {
      const response = await fetch("/api/agent/stream", {
        method: "POST",
        body: JSON.stringify({ prompt }),
        signal: abortControllerRef.current.signal,
      });

      const reader = response.body?.getReader();
      const decoder = new TextDecoder();
      setState("streaming");

      while (true) {
        const { done, value } = await reader!.read();
        if (done) break;
        setOutput((prev) => prev + decoder.decode(value));
      }
      setState("ready");
    } catch (err: any) {
      if (err.name !== "AbortError") setState("idle");
    }
  }, []);

  const abort = () => abortControllerRef.current?.abort();

  return { state, output, streamQuery, abort };
}