Chat JSX Preview

Inline-рендер JSX-строки от модели с auto-close незакрытых тэгов при streaming.

Стриминг… незакрытые теги закрываются автоматически по мере поступления.

"use client";

import { useEffect, useState } from "react";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { ChatJsxPreview } from "@/components/ui/chat-jsx-preview";

const final = `<div className="flex flex-col gap-3 rounded-xl border p-4 bg-card">
  <div className="flex items-center justify-between">
    <h3 className="font-semibold text-base">Кеширование компонентов</h3>
    <Badge variant="secondary">Новое</Badge>
  </div>
  <p className="text-muted-foreground text-sm">
    Кешируйте результат рендеринга любого серверного компонента с помощью
    директивы <code>"use cache"</code>.
  </p>
  <div className="flex items-center gap-2">
    <Button size="sm">Открыть документацию</Button>
    <Button size="sm" variant="outline">Попробовать</Button>
  </div>
</div>`;

export default function Particle() {
  const [jsx, setJsx] = useState("");
  const [streaming, setStreaming] = useState(true);

  useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i = Math.min(i + 18, final.length);
      setJsx(final.slice(0, i));
      if (i >= final.length) {
        setStreaming(false);
        clearInterval(id);
      }
    }, 60);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="flex w-full max-w-2xl flex-col gap-3 p-4">
      <ChatJsxPreview
        bindings={{}}
        components={{ Badge, Button }}
        isStreaming={streaming}
        jsx={jsx}
      />
      <p className="text-muted-foreground text-xs">
        {streaming
          ? "Стриминг… незакрытые теги закрываются автоматически по мере поступления."
          : "Финальный JSX отрендерен."}
      </p>
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-jsx-preview

Использует react-jsx-parser — добавится в зависимости автоматически.

Использование

import { ChatJsxPreview } from "@/components/ui/chat-jsx-preview";
import { Button } from "@/components/ui/button";
 
<ChatJsxPreview
  components={{ Button }}
  isStreaming={isStreaming}
  jsx={modelJsxOutput}
  onError={(error) => console.warn("JSX preview error:", error)}
/>

Когда isStreaming = true (по умолчанию), компонент автоматически добавляет недостающие закрывающие тэги до того, как модель их выдаст. Это позволяет рендерить частично-сформированный JSX без падений и моргания.

Безопасность

react-jsx-parser исполняет переданный JSX в React-окружении. Любой ввод от модели — это не доверенный контент. Жёстко контролируй то, что передаёшь:

components — белый список React-компонентов, доступных модели. Не добавляй сюда то, что может вызвать побочные эффекты при render.
bindings — значения для выражений. Не пробрасывай функции с доступом к секретам / сети.

Также error boundary внутри ловит любые исключения рендера и показывает fallback вместо краха страницы.

На этой странице

Установка Использование Streaming поведение Безопасность