> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rixxui.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Render accumulated Markdown and structured RUI source in a React application.

## Render Markdown

Import the dedicated Markdown entry point when prose is all you need.

```tsx theme={null}
import { MarkdownRenderer } from "@rixx-ui/react/markdown";
import "@rixx-ui/react/styles.css";

export function AssistantMessage({ markdown, streaming }) {
  return (
    <MarkdownRenderer status={streaming ? "streaming" : "complete"}>
      {markdown}
    </MarkdownRenderer>
  );
}
```

Pass the complete accumulated string on every update. Streaming mode repairs
incomplete Markdown for presentation without executing HTML or MDX.

## Render structured source

```tsx theme={null}
import { RUIRenderer } from "@rixx-ui/react";
import "@rixx-ui/react/styles.css";

const source = `root = Answer(children=[title, body])
title = Heading(text="Welcome", level=1)
body = RichText(format="markdown", text="A **safe** generated answer.")`;

export function StructuredMessage() {
  return <RUIRenderer streamStatus="complete">{source}</RUIRenderer>;
}
```

The normal model-facing format is an assignment fragment. `RUIRenderer` supplies
the trusted envelope and commits the fragment only when
`streamStatus="complete"`.

## Add generation instructions

The config and its instructions come from one definition. Your server includes
those instructions in its own provider request; Rixx UI does not call a model.

```tsx theme={null}
import { coreRUIConfig } from "@rixx-ui/react";

const systemInstructions = coreRUIConfig.instructions(userPrompt);
```

For a custom catalog, continue to
[catalog and registry](/configuration/catalog-and-registry). For a streaming
transport, follow [accumulated streaming](/streaming/accumulated-streaming).