Installation

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

Usage

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";

const example = `
## Example

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

const MarkdownComponent: LLMOutputComponent<Options> = ({
  blockMatch,
  ...props
}) => {
  const markdown = blockMatch.output;
  return (
    <ReactMarkdown
      {...props}
      remarkPlugins={[...(props.remarkPlugins ?? []), remarkGfm]}
    >
      {markdown}
    </ReactMarkdown>
  );
};

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>
  );
};