Docs
Quick start

Quick start

Setup llm-ui with code and markdown blocks:

## Python

```python
print('Hello llm-ui!')
```

## Typescript

```typescript
console.log('Hello llm-ui!');
```

1.0x

Install dependencies

pnpm add @llm-ui/react @llm-ui/markdown react-markdown remark-gfm @llm-ui/code shiki html-react-parser

Setup

View on GitHub

Step 1: Create a markdown component

Create a component to render markdown using react-markdown.

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


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

Read more in the markdown block docs

Step 2: Create a code block component

Create a component to render code blocks using Shiki.

import type { CodeToHtmlProps } from "@llm-ui/code";
import { loadHighlighter, useCodeBlockToHtml } from "@llm-ui/code";
import { allLangs, allLangsAlias } from "@llm-ui/code/shikiBundles/allLangs";
// WARNING: Importing allThemes increases your bundle size
// see: https://llm-ui.com/docs/blocks/code#bundle-size
import { allThemes } from "@llm-ui/code/shikiBundles/allThemes";
import { type LLMOutputComponent } from "@llm-ui/react/core";
import parseHtml from "html-react-parser";
import { getHighlighterCore } from "shiki/core";
import getWasm from "shiki/wasm";

const highlighter = loadHighlighter(
  getHighlighterCore({
    langs: allLangs,
    langAlias: allLangsAlias,
    themes: allThemes,
    loadWasm: getWasm,
  }),
);

const codeToHtmlProps: CodeToHtmlProps = {
  // @ts-ignore
  theme: "github-dark",
};

// Customize this component with your own styling
const CodeBlock: LLMOutputComponent = ({ blockMatch }) => {
  const { html, code } = useCodeBlockToHtml({
    markdownCodeBlock: blockMatch.output,
    highlighter,
    codeToHtmlProps,
  });
  if (!html) {
    // fallback to <pre> if Shiki is not loaded yet
    return (
      <pre className="shiki">
        <code>{code}</code>
      </pre>
    );
  }
  return <>{parseHtml(html)}</>;
};

Read more in the code block docs

Step 3: Render markdown and code with llm-ui

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

import {
  codeBlockLookBack,
  findCompleteCodeBlock,
  findPartialCodeBlock,
} from "@llm-ui/code";
import { markdownLookBack } from "@llm-ui/markdown";
import { useLLMOutput } from "@llm-ui/react/core";
import { useStreamExample } from "@llm-ui/react/examples";

const example = `## Python

\`\`\`python
print('Hello llm-ui!')
\`\`\`
...continues...
`;

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

  const { blockMatches } = useLLMOutput({
    llmOutput: output,
    fallbackBlock: {
      component: MarkdownComponent, // from Step 1
      lookBack: markdownLookBack(),
    },
    blocks: [
      {
        component: CodeBlock, // from Step 2
        findCompleteMatch: findCompleteCodeBlock(),
        findPartialMatch: findPartialCodeBlock(),
        lookBack: codeBlockLookBack(),
      },
    ],
    isStreamFinished,
  });

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

Read more in the useLLMOutput docs

Introduction Concepts