### Install Full Quick Start Dependencies

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Installs all required dependencies for the LLM UI quick start guide, including packages for code, React, markdown, and HTML parsing.

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

--------------------------------

### Setup LLM UI Markdown Example

Source: https://github.com/richardgill/llm-ui/blob/main/examples/markdown/vite/README.md

Demonstrates how to set up the LLM UI Markdown example project using various package managers like pnpm, npx, bun, and yarn. This command initializes a new project based on the markdown/vite template.

```bash
pnpx create-llm-ui example markdown/vite llm-ui-markdown-vite-example
```

```bash
npx create-llm-ui example markdown/vite llm-ui-markdown-vite-example
```

```bash
bunx create-llm-ui example markdown/vite llm-ui-markdown-vite-example
```

```bash
yarn create llm-ui example markdown/vite llm-ui-markdown-vite-example
```

--------------------------------

### Setup CSV Example with create-llm-ui

Source: https://github.com/richardgill/llm-ui/blob/main/examples/csv/nextjs/README.md

These commands utilize the create-llm-ui tool to initialize a new project with the CSV block example. They support setup using different package managers like pnpm, npx, bun, and yarn.

```bash
pnpx create-llm-ui example csv/nextjs llm-ui-csv-nextjs-example
```

```bash
npx create-llm-ui example csv/nextjs llm-ui-csv-nextjs-example
```

```bash
bunx create-llm-ui example csv/nextjs llm-ui-csv-nextjs-example
```

```bash
yarn create llm-ui example csv/nextjs llm-ui-csv-nextjs-example
```

--------------------------------

### Create Next.js Example with create-llm-ui

Source: https://github.com/richardgill/llm-ui/blob/main/examples/code/nextjs/README.md

Execute create-llm-ui with pnpm, npm, bun, or yarn to set up the Next.js example project. This command initializes a new project with the specified example template.

```bash
pnpx create-llm-ui example code/nextjs llm-ui-code-nextjs-example
```

```bash
npx create-llm-ui example code/nextjs llm-ui-code-nextjs-example
```

```bash
bunx create-llm-ui example code/nextjs llm-ui-code-nextjs-example
```

```bash
yarn create llm-ui example code/nextjs llm-ui-code-nextjs-example
```

--------------------------------

### Setup Next.js LLM UI Example with Package Managers

Source: https://github.com/richardgill/llm-ui/blob/main/examples/json/nextjs/README.md

Demonstrates how to initialize a Next.js LLM UI example project using the `create-llm-ui` command-line interface. This setup process can be executed with different package managers like pnpm, npm, bun, or yarn.

```bash
pnpx create-llm-ui example json/nextjs llm-ui-json-nextjs-example
```

```bash
npx create-llm-ui example json/nextjs llm-ui-json-nextjs-example
```

```bash
bunx create-llm-ui example json/nextjs llm-ui-json-nextjs-example
```

```bash
yarn create llm-ui example json/nextjs llm-ui-json-nextjs-example
```

--------------------------------

### Setup OpenAI Example (Bash)

Source: https://github.com/richardgill/llm-ui/blob/main/examples/openai/vite-and-express/README.md

Execute the create-llm-ui command with different package managers (pnpm, npx, bunx, yarn) to initialize the OpenAI example project. This sets up a Vite and Express environment for demonstration purposes.

```bash
pnpx create-llm-ui example openai/vite-and-express llm-ui-openai-vite-and-express-example
```

```bash
npx create-llm-ui example openai/vite-and-express llm-ui-openai-vite-and-express-example
```

```bash
bunx create-llm-ui example openai/vite-and-express llm-ui-openai-vite-and-express-example
```

```bash
yarn create llm-ui example openai/vite-and-express llm-ui-openai-vite-and-express-example
```

--------------------------------

### Setup llm-ui CSV Vite Example

Source: https://github.com/richardgill/llm-ui/blob/main/examples/csv/vite/README.md

Execute the following commands to create a new llm-ui project with the CSV block example using Vite. These commands are compatible with pnpm, npm, bun, and yarn package managers.

```bash
pnpx create-llm-ui example csv/vite llm-ui-csv-vite-example
```

```bash
npx create-llm-ui example csv/vite llm-ui-csv-vite-example
```

```bash
bunx create-llm-ui example csv/vite llm-ui-csv-vite-example
```

```bash
yarn create llm-ui example csv/vite llm-ui-csv-vite-example
```

--------------------------------

### Setup OpenAI Next.js Example with create-llm-ui

Source: https://github.com/richardgill/llm-ui/blob/main/examples/openai/nextjs/README.md

Provides commands to set up an OpenAI example project using the create-llm-ui tool with different package managers (pnpm, npx, bunx, yarn). These commands initiate the project creation process for an OpenAI and Next.js integration.

```bash
pnpx create-llm-ui example openai/nextjs llm-ui-openai-nextjs-example
```

```bash
npx create-llm-ui example openai/nextjs llm-ui-openai-nextjs-example
```

```bash
bunx create-llm-ui example openai/nextjs llm-ui-openai-nextjs-example
```

```bash
yarn create llm-ui example openai/nextjs llm-ui-openai-nextjs-example
```

--------------------------------

### Create LLM UI Vite Example

Source: https://github.com/richardgill/llm-ui/blob/main/examples/code/vite/README.md

This section provides commands to initialize a new LLM UI project using the Vite framework. It demonstrates how to use `create-llm-ui` with different package managers like pnpm, npx, bun, and yarn.

```bash
pnpx create-llm-ui example code/vite llm-ui-code-vite-example
```

```bash
npx create-llm-ui example code/vite llm-ui-code-vite-example
```

```bash
bunx create-llm-ui example code/vite llm-ui-code-vite-example
```

```bash
yarn create llm-ui example code/vite llm-ui-code-vite-example
```

--------------------------------

### Setup LLM UI Next.js Example with Vercel AI

Source: https://github.com/richardgill/llm-ui/blob/main/examples/vercel-ai/nextjs/README.md

Execute the `create-llm-ui` command with your preferred package manager (pnpm, npx, bun, or yarn) to scaffold a new LLM UI project. This example specifically sets up a Next.js application integrated with Vercel AI.

```bash
pnpx create-llm-ui example vercel-ai/nextjs llm-ui-vercel-ai-nextjs-example
```

```bash
npx create-llm-ui example vercel-ai/nextjs llm-ui-vercel-ai-nextjs-example
```

```bash
bunx create-llm-ui example vercel-ai/nextjs llm-ui-vercel-ai-nextjs-example
```

```bash
yarn create llm-ui example vercel-ai/nextjs llm-ui-vercel-ai-nextjs-example
```

--------------------------------

### Link to General Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to the main examples directory on GitHub.

```jsx
<GithubLinkButton href={examplesUrl} />
```

--------------------------------

### Install llm-ui Dependencies

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/quick-start.mdx

Installs essential packages for llm-ui, including React components, markdown processing, and code highlighting libraries like Shiki.

```bash
npm install @llm-ui/react @llm-ui/markdown react-markdown remark-gfm @llm-ui/code shiki html-react-parser
```

--------------------------------

### Link to OpenAI Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to examples demonstrating the use of llm-ui with OpenAI on GitHub.

```jsx
<GithubLinkButton href={`${examplesUrl}/openai`} />
```

--------------------------------

### useStreamExample API Documentation

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/advanced/example-hooks.mdx

Details the common options and return values for the `useStreamExample` hook, which simulates LLM streaming output using probabilities for realistic behavior. This includes configuration for automatic starting, delays, and initial display, as well as the hook's output and control functions.

```APIDOC
useStreamExample(example: string, options?: UseStreamExampleOptions)

  - Simulates LLM streaming output with probabilistic delays and token lengths.

  Common Options:
    - autoStart (boolean) (optional): Automatically start the stream when the component mounts.
    - autoStartDelayMs (number) (optional): The delay in milliseconds before the stream starts.
    - startIndex (number) (optional): How many characters of the output are shown to start with.
    - delayMultiplier (number) (optional): All delays sending tokens are multiplied by this value.
    - tokenCharsProbabilities (array) (optional): An array of objects defining token character counts and their probabilities.
      - tokenChars (number): The number of characters to send.
      - prob (number): The probability of this token being sent.
    - delayMsProbabilities (array) (optional): An array of objects defining delays and their probabilities.
      - delayMs (number): The delay in milliseconds before sending the next token.
      - prob (number): The probability of this delay being used.

  Return Value:
    - output (string): The LLM output that has been streamed so far.
    - isStreamStarted (boolean): Returns `true` when the stream has started.
    - isStreamFinished (boolean): Returns `true` when the stream has finished.
    - isPlaying (boolean): Returns `true` when the stream is playing.
    - pause (function): Pauses the stream.
    - reset (function): Resets the stream back to the beginning.
    - start (function): Starts the stream.

  Alias: useStreamWithProbabilities
```

--------------------------------

### Link to Code Block Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to examples demonstrating code block usage with Shiki on GitHub.

```jsx
<GithubLinkButton href={`${examplesUrl}/code`} />
```

--------------------------------

### Link to Markdown Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to the markdown fallback examples on GitHub.

```jsx
<GithubLinkButton href={`${examplesUrl}/markdown`} />
```

--------------------------------

### Quick Start: Copy or GitHub Link

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Provides a component to offer users options to copy code or link to a GitHub repository. This is part of the quick start guide for integrating LLM UI.

```tsx
import CopyOrGithub from "@/components/content/CopyOrGithub";
import { examplesUrl } from "@/constants/constants";

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

--------------------------------

### Create LLM UI JSON Vite Example

Source: https://github.com/richardgill/llm-ui/blob/main/examples/json/vite/README.md

Execute the create-llm-ui command with the 'json/vite' example to bootstrap a new project. This command is available for pnpm, npm, bun, and yarn package managers.

```bash
pnpx create-llm-ui example json/vite llm-ui-json-vite-example
```

```bash
npx create-llm-ui example json/vite llm-ui-json-vite-example
```

```bash
bunx create-llm-ui example json/vite llm-ui-json-vite-example
```

```bash
yarn create llm-ui example json/vite llm-ui-json-vite-example
```

--------------------------------

### Link to Vercel AI Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to examples showing llm-ui integration with Vercel AI (Next.js) on GitHub.

```jsx
<GithubLinkButton href={`${examplesUrl}/vercel-ai/nextjs`} />
```

--------------------------------

### Link to JSON Block Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to examples showing how to use JSON blocks for custom component building on GitHub.

```jsx
<GithubLinkButton href={`${examplesUrl}/code`} />
```

--------------------------------

### Quick Start: Markdown Component Setup

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Sets up a React component to render markdown content using `react-markdown`. This is a foundational step for displaying LLM-generated markdown.

```tsx
import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import htmlParser from "html-react-parser";

interface MarkdownBlockProps {
  content: string;
}

const MarkdownBlock: React.FC<MarkdownBlockProps> = ({ content }) => {
  return (
    <ReactMarkdown remarkPlugins={[remarkGfm]}>
      {content}
    </ReactMarkdown>
  );
};

export default MarkdownBlock;
```

--------------------------------

### Link to CSV Block Examples

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Provides a button to navigate to examples demonstrating CSV block usage for custom component building on GitHub.

```jsx
<GithubLinkButton href={`${examplesUrl}/csv`} />
```

--------------------------------

### Create Next.js llm-ui Example with Package Managers

Source: https://github.com/richardgill/llm-ui/blob/main/examples/markdown/nextjs/README.md

This section provides commands to initialize a new Next.js project with the llm-ui library. It demonstrates how to use `create-llm-ui` with different package managers, including pnpm, npx, bun, and yarn, to set up a markdown example.

```bash
pnpx create-llm-ui example markdown/nextjs llm-ui-markdown-nextjs-example
```

```bash
npx create-llm-ui example markdown/nextjs llm-ui-markdown-nextjs-example
```

```bash
bunx create-llm-ui example markdown/nextjs llm-ui-markdown-nextjs-example
```

```bash
yarn create llm-ui example markdown/nextjs llm-ui-markdown-nextjs-example
```

--------------------------------

### Install @llm-ui/react Package

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/llm-output-hook.mdx

Instructions for installing the necessary package for using the LLM UI components and hooks.

```bash
npm install @llm-ui/react
# or
yarn add @llm-ui/react
# or
pnpm add @llm-ui/react
```

--------------------------------

### Import UI Components and Constants

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/examples.mdx

Imports necessary UI components like GithubLinkButton and constants like examplesUrl for application functionality.

```typescript
import { GithubLinkButton } from "@/components/ui/custom/GithubLinkButton";
import { examplesUrl } from "@/constants/constants";
```

--------------------------------

### useStreamExample Basic Usage

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/advanced/example-hooks.mdx

Demonstrates the basic usage of the `useStreamExample` hook from `@llm-ui/react` to stream LLM output. It shows how to initialize the hook with example text and options, and how to access the streamed output and control states.

```ts
import { useStreamExample } from "@llm-ui/react";

const Example = () => {
  const example = "# Hello llm-ui!";
  const {
    output,
    isStreamStarted,
    isStreamFinished,
    isPlaying,
    pause,
    reset,
    start,
  } = useStreamExample(example, {
    autoStart: true,
    autoStartDelayMs: 1000,
    startIndex: 0,
    delayMultiplier: 2,
  });

  console.log(output);
  // => ""

  // ...later

  console.log(output);
  // => "# Hello"

  // ...later

  console.log(output);
  // => "# Hello llm-ui!"
};

```

--------------------------------

### Generate JSON Block Example

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Generates a single, formatted JSON block example string based on a provided schema and example data. It uses custom start and end characters for the block.

```tsx
import { jsonBlockExample } from "@llm-ui/json";
import z from "zod";

jsonBlockExample({
  schema: z.object({
    type: z.literal("buttons"),
    buttons: z.array(z.object({ text: z.string() })),
  }),
  example: { type: "buttons", buttons: [{ text: "Button 1" }, { text: "Button 2" }] },
  options: {
    type: "buttons",
    startChar: "【",
    endChar: "】",
    typeKey: "type",
    defaultVisible: false,
  },
});
// =>
【{"type":"buttons","buttons":[{"text":"Button 1"},{"text":"Button 2"}]}】
```

--------------------------------

### Example CSV Block Usage Output

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Provides an example of the generated code for using a CSV block, showing how to structure the LLM output for rendering.

```plain
const llmOutput = "Here are some buttons:\n⦅buttons;Star ⭐;Confetti 🎉⦆";
```

--------------------------------

### Quick Start: Prompting LLM for JSON Blocks

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Shows how to generate a prompt for an LLM that instructs it to output JSON for custom blocks. This example specifically targets the 'buttons' block.

```tsx
import { generateJsonPrompt } from "../quickStart";

const prompt = generateJsonPrompt({
  blocks: [
    {
      type: "buttons",
      buttons: [
        { text: "Star ⭐" },
        { text: "Confetti 🎉" },
      ],
    },
  ],
});

console.log(prompt);
```

--------------------------------

### Install CSV Package

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Installs the core @llm-ui/csv package required for CSV block functionality.

```bash
npm install @llm-ui/csv
```

--------------------------------

### Install LLM UI Packages

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Shows how to install necessary LLM UI packages, including the code component and Shiki, using a package manager. This is a prerequisite for using the code block features.

```bash
<PackageInstall client:load packages={["@llm-ui/code", "shiki"]} />
```

--------------------------------

### Install Markdown Package

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/markdown.mdx

Installs the necessary llm-ui markdown package using a package manager. This is a prerequisite for using the markdown block functionality.

```bash
npm install @llm-ui/markdown
# or
yarn add @llm-ui/markdown
# or
pnpm add @llm-ui/markdown
```

--------------------------------

### useStreamExample Probabilistic Options

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/advanced/example-hooks.mdx

Illustrates how to configure `useStreamExample` with probabilistic options for token character counts and delays, allowing for more realistic simulation of LLM streaming behavior.

```ts
const { output } = useStreamExample(example, {
  tokenCharsProbabilities: [
    {
      tokenChars: 1,
      prob: 0.5,
    },
    {
      tokenChars: 2,
      prob: 0.5,
    },
  ],
  delayMsProbabilities: [
    {
      delayMs: 1000,
      prob: 0.5,
    },
    {
      delayMs: 2000,
      prob: 0.5,
    },
  ],
});

```

--------------------------------

### Install CSV Dependencies

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Installs necessary @llm-ui packages and React markdown dependencies for integrating CSV blocks, including markdown rendering and GFM support.

```bash
npm install @llm-ui/csv @llm-ui/react @llm-ui/markdown react-markdown remark-gfm html-react-parser
```

--------------------------------

### Create Code Block Component (tsx)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/quick-start.mdx

Shows how to create a component for rendering code blocks with syntax highlighting using Shiki, a powerful JavaScript syntax highlighter.

```tsx
import React from 'react';
import { CodeBlock } from '@llm-ui/code';
import htmlParser from 'html-react-parser';

interface CodeBlockRendererProps {
  code: string;
  language: string;
}

const CodeBlockRenderer: React.FC<CodeBlockRendererProps> = ({ code, language }) => {
  // Shiki typically returns HTML, which needs to be parsed for React
  const highlightedCode = CodeBlock.highlight(code, language);
  return (
    <div>
      {htmlParser(highlightedCode)}
    </div>
  );
};

export default CodeBlockRenderer;
```

--------------------------------

### useStreamTokenArray API Documentation

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/advanced/example-hooks.mdx

Provides documentation for the `useStreamTokenArray` hook, which allows for complete control over LLM stream simulation by accepting an array of tokens with specified delays.

```APIDOC
useStreamTokenArray(tokens: Array<{ token: string, delayMs: number }>)

  - Accepts an array of tokens with a delay for complete control of the stream.

  Parameters:
    - tokens (array): An array of objects, where each object contains:
      - token (string): The string of characters to stream.
      - delayMs (number): The delay in milliseconds before streaming this token.

  Return Value:
    - output (string): The LLM output that has been streamed so far.
    - isStreamStarted (boolean): Returns `true` when the stream has started.
    - isStreamFinished (boolean): Returns `true` when the stream has finished.
    - isPlaying (boolean): Returns `true` when the stream is playing.
    - pause (function): Pauses the stream.
    - reset (function): Resets the stream back to the beginning.
    - start (function): Starts the stream.

```

--------------------------------

### Basic useLLMOutput Hook Usage

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/llm-output-hook.mdx

Demonstrates the fundamental setup of the `useLLMOutput` hook with essential parameters for processing LLM responses.

```typescript
import { useLLMOutput } from "@llm-ui/react";

const { blockMatches, isFinished, visibleText } = useLLMOutput({
  llmOutput: "llm output",
  blocks: [],
  fallbackBlock: {
    // fallback block configuration
  },
  isStreamFinished: false,
});
```

--------------------------------

### Create Markdown Component (tsx)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/quick-start.mdx

Demonstrates creating a React component to render markdown content using react-markdown and remark-gfm for GitHub Flavored Markdown support.

```tsx
import React from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

interface MarkdownRendererProps {
  content: string;
}

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
  return (
    <ReactMarkdown
      children={content}
      remarkPlugins={[remarkGfm]}
    />
  );
};

export default MarkdownRenderer;
```

--------------------------------

### useStreamTokenArray Usage

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/advanced/example-hooks.mdx

Shows how to use the `useStreamTokenArray` hook by providing a predefined array of tokens and their associated delays for precise control over the streaming output.

```ts
const { output } = useStreamTokenArray([
  { token: "Hel", delayMs: 1000 },
  { token: "lo", delayMs: 2000 },
]);

```

--------------------------------

### Example Side-by-Side Button JSON

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Demonstrates rendering custom buttons using a JSON structure within the ExampleSideBySide component. This example shows the expected format for a 'buttons' block.

```json
{
   "type": "buttons",
   "buttons":[
     { "text": "Star ⭐" },
     { "text": "Confetti 🎉" }
   ]
}
```

--------------------------------

### Generate CSV Block Example Code

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Generates example code for using a CSV block, demonstrating how to call the `generateCsvExample` function with specific options.

```tsx
import { generateCsvExample } from "@llm-ui/csv";

const csvOptions = {
  type: "buttons",
  startChar: "⦅",
  endChar: "⦆",
  delimiter: ",",
  allIndexesVisible: true,
  visibleIndexes: [],
};

const exampleCode = generateCsvExample(csvOptions);
console.log(exampleCode);
```

--------------------------------

### Markdown Block Example Usage

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/markdown.mdx

Demonstrates how to use the Markdown Block component with example markdown content. This component is typically used within an LLM output hook.

```tsx
import { ExampleSideBySide } from "@/components/examples/ExampleMdx";

<ExampleSideBySide
  client:load
  example={`# Demo\n\n**Hello llm-ui!** this is [markdown](https://markdownguide.org)`}
  options={{ delayMultiplier: 1 }}
/>
```

--------------------------------

### Integrate LLM Output Hook (tsx)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/quick-start.mdx

Illustrates using the `useLLMOutput` hook to render language model responses that contain both markdown and code blocks, combining the previously created components.

```tsx
import React from 'react';
import { useLLMOutput } from '@llm-ui/react';
import MarkdownRenderer from './MarkdownRenderer'; // Assuming MarkdownRenderer is in the same directory
import CodeBlockRenderer from './CodeBlockRenderer'; // Assuming CodeBlockRenderer is in the same directory

const LLMOutputDisplay: React.FC = () => {
  const { output, isLoading } = useLLMOutput({
    // Your LLM call or data source here
    prompt: "Explain the concept of recursion.",
  });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  // The output from useLLMOutput is typically a string that might contain markdown and code
  // You would parse this string to render markdown and code blocks appropriately.
  // For simplicity, this example assumes a direct render, but a real implementation
  // would parse the 'output' string to identify markdown and code sections.
  
  // Example of rendering a mixed output (simplified):
  return (
    <div>
      {/* This is a placeholder for actual parsing logic */}
      <MarkdownRenderer content={output} /> 
      {/* A more robust solution would parse 'output' to find code blocks and pass them to CodeBlockRenderer */}
    </div>
  );
};

export default LLMOutputDisplay;
```

--------------------------------

### Install LLM UI JSON Dependencies

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Installs the necessary LLM UI packages for JSON block rendering, including core JSON support, React integration, markdown rendering, and Zod for schema validation.

```bash
npm install @llm-ui/json @llm-ui/react @llm-ui/markdown react-markdown remark-gfm html-react-parser zod
```

--------------------------------

### Configure and use throttleBasic function

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/advanced/throttle-functions.mdx

Shows how to import and configure the built-in throttleBasic function with its various options. Includes an example of passing the configured throttle to useLLMOutput.

```ts
import { throttleBasic, useLLMOutput } from "@llm-ui/react";

const throttle = throttleBasic({
  readAheadChars: 10,
  targetBufferChars: 7,
  adjustPercentage: 0.35,
  frameLookBackMs: 10000,
  windowLookBackMs: 2000,
});

// Assuming 'output', 'blocks', 'fallbackBlock', 'isStreamFinished' are defined
const { blockMatches } = useLLMOutput({
  llmOutput: output,
  blocks: [],
  fallbackBlock,
  isStreamFinished,
  throttle, // <- used here
});
```

--------------------------------

### Dynamic Shiki Import for Next.js (tsx)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/quick-start.mdx

Explains how to use dynamic imports in Next.js to prevent server-side rendering issues with client-side libraries like Shiki, ensuring proper code highlighting.

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

--------------------------------

### Create Markdown Component

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Example of creating a React component to render markdown content, utilizing react-markdown and remark-gfm for enhanced markdown parsing.

```tsx
import { FC } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

interface MarkdownComponentProps {
  content: string;
}

const MarkdownComponent: FC<MarkdownComponentProps> = ({ content }) => (
  <ReactMarkdown remarkPlugins={[remarkGfm]}>{content}</ReactMarkdown>
);

export default MarkdownComponent;
```

--------------------------------

### Example CSV Block Prompt Output

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Shows the expected output prompt generated for an LLM to produce CSV formatted data, specifying block type and delimiters.

```plain
You are a helpful assistant that can output data in CSV format.
Use the following format:
⦅type;column1;column2⦆
⦅buttons;Star ⭐;Confetti 🎉⦆
```

--------------------------------

### Generate JSON Block Prompt

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Creates a full prompt string for sending to an LLM, including a JSON schema, examples, and custom formatting options. It requires a name, Zod schema, examples, and options for customization.

```tsx
import { jsonBlockPrompt } from "@llm-ui/json";
import z from "zod";

jsonBlockPrompt({
  name: "Button",
  schema: z.object({
    type: z.literal("buttons"),
    buttons: z.array(z.object({ text: z.string() })),
  }),
  examples: [
    { type: "buttons", buttons: [{ text: "Button 1" }, { text: "Button 2" }] },
  ],
  options: {
    type: "buttons",
    startChar: "【",
    endChar: "】",
    typeKey: "type",
    defaultVisible: false,
  },
});
// =>
"\nYou can respond with a Button component by wrapping JSON in 【】. 
The JSON schema is:
{"type":"object","properties":{"type":{"type":"string","const":"buttons"},"buttons":{"type":"array","items":{"type":"object","properties":{"text":{"type":"string"}},"required":["text"],"additionalProperties":false}}},"required":["type","buttons"]} 

Examples:
【{"type":"buttons","buttons":[{"text":"Button 1"},{"text":"Button 2"}]}】
"
```

--------------------------------

### Quick Start: Rendering LLM Output with useLLMOutput

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Demonstrates how to use the `useLLMOutput` hook to process and render LLM-generated content, including custom JSON blocks like buttons. It integrates markdown and custom components.

```tsx
import React from "react";
import { useLLMOutput } from "@llm-ui/react";
import MarkdownBlock from "./MarkdownBlock"; // Assuming MarkdownBlock is in the same directory
import ButtonsBlock from "./ButtonsBlock"; // Assuming ButtonsBlock is in the same directory
import { jsonSchema } from "../quickStart"; // Assuming jsonSchema is exported from quickStart

const MyLLMComponent: React.FC = () => {
  const { output } = useLLMOutput({
    prompt: "Generate a response with markdown and buttons.",
    blocks: [
      { schema: jsonSchema, component: ButtonsBlock },
      { component: MarkdownBlock }, // Default markdown handler
    ],
  });

  return <>{output}</>;
};

export default MyLLMComponent;
```

--------------------------------

### Render CSV with Buttons Example

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Demonstrates rendering CSV data with custom buttons using the ExampleSideBySide component. It shows how to define buttons with specific text and emojis.

```tsx
import { ExampleSideBySide } from "@/components/examples/ExampleMdx";

<ExampleSideBySide
  client:load
  example={`Buttons:\n⦅buttons;Star ⭐;Confetti 🎉⦆`}
  options={{ delayMultiplier: 0.2 }}
/>
```

--------------------------------

### Code Block Parsing Options

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Specifies configurable options for code block parsing functions, such as custom start and end delimiters.

```typescript
{
  startEndChars: ["```", "~~~"],
}
```

--------------------------------

### Get Block Matches with useLLMOutput

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/llm-output-hook.mdx

Demonstrates how to use the `useLLMOutput` hook to retrieve `blockMatches` from LLM output. It shows the structure of a `blockMatch` object, including component, output, raw output, visible text, and indexing information.

```typescript
const { blockMatches } = useLLMOutput({
  llmOutput: output,
  blocks: [],
  fallbackBlock,
  isStreamFinished,
});

console.log(blockMatches);
// =>
// [{
//   block: {
//     // The component to render
//     component: ..., 
//     // The block's lookBack function
//     lookBack: ..., 
//   };
//
//   // The LLM output for the block
//   // (possibly modified by the lookback function)
//   output: '{type:"buttons",buttons:[{text:"my bu"}]}',
//
//   // The unmodified LLM output for the block
//   outputRaw: '【{type:"buttons",buttons:[{text:"my bu"}',
//
//   // The visible text for the block
//   visibleText: "my bu",
//
//   // The full LLM output (for all blocks)
//   llmOutput: "...",
//
//   // The start index of the block match in the `llmOutput`
//   startIndex: 0,
//
//   // The end index of the block match in the `llmOutput`
//   endIndex: 21,
//
//   // Is the block complete or partial
//   isComplete: true,
//
//   // priority (index in the `blocks` parameter array)
//   priority: 2
// }]
```

--------------------------------

### JSON Optimization Example

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Demonstrates how to reduce the overhead of JSON blocks by using a more concise format, which can improve parsing performance in applications like llm-ui. This reduces the number of non-content characters, leading to faster parsing.

```plain
【{"type":"buttons","buttons":[{"text":"Button 1"},{"text":...
```

```plain
【{"t":"b","bs":[{"t":"Button 1"},{"t":...
```

--------------------------------

### Render Markdown with CodeBlock Component

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Illustrates how to create a markdown component using react-markdown and integrate it with LLM UI. This snippet shows the basic setup for rendering markdown content.

```tsx
import { CodeBlock } from "@/components/docs/CodeBlock";

<CodeBlock code={markdownQuickStart} lang="tsx" />
```

--------------------------------

### CSV Block `allIndexesVisible: false` Example (Complete)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Shows the behavior when a complete CSV block is parsed with `allIndexesVisible: false`, resulting in `visibleText` and the full `output`.

```plain
Input: ⦅buttons,Button 1,Button 2⦆

blockMatch.visibleText; // => " "
blockMatch.isVisible;   // => true
blockMatch.output;      // => "buttons,Button 1,Button 2"
```

--------------------------------

### CSV Block `allIndexesVisible: true` Example

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Illustrates how `allIndexesVisible: true` affects the parsing of `visibleText` and `output` properties as a partial CSV block is received.

```plain
Input: ⦅buttons,Button 1,But

blockMatch.visibleText; // => "B"
blockMatch.isVisible;   // => true
blockMatch.output;      // => "buttons,B"

// Later...

Input: ⦅buttons,Button 1,Button 1

blockMatch.visibleText; // => "Button 1"
blockMatch.isVisible;   // => true
blockMatch.output;      // => "buttons,Button 1,Button 1"
```

--------------------------------

### CSV Block `allIndexesVisible: false` Example (Partial)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/csv.mdx

Demonstrates the behavior of `allIndexesVisible: false` when a partial CSV block is parsed, showing empty `visibleText` and incomplete `output`.

```plain
Input: ⦅buttons,Button 1,But`

blockMatch.visibleText; // => ""
blockMatch.isVisible;   // => false
blockMatch.output;      // => "buttons,Button 1,But"
```

--------------------------------

### Quick Start: Custom Block Component

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Creates a React component for rendering the 'buttons' block based on the defined JSON schema. It maps the JSON data to UI elements.

```tsx
import React from "react";
import { JsonSchema } from "../quickStart"; // Assuming JsonSchema is exported from quickStart
import CopyExampleButton from "@/components/content/CopyExampleButton.astro";

interface ButtonsBlockProps {
  data: JsonSchema;
}

const ButtonsBlock: React.FC<ButtonsBlockProps> = ({ data }) => {
  return (
    <div className="flex space-x-2">
      {data.buttons.map((button, index) => (
        <button key={index} className="border p-2 rounded">
          {button.text}
        </button>
      ))}
      <CopyExampleButton toCopy={JSON.stringify(data)} />
    </div>
  );
};

export default ButtonsBlock;
```

--------------------------------

### Find Complete Code Block Function

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Locates a complete markdown code block within a given string. It identifies blocks enclosed by start and end delimiters.

```typescript
// Finds a [complete code block](/docs/llm-output-hook#blocks-object) in a string.
// Example:
// ```ts
// console.log('hello llm-ui');
// ```
```

--------------------------------

### Quick Start: JSON Schema Definition with Zod

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Defines a JSON schema for a custom 'buttons' block using Zod. This schema validates the structure and types of the JSON data expected for the buttons component.

```tsx
import { z } from "zod";

export const jsonSchema = z.object({
  type: z.literal("buttons"),
  buttons: z.array(
    z.object({
      text: z.string(),
    })
  ),
});

export type JsonSchema = z.infer<typeof jsonSchema>;
```

--------------------------------

### Find Complete JSON Block

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Searches a string for a complete JSON block, defined by specific start and end characters and a type. It's used to extract fully formed JSON structures.

```tsx
findCompleteJsonBlock({ type: "buttons" });
```

```tsx
// Will match:
// 【{"type":"buttons","buttons":[{"text":"Button 1"},{"text":"Button 2"}]}】
```

--------------------------------

### Display Markdown Code with ExampleSideBySide

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Demonstrates how to display markdown code blocks within an LLM output using the ExampleSideBySide component. This component is designed to showcase code snippets effectively.

```tsx
import { ExampleSideBySide } from "@/components/examples/ExampleMdx";

<ExampleSideBySide
  client:load
  example={"`typescript key=value\nconsole.log('hello llm-ui')`}
  options={{ delayMultiplier: 1 }}
/>
```

--------------------------------

### Create Code Block Component with Shiki

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Demonstrates the creation of a dedicated component for rendering code blocks using Shiki for syntax highlighting. This is a core part of displaying code snippets from LLM outputs.

```tsx
import { CodeBlock } from "@/components/docs/CodeBlock";

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

--------------------------------

### Load Shiki Highlighter with loadHighlighter

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Explains how to proactively load Shiki highlighters using the `loadHighlighter` utility. This function returns an object with synchronous access to the highlighter and a promise for its loading status, ensuring it's ready when needed.

```typescript
import { loadHighlighter } from "@llm-ui/code";
import { getHighlighterCore } from "shiki/core";

const highlighter = loadHighlighter(
  getHighlighterCore({
    // shiki options here
  })
);

// => returns: LLMUIHighlighter
{
  // Get the highlighter synchronously
  getHighlighter: () => HighlighterCore | undefined;

  // Promise that resolves when the highlighter is loaded
  highlighterPromise: Promise<HighlighterCore>;
}
```

--------------------------------

### Process LLM Output into Blocks

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/concepts.mdx

Demonstrates how `useLLMOutput` processes LLM responses by matching them against predefined block configurations. It uses a `blocks` array for specific patterns (e.g., code blocks) and a `fallbackBlock` for unmatched content, typically markdown.

```javascript
import { useLLMOutput } from "@/hooks/useLLMOutput";

// Assume introExampleAllDisplay is a string containing markdown
const introExampleAllDisplay = "# Hello\n\nThis is **markdown**.";

// Define block configurations
const codeBlock = {
  regex: /^```/, // Matches lines starting with ```
  renderer: (content) => `<pre><code>${content}</code></pre>`
};

const markdownBlock = {
  renderer: (content) => `<div>${content}</div>` // Fallback for markdown
};

// Usage within a component
function MyComponent() {
  const llmOutput = "# Title\n\nSome markdown text.\n\n```typescript\nconsole.log('code');\n```";
  const processedBlocks = useLLMOutput(llmOutput, [codeBlock], markdownBlock);

  return (
    <div>
      {/* Render processedBlocks */}
    </div>
  );
}
```

```markdown
# Hello

This is **markdown**.
```

--------------------------------

### Optimize Shiki Bundle Size: Select Themes

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Provides guidance on reducing the Shiki bundle size by selectively importing only the necessary themes, rather than all bundled themes. This is crucial for production environments.

```typescript
// Before:
import { bundledThemes } from "shiki/themes";

// After:
import githubDark from "shiki/themes/github-dark.mjs";

const highlighter = loadHighlighter(
  getHighlighterCore({
    langs: allLangs(bundledLanguages),
    langAlias: allLangsAlias(bundledLanguages),
    themes: [githubDark], // <- fixed!
    loadWasm: getWasm,
  }),
);

```

--------------------------------

### LLM UI Path Configuration for IDEs

Source: https://github.com/richardgill/llm-ui/blob/main/tooling/tsconfig/README.md

This configuration snippet defines path mappings used to help IDEs correctly resolve and navigate source code modules within the LLM UI project. It maps aliases like '@llm-ui/react/*' to their physical locations in the 'packages/react/src/*' directory.

```json
{
  "paths": {
    "@llm-ui/react/*": [
      "packages/react/src/*"
    ]
  }
}
```

--------------------------------

### Fallback Block Configuration

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/llm-output-hook.mdx

Shows how to configure a fallback block, typically used for rendering standard markdown content when no other blocks match.

```tsx
const fallbackBlock = {
  // The component to render when the fallback block is matched.
  // Block match contains information about the match.
  component: ({ blockMatch }) => <div>{blockMatch.block.match}</div>,

  // A lookback function to look backwards in the LLM output for smooth rendering.
  lookBack: ({ output, isComplete, visibleTextLengthTarget, isStreamFinished }) => {
    return {
      // The llm output to return. In some cases this will be the original.
      // In other cases this function may modify the output to make it 'complete'.
      output: "## header 1",
      visibleText: "header 1" // the visible text the user will actually see
    }
  }
}
```

--------------------------------

### Generate Package with pnpm gen

Source: https://github.com/richardgill/llm-ui/blob/main/tooling/gen/readme.md

The `pnpm gen` command is used to create new packages from the root folder of the project. It requires a package name as an argument.

```APIDOC
pnpm gen <package-name>

Description:
  Creates a new package using the 'gen' command from the root folder.

Parameters:
  - package-name: The name for the new package to be generated. This is a required string argument.

Usage Example:
  pnpm gen my-new-package

Notes:
  This command is typically used to bootstrap new components, utilities, or modules within the project structure.
```

--------------------------------

### Render Markdown with LLM Output (Step 2)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/markdown.mdx

Illustrates how to use the `useLLMOutput` hook to render markdown content generated by a language model. It assumes a `MarkdownRenderer` component is set up.

```tsx
import { useLLMOutput } from "@llm-ui/react";
import MarkdownRenderer from "./MarkdownRenderer"; // Assuming MarkdownRenderer is in the same directory

const MyComponent = () => {
  const { output } = useLLMOutput({
    // ... other configurations
    blocks: {
      markdown: MarkdownRenderer,
    },
    // ... other configurations
  });

  return (
    <div>
      {/* Render the LLM output, which will use the MarkdownRenderer for markdown content */}
      {output}
    </div>
  );
};
```

--------------------------------

### Render LLM Output with Markdown and Code

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Shows how to combine markdown and code rendering components, likely using a hook like useLLMOutput, to display language model responses that contain both text and code blocks.

```tsx
import { CodeBlock } from "@/components/docs/CodeBlock";

<CodeBlock code={llmUiOutputQuickStartStep} lang="tsx" />
```

--------------------------------

### Create Markdown Component (Step 1)

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/markdown.mdx

Shows how to create a basic React component that renders markdown using `react-markdown` and `remark-gfm`. This component will be integrated with llm-ui.

```tsx
import React from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";

interface MarkdownRendererProps {
  content: string;
}

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
  return (
    <ReactMarkdown
      children={content}
      remarkPlugins={[remarkGfm]}
    />
  );
};

export default MarkdownRenderer;
```

--------------------------------

### Next.js Client-Side Shiki with Dynamic Imports

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Details the necessary steps for using Shiki client-side within a Next.js application, specifically recommending dynamic imports to prevent server-side rendering issues. This ensures Shiki runs only in the browser.

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

import dynamic from "next/dynamic";

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

export default Page;
```

--------------------------------

### Use Code to HTML Hook

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/code.mdx

Converts a plain code string into highlighted HTML. This hook is simpler than useCodeBlockToHtml as it directly takes code and language.

```typescript
import { useCodeToHtml } from "@llm-ui/code";

const MyComponent = () => {

  const html = useCodeToHtml({
    code: "console.log('llm-ui');",
    highlighter, // highlighter from loadHighlighter function
    codeToHtmlOptions: { lang: 'typescript' }, // Shiki codeToHtmlOptions
  });

  console.log(html);
  // => "<pre class=\"shiki\"...></pre>"

  ...
}
```

--------------------------------

### LLM UI Options: JSON Block Configuration

Source: https://github.com/richardgill/llm-ui/blob/main/apps/www/src/content/docs/blocks/json.mdx

Details the configuration options for handling JSON blocks within LLM UI. This includes specifying delimiters, key names, and visibility behavior.

```json
{
  // Required
  "type": "buttons",
  // Optional, defaults:
  "startChar": "【",
  "endChar": "】",
  "typeKey": "type",
  "defaultVisible": false,
  "visibleKeyPaths": [],
  "invisibleKeyPaths": []
}
```