Response

Streaming markdown renderer with smooth character-by-character animations for AI responses using Streamdown.

"use client"

import { useEffect, useState } from "react"

import { Response } from "@/components/ui/response"

const tokens = [
  "### ZGI Review",
  "\n\n",
  "This",
  " is",
  " a",
  " **structured",
  " agent",
  "**",
  " response",
  " with",
  " multiple",
  " features.",
  "\n\n",
  "---",
  "\n\n",
  "## Workflow Table",
  "\n\n",
  "| Step",
  " | Owner",
  " | Status",
  " |",
  "\n",
  "|------|------|--------|",
  "\n",
  "| Intake",
  " | ZGI Agent",
  " | Active",
  " |",
  "\n",
  "| Review",
  " | PM",
  " | Active",
  " |",
  "\n",
  "| Handoff",
  " | Operator",
  " | Active",
  " |",
  "\n\n",
  "## Decision",
  "\n\n",
  "> Keep",
  " blue",
  " functional",
  " and",
  " reserve",
  " it",
  " for",
  " active",
  " states.",
  "\n",
  "> —",
  " ZGI",
  " Design",
  " System",
  "\n\n",
  "## Inline",
  " and",
  " Block",
  " Code",
  "\n\n",
  "Use",
  " `const",
  " ready",
  " =",
  " tasks.every(Boolean)`",
  " to",
  " confirm",
  " readiness.",
  "\n\n",
  "```",
  "python",
  "\n",
  "def",
  " summarize(workflow):",
  "\n",
  "    return",
  ' f"Ready: {workflow}"',
  "\n",
  'print(summarize("voice intake"))',
  "\n",
  "```",
  "\n\n",
  "## Math",
  "\n\n",
  "Inline",
  " math:",
  " $a^2",
  " +",
  " b^2",
  " =",
  " c^2$",
  ".",
  "\n\n",
  "Displayed",
  " equation:",
  "\n\n",
  "$$",
  "\n",
  "\\int_0^1",
  " x^2",
  " dx",
  " =",
  " \\frac{1}{3}",
  "\n",
  "$$",
  "\n\n",
]

const Example = () => {
  const [content, setContent] = useState("")

  useEffect(() => {
    let currentContent = ""
    let index = 0

    const interval = setInterval(() => {
      if (index < tokens.length) {
        currentContent += tokens[index]
        setContent(currentContent)
        index++
      } else {
        clearInterval(interval)
      }
    }, 100)

    return () => clearInterval(interval)
  }, [])

  return (
    <div className="h-full min-h-0 w-full overflow-hidden">
      <Response className="h-full overflow-auto p-10">{content}</Response>
    </div>
  )
}

export Example

Installation


pnpm dlx shadcn@latest add https://ui.zgi.ai/r/response.json

To ensure the styles are properly applied, you need to configure your Tailwind setup to include Streamdown's source files.

Tailwind v4

Add the following CSS source directive to your globals.css or main CSS file:

globals.css

@source "../node_modules/streamdown/dist/*.js";

Make sure the path matches the location of your node_modules folder relative to your CSS file.

Tailwind v3

Add Streamdown to your content array in your tailwind.config.js:

tailwind.config.js

module.exports = {
  content: ["./node_modules/streamdown/dist/*.js"],
  // ... rest of your config
}

Usage

import { Response } from "@/components/ui/response"

Basic Usage

<Response>This is a simple text response.</Response>

With Markdown

The Response component supports full markdown rendering:

<Response>
  {`# Heading
 
This is a paragraph with **bold** and *italic* text.
 
- List item 1
- List item 2
- List item 3
 
\`\`\`javascript
const greeting = "Hello, world!"
console.log(greeting)
\`\`\`
`}
</Response>

Streaming Response

Perfect for streaming AI responses character-by-character:

const [response, setResponse] = useState("")
 
// As tokens arrive, append to response
const handleStream = (token: string) => {
  setResponse((prev) => prev + token)
}
 
return <Response>{response}</Response>

With Message Component

import { Message, MessageAvatar, MessageContent } from "@/components/ui/message"
import { Response } from "@/components/ui/response"
 
export default ({ streamingResponse }) => (
  <Message from="assistant">
    <MessageAvatar src="/ai-avatar.jpg" name="AI" />
    <MessageContent>
      <Response>{streamingResponse}</Response>
    </MessageContent>
  </Message>
)

API Reference

Response

A memoized wrapper around Streamdown that renders streaming markdown with smooth animations.

Props

Extends all props from the Streamdown component.

Prop	Type	Description
children	`ReactNode`	Content to render (markdown)
className	`string`	Optional CSS classes
...props	`Streamdown`	All Streamdown component props

Notes

Built on top of streamdown for smooth markdown streaming animations
Automatically removes top margin from first child and bottom margin from last child for clean integration
Memoized to prevent unnecessary re-renders - only updates when children change
Supports full markdown syntax including code blocks, lists, tables, and more
Optimized for streaming AI responses with character-by-character rendering
Works seamlessly with the Message component
This component is inspired by Vercel's AI SDK Response component with modifications for ZGI UI

Resource Sidebar Run Node List

On This Page

Installation Tailwind v4 Tailwind v3 Usage Basic Usage With Markdown Streaming Response With Message Component API Reference Response Props Notes

Deploy and Scale Agents with ZGI

ZGI delivers the infrastructure and developer experience you need to ship reliable audio & agent applications at scale.