# Response

URL: /components/response

---

title: Response
description: A component that renders a Markdown response from a large language model.
path: elements/components/response

---

The `Response` component renders a Markdown response from a large language model. It uses [Streamdown](https://streamdown.ai/) under the hood to render the markdown.

<Preview path="response" />

## Installation

<ElementsInstaller path="response" />

<Callout label={false} type="warning">
  **Important:** After adding the component, you'll need to add the following to your `globals.css` file:

```css
@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](https://streamdown.ai/) for more details.
</Callout>

## Usage

```tsx
import { Response } from "@/components/ai-elements/response";
```

```tsx
<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`](/docs/reference/ai-sdk-ui/use-chat).

Add the following component to your frontend:

```tsx title="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 />`

<TypeTable
type={{
  children: {
    description: 'The markdown content to render.',
    type: 'string',
  },
  parseIncompleteMarkdown: {
    description: 'Whether to parse and fix incomplete markdown syntax (e.g., unclosed code blocks or lists).',
    type: 'boolean',
    default: 'true',
  },
  className: {
    description: 'CSS class names to apply to the wrapper div element.',
    type: 'string',
  },
  components: {
    description: 'Custom React components to use for rendering markdown elements (e.g., custom heading, paragraph, code block components).',
    type: 'object',
  },
  allowedImagePrefixes: {
    description: 'Array of allowed URL prefixes for images. Use ["*"] to allow all images.',
    type: 'string[]',
    default: '["*"]',
  },
  allowedLinkPrefixes: {
    description: 'Array of allowed URL prefixes for links. Use ["*"] to allow all links.',
    type: 'string[]',
    default: '["*"]',
  },
  defaultOrigin: {
    description: 'Default origin to use for relative URLs in links and images.',
    type: 'string',
  },
  rehypePlugins: {
    description: 'Array of rehype plugins to use for processing HTML. Includes KaTeX for math rendering by default.',
    type: 'array',
    default: '[rehypeKatex]',
  },
  remarkPlugins: {
    description: 'Array of remark plugins to use for processing markdown. Includes GitHub Flavored Markdown and math support by default.',
    type: 'array',
    default: '[remarkGfm, remarkMath]',
  },
  '...props': {
    description: 'Any other props are spread to the root div.',
    type: 'React.HTMLAttributes<HTMLDivElement>',
  },
}}
/>