---
title: Quick start
description: ""
---

import { PackageInstall } from "../../components/docs/PackageInstall";
import { ExampleSideBySide } from "@/components/examples/ExampleMdx";
import CopyDocsContainer from "@/components/content/CopyDocsContainer.astro";
import CopyExampleButton from "@/components/content/CopyExampleButton.astro";
import { CopyButton } from "@/components/ui/custom/CopyButton";
import { GithubLinkButton } from "@/components/ui/custom/GithubLinkButton";
import {
  markdownQuickStart,
  codeblockQuickstart,
  llmUiOutputQuickStart,
  llmUiOutputQuickStartStep,
  introExampleAllDisplay,
  fullQuickStart,
} from "../../snippets/quickStart";
import CopyOrGithub from "@/components/content/CopyOrGithub.astro";
import { examplesUrl } from "@/constants/constants";

Setup llm-ui with code and markdown blocks:

<ExampleSideBySide
  client:load
  example={introExampleAllDisplay}
  options={{ delayMultiplier: 1 }}
/>

# Install dependencies

<PackageInstall
  client:load
  packages={[
    "@llm-ui/react",
    "@llm-ui/markdown",
    "react-markdown",
    "remark-gfm",
    "@llm-ui/code",
    "shiki",
    "html-react-parser",
  ]}
/>

# Setup

<CopyOrGithub codeToCopy={fullQuickStart} githubUrl={`${examplesUrl}/code`} />

## Step 1: Create a markdown component

Create a component to render markdown using `react-markdown`.

<CodeBlock code={markdownQuickStart} lang="tsx" />
<CopyDocsContainer>
  <CopyExampleButton toCopy={fullQuickStart} />
  Read more in the [markdown block docs](/docs/blocks/markdown)
</CopyDocsContainer>

## Step 2: Create a code block component

Create a component to render code blocks using [Shiki](https://shiki.style).

<CodeBlock code={codeblockQuickstart} lang="tsx" />

<CopyDocsContainer>
  <CopyExampleButton toCopy={fullQuickStart} />
  Read more in the [code block docs](/docs/blocks/code)
</CopyDocsContainer>

## Step 3: Render markdown and code with llm-ui

Now we've created our components, we're ready to use [useLLMOutput](/docs/llm-output-hook) to render language model output which contains markdown and code.

<CodeBlock code={llmUiOutputQuickStartStep} lang="tsx" />
<CopyDocsContainer>
  <CopyExampleButton toCopy={fullQuickStart} />
  Read more in the [useLLMOutput docs](/docs/llm-output-hook)
</CopyDocsContainer>

# Setting up Shiki with Next.js

To use shiki client-side with next.js you must use [dynamic imports](https://nextjs.org/docs/app/building-your-application/optimizing/lazy-loading#skipping-ssr) to avoid server-side-rendering.

<CodeBlockInline>

```tsx
// file: app/page.tsx

import dynamic from "next/dynamic";

const Page = () => {
  // Code which uses Shiki for code highlighting must be imported dynamically
  const Example = dynamic(() => import("./example"), { ssr: false });
  return <Example />;
};

export default Page;
```

</CodeBlockInline>

Read more about setting up Shiki in the [code block docs](/docs/blocks/code#shiki-setup).
