AI Interfaces

Prompt Diff Viewer

A small diff surface for prompt changes, review notes, and agent edits.

promptdiffreview

Installation

Copy and paste the code into your project.

Accessibility notes

Include plus and minus markers as text so additions and removals remain clear.

Prompt diff

-Write a short answer

+Answer with source-backed steps

Preview accent

TypeScript

const changes = [
  { mark: "-", text: "Write a short answer" },
  { mark: "+", text: "Answer with source-backed steps" },
];

export function PromptDiffViewer() {
  return (
    <div className="w-full max-w-sm overflow-hidden rounded-lg border border-white/12 bg-[#0b0f14]/88 shadow-2xl">
      <div className="border-b border-white/10 px-4 py-3 text-xs font-semibold uppercase tracking-[0.16em] text-[#40E0D0]">Prompt diff</div>
      <div className="grid gap-1 p-3 font-mono text-xs">
        {changes.map((change) => (
          <p key={change.text} className={change.mark === "+" ? "rounded bg-[#40E0D0]/10 px-3 py-2 text-[#d8fffb]" : "rounded bg-[#fb923c]/10 px-3 py-2 text-[#fdba74]"}>
            <span className="mr-2 font-bold">{change.mark}</span>
            {change.text}
          </p>
        ))}
      </div>
    </div>
  );
}

Usage

<PromptDiffViewer />

Related components

I can turn that product brief into a component map, then draft the first screen.

AI Interfaces

Streaming Response Bubble

Beginner

A conversational response card with subtle animated streaming indicators.

streamingchatresponse

View component

Prompt tuned

Badges

Prompt Badge

Beginner

A small status badge for prompt state, tuning, review, or evaluation labels.

promptstatusbadge

View component

1Parse brief
2Create variants
3Ship preview

AI Interfaces

Agent Step Timeline

Intermediate

A simple ordered timeline for AI agents, build systems, and workflow progress.

agenttimelinesteps

View component