Web preview

"use client";

import { useEffect, useRef, useState } from "react";
import { SafeContentFrame, type RenderedFrame } from "safe-content-frame";
import type { ToolCallMessagePartComponent } from "@assistant-ui/react";
import { WebPreview } from "@/components/assistant-ui/elements/web-preview";

const frame = new SafeContentFrame("my-app");

export const RenderPreviewToolUI: ToolCallMessagePartComponent<
  Record<string, never>,
  { html: string }
> = ({ result }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const renderedRef = useRef<RenderedFrame>();
  const [origin, setOrigin] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!result || !containerRef.current) return;
    let cancelled = false;
    frame.renderHtml(result.html, containerRef.current).then((rendered) => {
      if (cancelled) return;
      renderedRef.current = rendered;
      setOrigin(new URL(rendered.origin).host);
      rendered.fullyLoadedPromiseWithTimeout(5000).then(() => setLoading(false));
    });
    return () => {
      cancelled = true;
      renderedRef.current?.dispose();
    };
  }, [result]);

  if (!result) return null;

  return (
    <WebPreview
      origin={origin}
      loading={loading}
      onOpenExternal={() => window.open(`https://${origin}`, "_blank", "noopener,noreferrer")}
    >
      <div ref={containerRef} className="h-56" />
    </WebPreview>
  );
};

import { defineToolkit } from "@assistant-ui/react";
import { z } from "zod";
import { RenderPreviewToolUI } from "@/components/assistant-ui/elements/render-preview-tool-ui";

export const toolkit = defineToolkit({
  render_preview: {
    type: "frontend",
    description: "Render a self-contained HTML document as a live preview.",
    parameters: z.object({ html: z.string() }),
    execute: async ({ html }) => ({ html }),
    render: RenderPreviewToolUI,
  },
});

import { AssistantRuntimeProvider, AuiConfig, Tools } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/ai-sdk";
import { toolkit } from "./toolkit";

export function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
  const runtime = useChatRuntime();
  const config = AuiConfig({ tools: Tools({ toolkit }) });
  return (
    <AssistantRuntimeProvider runtime={runtime} config={config}>
      {children}
    </AssistantRuntimeProvider>
  );
}