Response

PreviousNext

Render markdown responses with streaming support for AI assistants.

Welcome to Response

This component renders markdown content with streaming support.

Features

  • Streaming: Progressive rendering as content arrives
  • Markdown: Full markdown syntax support
  • Performance: Optimized for real-time updates
typescript

This is a quote from the AI assistant

  • List item 1
  • List item 2
  • List item 3
import { Response } from "@/components/ai-elements/response"

export function ResponseDemo() {
  const markdown = `# Welcome to Response

This component renders markdown content with streaming support.

## Features

- **Streaming**: Progressive rendering as content arrives
- **Markdown**: Full markdown syntax support
- **Performance**: Optimized for real-time updates

\`\`\`typescript
const message = "Hello, World!"
console.log(message)
\`\`\`

> This is a quote from the AI assistant

- List item 1
- List item 2
- List item 3`

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Response>{markdown}</Response>
    </div>
  )
}

Installation

pnpm dlx shadcn@latest add response

Usage

import { Response } from "@/components/ai-elements/response"
const markdown = `# Heading
 
This is **bold** and this is *italic*.
 
\`\`\`typescript
const hello = "world"
\`\`\`
`
 
<Response>{markdown}</Response>

Examples

Default

Welcome to Response

This component renders markdown content with streaming support.

Features

  • Streaming: Progressive rendering as content arrives
  • Markdown: Full markdown syntax support
  • Performance: Optimized for real-time updates
typescript

This is a quote from the AI assistant

  • List item 1
  • List item 2
  • List item 3
import { Response } from "@/components/ai-elements/response"

export function ResponseDemo() {
  const markdown = `# Welcome to Response

This component renders markdown content with streaming support.

## Features

- **Streaming**: Progressive rendering as content arrives
- **Markdown**: Full markdown syntax support
- **Performance**: Optimized for real-time updates

\`\`\`typescript
const message = "Hello, World!"
console.log(message)
\`\`\`

> This is a quote from the AI assistant

- List item 1
- List item 2
- List item 3`

  return (
    <div className="w-full max-w-2xl space-y-4">
      <Response>{markdown}</Response>
    </div>
  )
}

With Streaming

"use client"
 
import { useState, useEffect } from "react"
import { Response } from "@/components/ai-elements/response"
 
export default function Example() {
  const [content, setContent] = useState("")
  
  useEffect(() => {
    // Simulate streaming
    const fullText = "# Hello\n\nThis is streaming content..."
    let index = 0
    
    const interval = setInterval(() => {
      if (index < fullText.length) {
        setContent(fullText.slice(0, index + 1))
        index++
      } else {
        clearInterval(interval)
      }
    }, 50)
    
    return () => clearInterval(interval)
  }, [])
  
  return <Response>{content}</Response>
}

Features

  • Markdown Support: Full markdown syntax support
  • Streaming: Optimized for progressive rendering
  • Performance: Memoized to prevent unnecessary re-renders
  • Styling: Pre-styled for AI chat interfaces

API Reference

Response

Markdown renderer with streaming support.

PropTypeDefaultDescription
childrenstring-Markdown content to render
classNamestring-Custom CSS classes