Artifact panelNew

$pnpm dlx shadcn@latest add @nextui/artifact-panel

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { useState } from "react";
4import { ArtifactPanel, type ArtifactVersion } from "@/components/nextui/artifact-panel";
5
6// Keep every version the agent writes; the newest one streams while the agent is busy.
7export function Workspace({ versions, writing }: { versions: ArtifactVersion[]; writing: boolean }) {
8  const [version, setVersion] = useState<number>();
9
10  return (
11    <div className="grid gap-4 lg:grid-cols-[1fr_32rem]">
12      {/* chat on the left */}
13      <ArtifactPanel
14        title="pricing-card.tsx"
15        kind="Component"
16        versions={versions}
17        version={version ?? versions.length - 1}
18        onVersionChange={setVersion}
19        streaming={writing}
20      />
21    </div>
22  );
23}