React AI Response

Streaming-optimized markdown renderer with syntax highlighting. Build rich AI content with React, Next.js, and TypeScript, featuring auto-completion of incomplete formatting and code blocks for shadcn/ui applications.

AI Elements

React Markdown

Rehype Katex

Remark GFM

Trying to implement AI Elements?

Join our Discord community for help from other developers.

Streaming markdown without smart parsing shows users broken **bold and incomplete [links in React applications. This free open source component auto-completes formatting as content arrives and hides broken elements until ready in Next.js projects.

Intelligent streaming markdown

Auto-completing formatting with syntax highlighting:

Loading component...

'use client';import { Response } from '@/components/ui/shadcn-io/ai/response';import { useEffect, useState } from 'react';const tokens = [  '### Hello',  ' World',  '\n\n',  'This',  ' is',  ' a',  ' **mark',  'down',  '**',  ' response',  ' from',  ' an',  ' AI',  ' model',  '.',  '\n\n',  '---',  '\n\n',  '## Tables',  '\n\n',  '| Column 1',  ' | Column 2',  ' | Column 3',  ' |',  '\n',  '|----------|----------|----------|',  '\n',  '| Row 1, Col 1',  ' | Row 1, Col 2',  ' | Row 1, Col 3',  ' |',  '\n',  '| Row 2, Col 1',  ' | Row 2, Col 2',  ' | Row 2, Col 3',  ' |',  '\n',  '| Row 3, Col 1',  ' | Row 3, Col 2',  ' | Row 3, Col 3',  ' |',  '\n\n',  '## Blockquotes',  '\n\n',  '> This',  ' is',  ' a',  ' blockquote.',  ' It',  ' can',  ' contain',  ' multiple',  ' lines',  ' and',  ' **formatted**',  ' text.',  '\n',  '>',  '\n',  '> It',  ' can',  ' even',  ' have',  ' multiple',  ' paragraphs.',  '\n\n',  '## Inline',  ' Code',  '\n\n',  'Here',  ' is',  ' some',  ' text',  ' with',  ' `inline',  ' code`',  ' in',  ' the',  ' middle',  ' of',  ' a',  ' sentence.',  ' You',  ' can',  ' also',  ' use',  ' `const',  ' x',  ' =',  ' 42`',  ' for',  ' variable',  ' declarations.',  '\n\n',  '## Code',  ' Blocks',  '\n\n',  '```',  'javascript',  '\n',  'const',  ' greeting',  ' = ',  "'Hello, world!'",  ';',  '\n',  'console',  '.',  'log',  '(',  'greeting',  ')',  ';',  '\n',  '```',  '\n\n',  '## Math',  '\n\n',  'It',  ' also',  ' supports',  ' math',  ' equations',  ', ',  'like',  ' this',  ' inline',  ' one',  ': ',  '$',  'E',  ' = ',  'mc',  '^2',  '$',  '.',  '\n\n',  'And',  ' here',  ' is',  ' a',  ' display',  ' equation',  ' for',  ' the',  ' quadratic',  ' formula',  ':',  '\n\n',  '$$',  '\n',  'x',  ' = ',  '\\frac',  '{',  '-b',  ' \\pm',  ' \\sqrt',  '{',  'b^2',  ' -',  ' 4ac',  '}',  '}',  '{',  '2a',  '}',  '\n',  '$$',  '\n\n',  '## Links',  ' and',  ' Lists',  '\n\n',  "Here's",  ' a',  ' [',  'link',  '](',  'https://example.com',  ')',  ' and',  ' some',  ' more',  ' text',  ' with',  ' an',  ' unordered',  ' list',  ':',  '\n\n',  '-',  ' Item',  ' one',  '\n',  '-',  ' Item',  ' two',  '\n',  '-',  ' Item',  ' three',  '\n\n',  '## Ordered',  ' Lists',  '\n\n',  '1.',  ' First',  ' item',  '\n',  '2.',  ' Second',  ' item',  '\n',  '3.',  ' Third',  ' item',];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="w-full">      <Response className="max-h-[500px] overflow-y-auto">        {content}      </Response>    </div>  );};export default Example;

'use client';import { cn } from '@/lib/utils';import type { ComponentProps, HTMLAttributes } from 'react';import { isValidElement, memo } from 'react';import ReactMarkdown, { type Options } from 'react-markdown';import rehypeKatex from 'rehype-katex';import remarkGfm from 'remark-gfm';import remarkMath from 'remark-math';import { CodeBlock, CodeBlockCopyButton } from './code-block';import 'katex/dist/katex.min.css';import hardenReactMarkdown from 'harden-react-markdown';/** * Parses markdown text and removes incomplete tokens to prevent partial rendering * of links, images, bold, and italic formatting during streaming. */function parseIncompleteMarkdown(text: string): string {  if (!text || typeof text !== 'string') {    return text;  }  let result = text;  // Handle incomplete links and images  // Pattern: [...] or ![...] where the closing ] is missing  const linkImagePattern = /(!?\[)([^\]]*?)$/;  const linkMatch = result.match(linkImagePattern);  if (linkMatch) {    // If we have an unterminated [ or ![, remove it and everything after    const startIndex = result.lastIndexOf(linkMatch[1]);    result = result.substring(0, startIndex);  }  // Handle incomplete bold formatting (**)  const boldPattern = /(\*\*)([^*]*?)$/;  const boldMatch = result.match(boldPattern);  if (boldMatch) {    // Count the number of ** in the entire string    const asteriskPairs = (result.match(/\*\*/g) || []).length;    // If odd number of **, we have an incomplete bold - complete it    if (asteriskPairs % 2 === 1) {      result = `${result}**`;    }  }  // Handle incomplete italic formatting (__)  const italicPattern = /(__)([^_]*?)$/;  const italicMatch = result.match(italicPattern);  if (italicMatch) {    // Count the number of __ in the entire string    const underscorePairs = (result.match(/__/g) || []).length;    // If odd number of __, we have an incomplete italic - complete it    if (underscorePairs % 2 === 1) {      result = `${result}__`;    }  }  // Handle incomplete single asterisk italic (*)  const singleAsteriskPattern = /(\*)([^*]*?)$/;  const singleAsteriskMatch = result.match(singleAsteriskPattern);  if (singleAsteriskMatch) {    // Count single asterisks that aren't part of **    const singleAsterisks = result.split('').reduce((acc, char, index) => {      if (char === '*') {        // Check if it's part of a ** pair        const prevChar = result[index - 1];        const nextChar = result[index + 1];        if (prevChar !== '*' && nextChar !== '*') {          return acc + 1;        }      }      return acc;    }, 0);    // If odd number of single *, we have an incomplete italic - complete it    if (singleAsterisks % 2 === 1) {      result = `${result}*`;    }  }  // Handle incomplete single underscore italic (_)  const singleUnderscorePattern = /(_)([^_]*?)$/;  const singleUnderscoreMatch = result.match(singleUnderscorePattern);  if (singleUnderscoreMatch) {    // Count single underscores that aren't part of __    const singleUnderscores = result.split('').reduce((acc, char, index) => {      if (char === '_') {        // Check if it's part of a __ pair        const prevChar = result[index - 1];        const nextChar = result[index + 1];        if (prevChar !== '_' && nextChar !== '_') {          return acc + 1;        }      }      return acc;    }, 0);    // If odd number of single _, we have an incomplete italic - complete it    if (singleUnderscores % 2 === 1) {      result = `${result}_`;    }  }  // Handle incomplete inline code blocks (`) - but avoid code blocks (```)  const inlineCodePattern = /(`)([^`]*?)$/;  const inlineCodeMatch = result.match(inlineCodePattern);  if (inlineCodeMatch) {    // Check if we're dealing with a code block (triple backticks)    const hasCodeBlockStart = result.includes('```');    const codeBlockPattern = /```[\s\S]*?```/g;    const completeCodeBlocks = (result.match(codeBlockPattern) || []).length;    const allTripleBackticks = (result.match(/```/g) || []).length;    // If we have an odd number of ``` sequences, we're inside an incomplete code block    // In this case, don't complete inline code    const insideIncompleteCodeBlock = allTripleBackticks % 2 === 1;    if (!insideIncompleteCodeBlock) {      // Count the number of single backticks that are NOT part of triple backticks      let singleBacktickCount = 0;      for (let i = 0; i < result.length; i++) {        if (result[i] === '`') {          // Check if this backtick is part of a triple backtick sequence          const isTripleStart = result.substring(i, i + 3) === '```';          const isTripleMiddle =            i > 0 && result.substring(i - 1, i + 2) === '```';          const isTripleEnd = i > 1 && result.substring(i - 2, i + 1) === '```';          if (!(isTripleStart || isTripleMiddle || isTripleEnd)) {            singleBacktickCount++;          }        }      }      // If odd number of single backticks, we have an incomplete inline code - complete it      if (singleBacktickCount % 2 === 1) {        result = `${result}\``;      }    }  }  // Handle incomplete strikethrough formatting (~~)  const strikethroughPattern = /(~~)([^~]*?)$/;  const strikethroughMatch = result.match(strikethroughPattern);  if (strikethroughMatch) {    // Count the number of ~~ in the entire string    const tildePairs = (result.match(/~~/g) || []).length;    // If odd number of ~~, we have an incomplete strikethrough - complete it    if (tildePairs % 2 === 1) {      result = `${result}~~`;    }  }  return result;}// Create a hardened version of ReactMarkdownconst HardenedMarkdown = hardenReactMarkdown(ReactMarkdown);export type ResponseProps = HTMLAttributes<HTMLDivElement> & {  options?: Options;  children: Options['children'];  allowedImagePrefixes?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['allowedImagePrefixes'];  allowedLinkPrefixes?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['allowedLinkPrefixes'];  defaultOrigin?: ComponentProps<    ReturnType<typeof hardenReactMarkdown>  >['defaultOrigin'];  parseIncompleteMarkdown?: boolean;};const components: Options['components'] = {  ol: ({ node, children, className, ...props }) => (    <ol className={cn('ml-4 list-outside list-decimal', className)} {...props}>      {children}    </ol>  ),  li: ({ node, children, className, ...props }) => (    <li className={cn('py-1', className)} {...props}>      {children}    </li>  ),  ul: ({ node, children, className, ...props }) => (    <ul className={cn('ml-4 list-outside list-disc', className)} {...props}>      {children}    </ul>  ),  hr: ({ node, className, ...props }) => (    <hr className={cn('my-6 border-border', className)} {...props} />  ),  strong: ({ node, children, className, ...props }) => (    <span className={cn('font-semibold', className)} {...props}>      {children}    </span>  ),  a: ({ node, children, className, ...props }) => (    <a      className={cn('font-medium text-primary underline', className)}      rel="noreferrer"      target="_blank"      {...props}    >      {children}    </a>  ),  h1: ({ node, children, className, ...props }) => (    <h1      className={cn('mt-6 mb-2 font-semibold text-3xl', className)}      {...props}    >      {children}    </h1>  ),  h2: ({ node, children, className, ...props }) => (    <h2      className={cn('mt-6 mb-2 font-semibold text-2xl', className)}      {...props}    >      {children}    </h2>  ),  h3: ({ node, children, className, ...props }) => (    <h3 className={cn('mt-6 mb-2 font-semibold text-xl', className)} {...props}>      {children}    </h3>  ),  h4: ({ node, children, className, ...props }) => (    <h4 className={cn('mt-6 mb-2 font-semibold text-lg', className)} {...props}>      {children}    </h4>  ),  h5: ({ node, children, className, ...props }) => (    <h5      className={cn('mt-6 mb-2 font-semibold text-base', className)}      {...props}    >      {children}    </h5>  ),  h6: ({ node, children, className, ...props }) => (    <h6 className={cn('mt-6 mb-2 font-semibold text-sm', className)} {...props}>      {children}    </h6>  ),  table: ({ node, children, className, ...props }) => (    <div className="my-4 overflow-x-auto">      <table        className={cn('w-full border-collapse border border-border', className)}        {...props}      >        {children}      </table>    </div>  ),  thead: ({ node, children, className, ...props }) => (    <thead className={cn('bg-muted/50', className)} {...props}>      {children}    </thead>  ),  tbody: ({ node, children, className, ...props }) => (    <tbody className={cn('divide-y divide-border', className)} {...props}>      {children}    </tbody>  ),  tr: ({ node, children, className, ...props }) => (    <tr className={cn('border-border border-b', className)} {...props}>      {children}    </tr>  ),  th: ({ node, children, className, ...props }) => (    <th      className={cn('px-4 py-2 text-left font-semibold text-sm', className)}      {...props}    >      {children}    </th>  ),  td: ({ node, children, className, ...props }) => (    <td className={cn('px-4 py-2 text-sm', className)} {...props}>      {children}    </td>  ),  blockquote: ({ node, children, className, ...props }) => (    <blockquote      className={cn(        'my-4 border-muted-foreground/30 border-l-4 pl-4 text-muted-foreground italic',        className      )}      {...props}    >      {children}    </blockquote>  ),  code: ({ node, className, ...props }) => {    const inline = node?.position?.start.line === node?.position?.end.line;    if (!inline) {      return <code className={className} {...props} />;    }    return (      <code        className={cn(          'rounded bg-muted px-1.5 py-0.5 font-mono text-sm',          className        )}        {...props}      />    );  },  pre: ({ node, className, children }) => {    let language = 'javascript';    if (typeof node?.properties?.className === 'string') {      language = node.properties.className.replace('language-', '');    }    // Extract code content from children safely    let code = '';    if (      isValidElement(children) &&      children.props &&      typeof (children.props as any).children === 'string'    ) {      code = (children.props as any).children;    } else if (typeof children === 'string') {      code = children;    }    return (      <CodeBlock        className={cn('my-4 h-auto', className)}        code={code}        language={language}      >        <CodeBlockCopyButton          onCopy={() => console.log('Copied code to clipboard')}          onError={() => console.error('Failed to copy code to clipboard')}        />      </CodeBlock>    );  },};export const Response = memo(  ({    className,    options,    children,    allowedImagePrefixes,    allowedLinkPrefixes,    defaultOrigin,    parseIncompleteMarkdown: shouldParseIncompleteMarkdown = true,    ...props  }: ResponseProps) => {    // Parse the children to remove incomplete markdown tokens if enabled    const parsedChildren =      typeof children === 'string' && shouldParseIncompleteMarkdown        ? parseIncompleteMarkdown(children)        : children;    return (      <div        className={cn(          'size-full [&>*:first-child]:mt-0 [&>*:last-child]:mb-0',          className        )}        {...props}      >        <HardenedMarkdown          allowedImagePrefixes={allowedImagePrefixes ?? ['*']}          allowedLinkPrefixes={allowedLinkPrefixes ?? ['*']}          components={components}          defaultOrigin={defaultOrigin}          rehypePlugins={[rehypeKatex]}          remarkPlugins={[remarkGfm, remarkMath]}          {...options}        >          {parsedChildren}        </HardenedMarkdown>      </div>    );  },  (prevProps, nextProps) => prevProps.children === nextProps.children);Response.displayName = 'Response';

The React component automatically completes incomplete bold, italic, and code formatting during streaming, hides broken links until complete, and renders syntax-highlighted code blocks with copy buttons. Built with TypeScript for type safety and designed for seamless integration in your JavaScript projects.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

npx shadcn@latest add https://www.shadcn.io/registry/ai.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai.json

bunx shadcn@latest add https://www.shadcn.io/registry/ai.json

Usage

import { Response } from "@/components/ai/response";

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

For code blocks, nest markdown inside the Response component:

<Response>
  {`Here's some code:
  
\`\`\`javascript
const greeting = "Hello, world!";
console.log(greeting);
\`\`\`
`}
</Response>

Why streaming markdown is hard

AI responses stream character by character in React applications. Regular markdown parsers show **incomplete bold and [broken links while text arrives in Next.js projects. This looks buggy and unprofessional in JavaScript implementations.

The TypeScript component fixes this by auto-completing formatting tokens and hiding incomplete links until ready. Users see clean text throughout the entire stream in React applications.

Usage with AI SDK

Render streaming AI responses with intelligent formatting in React applications:

"use client";

import {
  Conversation,
  ConversationContent,
} from "@/components/ai/conversation";
import { Message, MessageContent } from "@/components/ai/message";
import {
  PromptInput,
  PromptInputTextarea,
  PromptInputSubmit,
} from "@/components/ai/prompt-input";
import { Response } from "@/components/ai/response";
import { useChat } from "@ai-sdk/react";
import { useState } from "react";

export default function ResponseDemo() {
  const [input, setInput] = useState("");
  const { messages, append, status } = useChat();

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (input.trim()) {
      append({ role: "user", content: input });
      setInput("");
    }
  };

  return (
    <div className="flex flex-col h-full max-w-4xl mx-auto">
      <Conversation>
        <ConversationContent>
          {messages.map((message) => (
            <Message from={message.role} key={message.id}>
              <MessageContent>
                {message.parts?.map((part, i) => {
                  switch (part.type) {
                    case "text":
                      return (
                        <Response key={`${message.id}-${i}`}>
                          {part.text}
                        </Response>
                      );
                    default:
                      return null;
                  }
                })}
              </MessageContent>
            </Message>
          ))}
        </ConversationContent>
      </Conversation>

      <PromptInput onSubmit={handleSubmit}>
        <PromptInputTextarea
          value={input}
          onChange={(e) => setInput(e.currentTarget.value)}
          placeholder="Ask for markdown content..."
        />
        <PromptInputSubmit disabled={!input.trim()} status={status} />
      </PromptInput>
    </div>
  );
}

Backend route for markdown-rich responses:

// app/api/chat/route.ts
import { streamText, convertToModelMessages } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: "openai/gpt-4o",
    messages: convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse();
}

Features

Streaming-optimized parsing - Auto-completes incomplete formatting during streaming in React applications
Rich markdown support - Paragraphs, headers, lists, tables, blockquotes, and more in TypeScript components
Syntax-highlighted code blocks - Multiple programming languages with copy buttons for JavaScript frameworks
Math equation support - LaTeX rendering via rehype-katex in Next.js projects
GFM features - Tables, task lists, strikethrough via remark-gfm
Link and image security - Configurable allowed prefixes for safety
Intelligent hiding - Incomplete links and images hidden until complete
Responsive design - Adapts to different screen sizes while maintaining readability
Theme-aware styling - Works seamlessly in light and dark modes
Accessibility focused - Proper semantic HTML and screen reader support
Perfect for AI assistants and conversational AI interfaces - Built specifically for streaming AI content
Free open source component built for Next.js with shadcn/ui design system and AI Elements
Optimized for Vercel AI SDK streaming and AI chat applications

API Reference

Response

Markdown renderer with intelligent streaming support.

Prop	Type	Default	Description
`children`	`string \| ReactNode`	-	Required - Markdown content to render
`options`	`ReactMarkdown["options"]`	-	React Markdown configuration options
`allowedImagePrefixes`	`string[]`	`["*"]`	Allowed image URL prefixes for security
`allowedLinkPrefixes`	`string[]`	`["*"]`	Allowed link URL prefixes for security
`defaultOrigin`	`string`	-	Default origin for relative URLs
`parseIncompleteMarkdown`	`boolean`	`true`	Enable intelligent streaming parsing
`className`	`string`	-	Additional CSS classes
`...props`	`HTMLAttributes<HTMLDivElement>`	-	Standard div attributes

Streaming optimizations

The Response component includes several intelligent parsing features:

Auto-completion of incomplete formatting

Bold: **incomplete → **incomplete** (auto-closed)
Italic: *incomplete → *incomplete* (auto-closed)
Strikethrough: ~~incomplete → ~~incomplete~~ (auto-closed)
Inline code: `incomplete → `incomplete` (auto-closed)

Hiding incomplete elements

Links: [incomplete text (hidden until ] appears)
Images: ![incomplete alt (hidden until ] appears)
Code blocks: Protects triple backticks from inline code completion

Smart parsing behavior

Only applies during streaming when parseIncompleteMarkdown={true} in React applications
Preserves code block boundaries to prevent interference in TypeScript components
Counts formatting tokens to determine completion needs in JavaScript implementations
Works with both single and double character formatters in Next.js projects

Security considerations

Always validate allowed prefixes. The default ["*"] allows all URLs in React applications. In production, restrict to trusted domains in Next.js projects:

<Response
  allowedImagePrefixes={["https://yourdomain.com", "https://cdn.example.com"]}
  allowedLinkPrefixes={["https://", "mailto:"]}
>
  {content}
</Response>

Content sanitization is built-in. The React component uses harden-react-markdown for XSS protection in TypeScript implementations.

Integration with other components

Response works seamlessly with Message for chat interfaces in React applications. Use within Conversation for scrolling markdown content in Next.js projects. Combine with CodeBlock for enhanced code display. This free open source component integrates seamlessly with modern JavaScript frameworks.

Intelligent streaming markdown

Installation

Usage

Why streaming markdown is hard

Usage with AI SDK

Features

API Reference

Response

Streaming optimizations

Auto-completion of incomplete formatting

Hiding incomplete elements

Smart parsing behavior

Security considerations

Integration with other components

Questions developers actually ask

On this page

React AI Response

Reactai/response

How does the streaming optimization work?

Which programming languages are supported for syntax highlighting?

How do I render LaTeX math equations?

Can I customize the rendered HTML components?

Does the parsing affect streaming performance?

On this page