JSX Preview

A component that dynamically renders JSX strings with streaming support for AI-generated UI.

The JSXPreview component renders JSX strings dynamically, supporting streaming scenarios where JSX may be incomplete. It automatically closes unclosed tags during streaming, making it ideal for displaying AI-generated UI components in real-time.

See scripts/jsx-preview.tsx for this example.

npx ai-elements@latest add jsx-preview

• Renders JSX strings dynamically using react-jsx-parser
• Streaming support with automatic tag completion
• Custom component injection for rendering your own components
• Error handling with customizable error display
• Context-based architecture for flexible composition

The JSXPreview component integrates with the AI SDK to render generated UI in real-time:

Create val
"use client";

import {
  JSXPreview,
  JSXPreviewContent,
  JSXPreviewError,
} from "@/components/ai-elements/jsx-preview";

type GeneratedUIProps = {
  jsx: string;
  isStreaming: boolean;
};

export const GeneratedUI = ({ jsx, isStreaming }: GeneratedUIProps) => (
  <JSXPreview
    jsx={jsx}
    isStreaming={isStreaming}
    onError={(error) => console.error("JSX Parse Error:", error)}
  >
    <JSXPreviewContent />
    <JSXPreviewError />
  </JSXPreview>
);

You can inject custom components to be used within the rendered JSX:

Create val
"use client";

import {
  JSXPreview,
  JSXPreviewContent,
} from "@/components/ai-elements/jsx-preview";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

const customComponents = {
  Button,
  Card,
};

export const GeneratedUIWithComponents = ({ jsx }: { jsx: string }) => (
  <JSXPreview jsx={jsx} components={customComponents}>
    <JSXPreviewContent />
  </JSXPreview>
);