AI Prompt Diff

AI chats 38

About

Compound component that compares two system prompts with unified or side-by-side diff views, added/removed line highlighting, line numbers, and copy buttons.

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

Code

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

Usage.tsx

"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>
  );
}