Stream AI-generated HTML into live, sandboxed previews.

// app/api/chat/route.ts
import { createGoogleGenerativeAI } from "@ai-sdk/google";
import { generateText, streamText } from "ai";
import { createArtifactStreamResponse } from "netra-artifacts/server";

export const dynamic = "force-dynamic";
const google = createGoogleGenerativeAI();

export async function POST(req: Request) {
  const { messages } = await req.json();
  const model = google("gemini-2.5-flash");

  // Streams markdown OR a sandboxed HTML artifact — automatically.
  return createArtifactStreamResponse({
    messages,
    generateTextStream: (args) =>
      streamText({ model, ...args }).textStream,
    generateText: async (args) =>
      (await generateText({ model, ...args })).text,
    mode: "auto",
  });
}

// components/Chat.tsx
"use client";
import { useArtifactStream, ArtifactMessage } from "netra-artifacts/client";

export function Chat() {
  const { messages, artifacts, sendMessage } = useArtifactStream({
    endpoint: "/api/chat",
  });

  return (
    <>
      {messages.map((m) => (
        <ArtifactMessage key={m.id} message={m} artifacts={artifacts} />
      ))}
      <button onClick={() => sendMessage("A pricing page for a SaaS")}>
        Generate UI
      </button>
    </>
  );
}