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.

Features

# Demo

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

1x
  • Streamed markdown support
  • Markdown syntax hidden from users e.g. ## for headers
  • Show’s one visible character at a time

Installation

pnpm add @llm-ui/markdown

Quick start

View on GitHub

Install dependencies

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

Step 1: Create a markdown component

Create a component to render markdown using react-markdown.

import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { type LLMOutputComponent } from "@llm-ui/react";


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

Step 2: Render markdown with llm-ui

Now we’ve created our markdown component, we’re ready to use useLLMOutput to render a language model output which contains markdown.

import {
  useLLMOutput,
} from "@llm-ui/react";
import { markdownLookBack } from "@llm-ui/markdown";
import { useStreamExample } from "@llm-ui/react";


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, // from Step 1
      lookBack: markdownLookBack(),
    },
    isStreamFinished,
  });

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

export default Example

Read more in the useLLMOutput docs

Markdown block functions

markdownLookBack

Look back function for the markdown block.

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.

Concepts Code block