Next.js

Import global styles from the root layout.

// app/layout.tsx
import type { ReactNode } from "react";
import "@rixx-ui/react/styles.css";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Render interactive content from a Client Component.

// app/assistant-message.tsx
"use client";

import { RUIRenderer, type RUIStreamStatus } from "@rixx-ui/react";

export function AssistantMessage({
  source,
  status,
}: {
  source: string;
  status: RUIStreamStatus;
}) {
  return <RUIRenderer streamStatus={status}>{source}</RUIRenderer>;
}

Server Components may import server-safe helpers without importing React components:

import { fromMarkdown } from "@rixx-ui/react/server";

export default function Page() {
  const source = fromMarkdown("# Server-produced source");
  return <AssistantMessage source={source} status="complete" />;
}

Do not pass functions such as urlPolicy, imagePolicy, or action handlers across the Server Component serialization boundary. Define them in the Client Component. Keep model credentials and provider calls in server-only host code; they are not renderer configuration.

Vite React 18 and React 19

⌘I

Get started

Render content

Configure Rixx UI

Frameworks and tools

Security

API reference

Architecture

Project