Response

Overview

Response renders an assistant reply from a markdown string. It wraps Streamdown, which parses incomplete markdown as it streams — a half-typed **bold** or an unclosed code fence renders as text, not raw source, and snaps into place once the token completes — so a token-by-token stream never flickers. The output is dressed in the kit's voice: type-body on on-surface, links in primary, inline code and rules on the tonal surface-container / outline-variant. Drop it inside a BubbleContent, or bare in a Message row.

export function greet(name: string) {  return `Hello, ${name}!`;}

Examples

Streaming

Streamdown parses partial markdown on every keystroke of the stream, so formatting settles smoothly instead of popping in.

Usage with the AI SDK

Map each assistant message part to a Response:

import { Response } from "@/components/ui/response";
import { useChat } from "@ai-sdk/react";

function Chat() {
  const { messages } = useChat();

  return messages.map((message) => (
    <div key={message.id}>
      {message.parts.map((part, i) =>
        part.type === "text" ? (
          <Response key={i}>{part.text}</Response>
        ) : null,
      )}
    </div>
  ));
}

Installation

npx morpha-ui add response

Streamdown's utility classes are scanned by Tailwind via an @source line in app/global.css; the CLI adds it for you.

API Reference

Accessibility

• Response output is plain semantic HTML (headings, lists, tables, links), so it is navigable by assistive tech out of the box.
• Links render with a visible underline in addition to the primary color, so they don't rely on color alone.