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.
AI
AI-Generated Component
Rendered from JSX string
This component was dynamically rendered from a JSX string. The JSXPreview component supports streaming mode, automatically closing unclosed tags as content arrives.
React
Streaming
Dynamic
Generated just now
Installation
npx ai-elements@latest add jsx-preview
Features
- 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
Usage with AI SDK
The JSXPreview component integrates with the AI SDK to render generated UI in real-time:
"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>
);With Custom Components
You can inject custom components to be used within the rendered JSX:
"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>
);Props
<JSXPreview />
Prop
Type
<JSXPreviewContent />
Prop
Type
<JSXPreviewError />
Prop
Type