184 Components
AI Prompt Diff Viewer
CardsCursor and Copilot inspired inline code and text suggestion comparator with inline additions, deletions, split vs inline views, and keyboard-accessible Accept/Reject actions.
components/MagneticButton.tsxtypescript
+2-1
1212 export function useCounter(initial = 0) {
13 - const [count, setCount] = useState(initial);
13+ // Optimized with React 19 useOptimistic state
14+ const [count, setOptimisticCount] = useOptimistic(initial);
1415 const increment = () => setCount((c) => c + 1);
1516 return { count, increment };
1617 }
AI code modification ready
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-prompt-diff-viewer.json"
Props
TypeScript props supported by <AIPromptDiffViewer />.
| Prop | Type | Default | Description |
|---|---|---|---|
| filename | string | "hooks/useCounter.ts" | Header file title displayed in titlebar. |
| language | string | "typescript" | Language badge identifier. |
| lines | DiffLine[] | — | Array of line objects with type ('unchanged' | 'added' | 'removed') and content. |
| defaultViewMode | "inline" | "split" | "inline" | Initial layout between inline unified diff or split 2-column view. |
| onAccept | () => void | — | Callback invoked when user accepts the diff suggestions. |
| onReject | () => void | — | Callback invoked when user rejects the diff suggestions. |
Key Features
- Inline and 2-column Split view modes.
- Syntax-inspired addition (+ green) and deletion (- red) gutter styling.
- Native keyboard hotkeys: ⌘Y (Ctrl+Y) to Accept, ⌘N (Ctrl+N) to Reject.
- Persistent addition and deletion stats counters.
- Accessible buttons with spring feedback and state reset support.
Keyboard & Accessibility
- Keyboard accessible with hotkeys and standard focus rings.
- High contrast color-safe additions and deletions indicators.