AI Artifact

AI chats 18

About

Generated-artifact frame whose preview and code panes swap along a shared axis rather than cross-fading, with copy built in. Respects prefers-reduced-motion.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds AI Artifact to your project and fits it to your theme.

Code

How AI Artifact is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Component from "@/components/ui/ai-artifact";

export default function DemoOne() {
  return (
    <div className="flex min-h-[460px] w-full items-center justify-center bg-background p-10">
      <div className="w-full max-w-lg rounded-2xl border bg-card p-5 shadow-sm">
        <Component
          code={
            <pre className="overflow-x-auto text-xs leading-relaxed">
              <code>{`export function PricingCard({ plan, price, features }) {
  return (
    <div className="rounded-xl border p-6">
      <h3 className="font-semibold">{plan}</h3>
      <p className="mt-2 text-3xl font-bold">{price}</p>
      <ul className="mt-4 space-y-1 text-sm">
        {features.map((f) => (
          <li key={f}>{f}</li>
        ))}
      </ul>
    </div>
  );
}`}</code>
            </pre>
          }
          copyText="export function PricingCard() {}"
          defaultPane="preview"
          preview={
            <div className="p-6">
              <div className="rounded-xl border p-6">
                <h3 className="font-semibold text-foreground">Pro</h3>
                <p className="mt-2 font-bold text-3xl text-foreground">$29</p>
                <ul className="mt-4 space-y-1 text-muted-foreground text-sm">
                  <li>Unlimited projects</li>
                  <li>Priority support</li>
                  <li>Custom domains</li>
                </ul>
              </div>
            </div>
          }
          title="PricingCard.tsx"
        />
      </div>
    </div>
  );
}