Response

The Response component renders a Markdown response from a large language model.

Installation

npx ai-elements@latest add response

Usage

import { Response } from '@/components/ai-elements/response';

<Response>**Hi there.** I am an AI model designed to help you.</Response>

Usage with AI SDK

Populate a markdown response with messages from useChat.

Add the following component to your frontend:

'use client';

import {
  Conversation,
  ConversationContent,
  ConversationScrollButton,
} from '@/components/ai-elements/conversation';
import { Message, MessageContent } from '@/components/ai-elements/message';
import { useChat } from '@ai-sdk/react';
import { Response } from '@/components/ai-elements/response';

const ResponseDemo = () => {
  const { messages } = useChat();

  return (
    <div className="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
      <div className="flex flex-col h-full">
        <Conversation>
          <ConversationContent>
            {messages.map((message) => (
              <Message from={message.role} key={message.id}>
                <MessageContent>
                  {message.parts.map((part, i) => {
                    switch (part.type) {
                      case 'text': // we don't use any reasoning or tool calls in this example
                        return (
                          <Response key={`${message.id}-${i}`}>
                            {part.text}
                          </Response>
                        );
                      default:
                        return null;
                    }
                  })}
                </MessageContent>
              </Message>
            ))}
          </ConversationContent>
          <ConversationScrollButton />
        </Conversation>
      </div>
    </div>
  );
};

export default ResponseDemo;

Features

• Renders markdown content with support for paragraphs, links, and code blocks
• Supports GFM features like tables, task lists, and strikethrough text via remark-gfm
• Supports rendering Math Equations via rehype-katex
• Smart streaming support - automatically completes incomplete formatting during real-time text streaming
• Code blocks are rendered with syntax highlighting for various programming languages
• Code blocks include a button to easily copy code to clipboard
• Adapts to different screen sizes while maintaining readability
• Seamlessly integrates with both light and dark themes
• Customizable appearance through className props and Tailwind CSS utilities
• Built with accessibility in mind for all users

Streaming-Optimized Markdown Parsing

The Response component includes intelligent parsing that enhances the streaming experience by:

• Auto-completing incomplete formatting: Bold (**), italic (*, _, __), strikethrough (~~), and inline code (`) are automatically completed during streaming
• Hiding incomplete links: Unterminated links ([text) and images (![alt) are hidden until complete to prevent broken syntax display
• Preserving code blocks: Triple backtick code blocks (```) are protected from inline code completion interference
• Real-time formatting: Users see properly formatted text as it streams, creating a smoother experience

Props

<Response />