"use client"; import { JSXPreview, JSXPreviewContent, JSXPreviewError, } from "@/components/ai-elements/jsx-preview"; import { Button } from "@/registry/default/ui/button"; import { useCallback, useEffect, useRef, useState } from "react"; const handleError = (error: Error) => { console.log("JSX Parse Error:", error); }; const fullJsx = `

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

`; const Example = () => { const [streamedJsx, setStreamedJsx] = useState(fullJsx); const [isStreaming, setIsStreaming] = useState(false); const intervalRef = useRef | null>(null); const simulateStreaming = useCallback(() => { setIsStreaming(true); setStreamedJsx(""); let index = 0; if (intervalRef.current) { clearInterval(intervalRef.current); } intervalRef.current = setInterval(() => { if (index < fullJsx.length) { setStreamedJsx(fullJsx.slice(0, index + 15)); index += 15; } else { setIsStreaming(false); if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } } }, 30); }, []); useEffect( () => () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }, [] ); return (

); }; export default Example;

Code Blocks - Jsx Preview Blocks

Select an Item to view its code