Readable output

Streaming text

Selectable streaming Markdown with citations, sources, and follow-ups.

Streaming text — gpui-ai

Starts when it scrolls into view

NORD FROST · DARK · RADIUS 6/10 · BASE 16PX · SHADOW

Running the real component, compiled to WebAssembly. The frame is 426 px tall, which is what this story measures at the demo width in the default type size — a narrower column or a theme that changes that size will wrap it differently.

Type: StreamingText
Source: streaming_text.rs
Story: streaming-text
Demo height: 426 px
Events: StreamingTextEvent

Code

Cut from the gallery story this page runs, so it stays true.

crates/gallery/src/gallery.rsOpen in the gallery Implementation

let cited_answer = Progressive::complete(
    "Pistachio margins lead vanilla by eight points [[cite:margin-report]], while the supply forecast remains stable [[cite:supply-forecast]]."
        .into(),
);
v_flex()
    .gap_4()
    .child(
        StreamingText::new("answer", &self.sim.answer)
            .source_refs([
                SourceRef::new("pricing.md"),
                SourceRef::new("suppliers.csv"),
                SourceRef::with_id("dairy-index", "2026 Dairy Price Index")
                    .url("https://dairyreport.org/index/2026"),
                SourceRef::with_id("alpenrose", "Alpenrose wholesale programs")
                    .url("https://www.alpenrose.com/wholesale"),
            ])
            .follow_ups([
                FollowUp::new(
                    "compare-delivery",
                    "Compare delivery times",
                ),
                FollowUp::new("price-history", "Show price history"),
            ])
            .on_event(cx.listener(
                |_, event: &StreamingTextEvent, _, _| {
                    println!("streaming-text event: {event:?}");
                },
            )),
    )
    .child(
        StreamingText::new("cited-answer", &cited_answer)
            .citations([
                CitationRef::new(
                    "margin-report",
                    "Margin report",
                    "Open the monthly margin report",
                    "app://reports/monthly-margin",
                ),
                CitationRef::new(
                    "supply-forecast",
                    "Supply forecast",
                    "Open the supply forecast",
                    "app://reports/supply-forecast",
                ),
            ])
            .sources(["margin-report.csv", "supply-forecast.md"])
            .on_event(cx.listener(
                |_, event: &StreamingTextEvent, _, _| {
                    println!("citation event: {event:?}");
                },
            )),
    )

Events and ownership

Who owns the state: StreamingText renders state supplied by the application; it does not own durable work.
What it emits: Interactive intent is reported through the typed StreamingTextEvent contract and stable application IDs.
What it means: Selectable streaming Markdown with citations, sources, and follow-ups.
Overflow and motion: Growing content remains reachable in a bounded vertical surface; reduced motion preserves a useful state.

Event types

StreamingTextEvent

What the demo does and does not show

The demo above is the same Rust as the native component, compiled to WebAssembly and drawn on a WebGPU canvas — not a mock-up, a recording, or a re-implementation. What it paints is what the component paints: layout, colour from the live theme, and motion.

The live browser specimen requires WebGPU; the native component remains the authoritative runtime.

A canvas cannot stand in for the platform, so treat everything that goes through the operating system as unproven here: keyboard handling and shortcuts, screen reader semantics, text input and IME, the clipboard, file drops, and the frame rate you would get on your own GPU. Judge those in a native build. If your browser has no WebGPU, the frame says so rather than showing an empty box.