<div className="h-[500px] bg-gradient-to-br from-blue-600 to-purple-600 flex flex-col items-center justify-center text-center p-4">
      <h1 className="text-5xl md:text-6xl font-bold text-white mb-4">
        Welcome to Our Platform
  ...

Installation

pnpm dlx shadcn@latest add https://simple-ai.dev/r/jsx-renderer.json

Usage

import { JsxRenderer } from "@/components/ui/jsx-renderer"

The JSX Renderer component allows you to render JSX strings at runtime, with built-in support for handling incomplete JSX strings. This makes it perfect for streaming AI-generated UI where you want to show the interface being built in real-time.

The component is built on top of react-jsx-parser and includes a special utility function completeJsxTag that automatically completes any incomplete JSX tags, making it ideal for streaming scenarios.

<JsxRenderer
  jsx="<div>Hello World</div>"
  components={{
    CustomButton: MyCustomButton
  }}
  className="w-full"
/>

When streaming JSX content, the component will automatically complete any incomplete tags. For example:

// Incoming incomplete JSX
<div className="p-4">
  <h1>Welcome
 
// Automatically completed as
<div className="p-4">
  <h1>Welcome</h1>
</div>