Components / AI Chat Interfaces

AI Streaming Text

A typewriter-style streaming text component that simulates token-by-token AI response generation with cursor animation.

Live Preview — ai-streaming-text-01

Installation

Dependencies

Install the core libraries required for this component.

npm

npm install react

Source Code

ai-streaming-text-01.tsx

import { useEffect, useState } from "react";

interface AIStreamingText01Props {
    text?: string; // optional prop; can default to self-contained text
    speed?: number; // typing speed in ms per character
}

export default function AIStreamingText01({
    text = "Hello! I am ChatGPT, and I generate responses token by token to simulate streaming output for your AI chat interface.",
    speed = 30,
}: AIStreamingText01Props) {
    const [displayedText, setDisplayedText] = useState("");
    const [index, setIndex] = useState(0);

    useEffect(() => {
        if (index < text.length) {
            const timeout = setTimeout(() => {
                setDisplayedText((prev) => prev + text.charAt(index));
                setIndex(index + 1);
            }, speed);
            return () => clearTimeout(timeout);
        }
    }, [index, text, speed]);

    return (
        <div className="font-sans text-base whitespace-pre-wrap break-words">
            {displayedText}
            <span className="animate-pulse inline-block w-1 bg-foreground ml-1">&nbsp;</span>
        </div>
    );
}

import { useEffect, useState } from "react";

interface AIStreamingText01Props {
    text?: string; // optional prop; can default to self-contained text
    speed?: number; // typing speed in ms per character
}

export default function AIStreamingText01({
    text = "Hello! I am ChatGPT, and I generate responses token by token to simulate streaming output for your AI chat interface.",
    speed = 30,
}: AIStreamingText01Props) {
    const [displayedText, setDisplayedText] = useState("");
    const [index, setIndex] = useState(0);

    useEffect(() => {
        if (index < text.length) {
            const timeout = setTimeout(() => {
                setDisplayedText((prev) => prev + text.charAt(index));
                setIndex(index + 1);
            }, speed);
            return () => clearTimeout(timeout);
        }
    }, [index, text, speed]);

    return (
        <div className="font-sans text-base whitespace-pre-wrap break-words">
            {displayedText}
            <span className="animate-pulse inline-block w-1 bg-foreground ml-1">&nbsp;</span>
        </div>
    );
}

Type Reference

Types and interfaces defined in this component.

AIStreamingText01Props

interface AIStreamingText01Props {
    text?: string; // optional prop; can default to self-contained text
    speed?: number; // typing speed in ms per character
}

interface AIStreamingText01Props {
    text?: string; // optional prop; can default to self-contained text
    speed?: number; // typing speed in ms per character
}

Functional Logic

Internal functions used to handle component logic.

Function	Parameters
AIStreamingText01()	{ text = "Hello! I am ChatGPT, and I generate responses token by token to simulate streaming output for your AI chat interface.", speed = 30, }: AIStreamingText01Props

State Management

React state variables managed within this component.

Variable	Initial Value
displayedText	`""`
index	`0`

Variables

All variable declarations found in this component.

Name	Kind	Value
timeout	const	`setTimeout(() => {`

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag	Count	Type	Source
<div>	1×	Native	Native HTML
<span>	1×	Native	Native HTML

Related Components

AI Chat Bubble — A conversational chat bubble component with typing indicator, avatar support, and message timestamps for AI chat interfaces.
AI Chat Input Bar — A modern chat input bar with send button, attachment support, and auto-resize textarea for AI conversation interfaces.
AI Chat Window — A full-featured AI chat window with message history, streaming response animation, and conversation management.
AI Chat Sidebar — A conversation history sidebar listing previous AI chat sessions with search, date grouping, and active state indicators.
AI Model Selector — A dropdown model selector for choosing between AI models (GPT-4, Claude, Gemini) with model info badges and capability indicators.
AI Response Actions — An action bar for AI responses with copy, regenerate, thumbs up/down, and share buttons with tooltip labels.