Artifact panel

The side panel that holds something the model made, with a live preview, its code, earlier versions, and copy or download.

Brightdesk pricing page

Pricing section for our site. One plan for now: Pro at $18 a month.

Here's a single Pro card with the three features from your notes.

Add a free Hobby tier next to it.

Added Hobby at $0 on the left, with Pro still highlighted.

And a Team plan at $49 with SSO.

Added Team at $49 with seats, SSO and the audit log. Pro keeps the Popular badge.

Pricing section

pricing.tsx

1const plans = [
2  { name: "Hobby", price: 0, features: ["3 projects", "Community help", "Basic stats"] },
3  { name: "Pro", price: 18, features: ["Unlimited projects", "Custom domain", "Email support"] },
4  { name: "Team", price: 49, features: ["Everything in Pro", "10 seats", "SSO and audit log"] },
5];
6
7export function Pricing() {
8  return (
9    <section className="grid gap-4 sm:grid-cols-3">
10      {plans.map((plan) => (
11        <article key={plan.name} className="rounded-2xl border p-5">
12          <h3 className="text-sm text-zinc-400">{plan.name}</h3>
13          <p className="text-3xl font-semibold">${plan.price}</p>
14          <ul className="mt-4 space-y-2 text-sm">
15            {plan.features.map((f) => <li key={f}>{f}</li>)}
16          </ul>
17          <button className="mt-6 w-full rounded-lg">Choose {plan.name}</button>
18        </article>
19      ))}
20    </section>
21  );
22}

Loading preview…

Install

1
Run this command in your Tailwind CSS project. It adds components/ai/artifact-panel.tsx and installs its dependencies.
$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/artifact-panel.json

Usage & API

Example

artifact-panel.tsx

import { ArtifactPanel } from "@/components/ai/artifact-panel"

<ArtifactPanel
  title="…"
  filename="…"
  versions={[]}
  version="…"
  onVersionChange={() => {}}
  tab={tab}
  onTabChange={() => {}}
/>

Props `ArtifactPanel`

Prop	Type & description	Required
`title`	`string`	Required
`filename`	`string`	Required
`versions`	`ArtifactVersion[]`	Required
`version`	`string`	Required
`onVersionChange`	`(id: string) => void`	Required
`tab`	`ArtifactTab`	Required
`onTabChange`	`(tab: ArtifactTab) => void`	Required
`generatingId`	`string \| null`The version currently being written, if any.	Optional
`progress`	`number`How much of the generating version's code has arrived, 0 to 1.	Optional
`onRegenerate`	`() => void`	Optional
`className`	`string`Frame styling. Pass your own (for example a fixed height and no border) when the panel fills a split view.	Optional

Dependencies

React
Tailwind CSS
motion
lucide-react

Implementation notes

Preview and code is the only arrangement. The header leads with a template icon, the title, and either the filename or the writing line. Version radios sit on the right, one button per entry. Under that, a tablist labelled View holds Preview and Code, then Regenerate when you passed onRegenerate, then Copy, which flips its label to Copied for a short time, then a download button whose accessible name includes the filename. The sample titles the panel Pricing section and names the file pricing.tsx, and places it on the right of a thread called Brightdesk pricing page. Three turns build v1 as Pro alone, v2 as Hobby beside Pro, and v3 as those two plus Team. Chips under the replies select a version and force Preview. On load the sample writes v3 on the Code tab, then moves to Preview unless a tab or a chip was used. The box at the bottom of the thread asks for a change and, on send, runs that rewrite again. Copy always writes the finished source, never the partial text still streaming.

Choosing a layout

Use the panel when the answer is something a person will look at, keep, and ask to change, and the thread is only where the request was typed. A pricing block, a small component, or a section of a page fits, because the same object can be judged visually and read as source. Hold the version array in your own state. When a reply arrives, append or replace an entry, point the selection at it, and if you want the write to be visible, set the generating id and raise progress yourself. The sample rewrites v3 in place: Hobby at $0, Pro at $18 with the Popular badge, and Team at $49 with seats, SSO and an audit log.

A code block is the better fit when the reply is one snippet to read and copy, with no preview and no version list. Web preview is the better fit when the result is a whole page that should be checked at desktop, tablet and phone widths rather than as source. An artifact card is the small control inside the message that points at this panel and opens it. It is not a stand-in for the panel. A diff is the better fit when the model is proposing a patch against a file the person already has, because each hunk can be accepted or rejected on its own. The panel replaces a whole version.

Can someone copy an older version while a newer one is still generating?

Yes, if the selected version is not the one whose id matches the generating id. Copy and Download build the full source from the selected version, and they disable only for that version while it is the one being written. Switching radios does not cancel the write. Regenerate is stricter: it stays disabled for as long as any generating id is set, even if you are looking at a finished version.

What is on screen if Preview is opened before the write finishes?

A skeleton that uses the plan count of the generating version, not the finished cards. Columns appear as progress passes them, and the bar at the bottom matches that fraction. The Code tab in the same moment shows the source prefix, a caret, and a scroller pinned to the newest line. At progress 1 the real pricing section replaces the skeleton. The sample also leaves Code for Preview then, but only if the person has not already picked a tab or opened a version chip.

Web preview

A browser frame for a generated page, with reload and desktop, tablet and phone widths.

Artifact card2 variants

The small card or chip inside a reply that points to an artifact and opens it.