Stream

Real-time text streaming.

---

Purpose

Display AI output as it generates — character by character or chunk by chunk.

Use <stream> when you want users to understand that the response is still in progress rather than reading a completed block that appears all at once.

---

Try it Live

editor.g

12345678910111213141516171819

Grain document editor

Edit the Grain document and inspect the rendered preview beside it.

<message role="assistant"> <think model="chain-of-thought" visible="false"> The user wants a weather update for Mumbai. </think> <stream>Checking Mumbai weather...</stream> </message> <tool name="get_weather" args='{"city":"Mumbai"}' status="running"> <input>City: Mumbai</input> <progress value="45" max="100">Fetching live conditions</progress> </tool> <tool name="get_weather" status="complete"> <result temperature="28" condition="sunny" humidity="65" /> </tool> <message role="assistant"> <stream>It is 28°C and sunny in Mumbai.</stream> </message>

preview

Interactive preview initializes after hydration.

Interactive preview initializes after hydration. Open the docs preview at /grain/; the site is mounted under the project base path.

---

G-Lang

<stream speed="normal" cursor="true" markdown="false">
  Hello! This text streams in real-time.
</stream>

---

Attributes

Attribute	Type	Default	Description
speed	fast | normal | slow	normal	Streaming speed
cursor	true | false	true	Show blinking cursor
markdown	true | false	false	Parse markdown

---

States

IDLE → GENERATING → COMPLETE
  ↓
PAUSED
  ↓
RESUMING
  ↓
ERROR

---

Events

Event	Payload	Description
stream.start	{ content: string }	Stream began
stream.chunk	{ chunk: string, index: number }	New chunk
stream.complete	{ fullContent: string }	Stream finished
stream.pause	{ index: number }	Stream paused
stream.error	{ error: string }	Stream failed

---

Examples

Basic

<stream>Hello world</stream>

With cursor

<stream cursor="true">Typing...</stream>

Fast streaming

<stream speed="fast">This appears instantly.</stream>

Markdown content

<stream markdown="true">
  # Hello

  This is **bold** and *italic*.

  ~~~javascript
  console.log('Hello');
  ~~~
</stream>

---

Web Output

<grain-stream class="normal" cursor="true" data-speed="normal">
  Hello world
</grain-stream>

---

Related

• Think — Show AI reasoning
• Message — Container for stream
• Playground — Try it live

Production Guidance

• Keep stream content user-facing. Hidden reasoning belongs in <think>, not <stream>.
• Use explicit state transitions so adapters can distinguish active generation, pause, resume, and completion.
• Pair long-running streams with <state> or <tool> when the UI should explain why output is delayed.