AI Prompt Enhancer
AI-assisted prompt improvement component that shows the original and enhanced versions of a user's prompt, with individual suggestions for clarity, specificity, context, tone, and structure.
Card Variant
Full card with suggestions and quality score
Enhanced Prompt
3 improvements suggested
What is the best laptop for software development under $1500 in 2024? Compare the top 3 options with pros and cons for each.
Added use case and budget constraint for more targeted results
Added time context to get current recommendations
Added output format for a structured response
Diff Variant
Side-by-side comparison
Prompt Enhancement
Explain machine learning
Explain machine learning to a beginner with 3 practical examples from everyday life, using simple language and no technical jargon.
Inline Variant
Compact inline suggestion
Fix the TypeError in my React component's useEffect hook — the state update runs after unmount
Loading State
Skeleton while enhancement is being generated
Props
AIPromptEnhancer component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
originalPrompt* | string | — | The original user prompt |
enhancedPrompt* | string | — | The AI-enhanced version |
suggestions | EnhancementSuggestion[] | — | Individual improvement suggestions |
qualityBefore | number | — | Quality score before enhancement (0-100) |
qualityAfter | number | — | Quality score after enhancement (0-100) |
variant | 'card' | 'inline' | 'diff' | 'card' | Display variant |
loading | boolean | false | Show loading skeleton |
onAccept | (enhancedPrompt: string) => void | — | Callback when user accepts enhancement |
onReject | () => void | — | Callback when user keeps original |
onAcceptSuggestion | (suggestionId: string) => void | — | Callback for individual suggestion accept |
Usage
Import and implementation example
import { AIPromptEnhancer } from '@/blocks/ai-conversation/ai-prompt-enhancer'
<AIPromptEnhancer originalPrompt="What's the best laptop?" enhancedPrompt="What is the best laptop for development under $1500?" suggestions={[ { id: '1', type: 'specificity', original: 'best laptop', enhanced: 'best laptop for development under $1500', reason: 'Added use case and budget', }, ]} qualityBefore={35} qualityAfter={88} onAccept={(prompt) => setPrompt(prompt)} onReject={() => setShowEnhancer(false)}/>Built With
2 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Three variants: Card, inline, and side-by-side diff modes
- Quality scoring: Before/after quality score visualization
- Categorized suggestions: Clarity, specificity, context, tone, and structure categories
- Original toggle: Show/hide the original prompt for comparison
- Loading state: Skeleton loading while enhancement generates
- Individual accepts: Accept individual suggestions independently
Accessibility
Accessibility considerations
ARIA Attributes
Enhancement differences conveyed through text and layoutKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between actions |
| Enter / Space | Activate accept/reject buttons |
Notes
- Quality scores use numeric values for screen readers
- Loading state uses aria-busy pattern