AI Prompt Diff

"use client";

import {
  AiPromptDiff,
  AiPromptDiffHeader,
  AiPromptDiffViewToggle,
  AiPromptDiffContent,
  AiPromptDiffCopyButton,
} from "@/components/ui/prompt-diff";

const before = `You are a helpful assistant.
Answer questions concisely.
Be friendly and professional.`;

const after = `You are a senior software engineer assistant.
Answer questions with code examples when relevant.
Be friendly, professional, and thorough.
Always explain your reasoning.`;

export default function PromptDiffDemo() {
  return (
    <div className="mx-auto w-full max-w-2xl p-6">
      <AiPromptDiff before={before} after={after}>
        <AiPromptDiffHeader title="Prompt Changes">
          <AiPromptDiffViewToggle />
          <AiPromptDiffCopyButton variant="after" />
        </AiPromptDiffHeader>
        <AiPromptDiffContent />
      </AiPromptDiff>
    </div>
  );
}