AI

Response

The Response component renders a Markdown response from a large language model. It uses Streamdown under the hood to render the markdown.

Installation 

npx ai-elements@latest add response

Important: After adding the component, you'll need to add the following to your globals.css file:

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

This is required for the Response component to work properly. Without this import, the Streamdown styles will not be applied to your project. See Streamdown's documentation for more details.

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:

app/page.tsx
'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

Props

<Response />

children:

string
The markdown content to render.

parseIncompleteMarkdown?:

boolean
Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists).

className?:

string
CSS class names to apply to the wrapper div element.

components?:

object
Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components).

allowedImagePrefixes?:

string[]
Array of allowed URL prefixes for images. Use ["*"] to allow all images.

defaultOrigin?:

string
Default origin to use for relative URLs in links and images.

rehypePlugins?:

array
Array of rehype plugins to use for processing HTML. Includes KaTeX for math rendering by default.

remarkPlugins?:

array
Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default.

[...props]?:

React.HTMLAttributes<HTMLDivElement>
Any other props are spread to the root div.