Docs
Markdown block

Markdown block

The markdown block displays markdown content in the LLM output. The markdown block is designed to be used as the fallback block in useLLMOutput which is used if no other block matches.

The markdown block hides markdown syntax from users, only showing one visible character at a time.

Installation

pnpm add @llm-ui/react @llm-ui/markdown react-markdown remark-gfm

Quick start

import { markdownLookBack } from "@llm-ui/markdown";
import {
  LLMOutputFallbackBlock,
  useLLMOutput,
  type LLMOutputComponent,
} from "@llm-ui/react/core";
import { useStreamExample } from "@llm-ui/react/examples";
import ReactMarkdown, { type Options } from "react-markdown";
import remarkGfm from "remark-gfm";

// Customize this component with your own styling
const MarkdownComponent: LLMOutputComponent<Options> = ({
  blockMatch,
  ...props
}) => {
  const markdown = blockMatch.output;
  return (
    <ReactMarkdown
      {...props}
      remarkPlugins={[...(props.remarkPlugins ?? []), remarkGfm]}
    >
      {markdown}
    </ReactMarkdown>
  );
};

const example = `
## Example

**Hello llm-ui!** this is [markdown](https://markdownguide.org)
`;

const Example = () => {
  const { isStreamFinished, output } = useStreamExample(example);

  const { blockMatches } = useLLMOutput({
    llmOutput: output,
    blocks: [],
    fallbackBlock: {
      component: MarkdownComponent,
      lookBack: markdownLookBack,
    },
    isStreamFinished,
  });

  return (
    <div>
      {blockMatches.map((blockMatch, index) => {
        const Component = blockMatch.block.component;
        return <Component key={index} blockMatch={blockMatch} />;
      })}
    </div>
  );
};

Full example

# Example

**Hello llm-ui!** this is [markdown](https://markdownguide.org)

0.3x

Usage with throttle

In order to hide markdown syntax from users, your throttle function must leave enough unrendered characters for the markdown block to parse and hide the syntax.

LLM output hook Code block