Prompt Enhancement

Improve your prompts with AI before sending. Prompt enhancement transforms simple ideas into detailed, actionable instructions that get better results.

Written By Nick Gatzoulis

Last updated 4 months ago

What is prompt enhancement?

Prompt enhancement uses AI to improve your prompt before sending it to the code generator. Click the magic wand button and App2 analyzes your request, adds relevant context, and creates a more detailed, specific prompt.

What enhancement does:

  • Adds clarity: Transforms vague requests into specific technical requirements

  • Provides context: Includes project-specific details

  • Suggests best practices: Adds implementation guidance

  • Maintains intent: Keeps your original goal while improving precision

  • Saves iterations: Get better results on the first try

Visual indicator: Purple gradient magic wand button (🪄) next to the mode selector in your chat input.

How it works

Prompt enhancement is a simple 4-step process.

The process:

  1. Type your prompt in the chat input (don't send yet)

  2. Click the wand button (🪄) next to the mode selector

  3. AI enhances your prompt using project context and best practices

  4. Review the enhanced version, modify if needed, then send

What the AI considers:

  • Your original prompt

  • Project description and goals

  • Session conversation history

  • Project type (Web or Mobile)

  • Technical framework details

  • Best practices for your request

Enhancement happens instantly (usually <2 seconds).

What gets enhanced

Prompt enhancement improves different types of requests in different ways.

Ambiguous requests

Original: "Add authentication"

Enhanced: "Implement user authentication with email/password login, including a login form with validation, signup page, password reset flow, and session management. Follow React best practices for form handling and state management."

General ideas

Original: "Make the app look better"

Enhanced: "Improve the app's visual design by: 1) Adding consistent spacing and padding throughout, 2) Implementing a cohesive color scheme with primary and accent colors, 3) Improving typography hierarchy, 4) Adding subtle animations for better UX, 5) Ensuring mobile responsiveness across all screens."

Simple descriptions

Original: "Add a search feature"

Enhanced: "Create a search feature with: 1) Search input with real-time filtering, 2) Search results displayed in a grid/list, 3) 'No results found' state, 4) Search term highlighting in results, 5) Clear search button, 6) Debounced search to improve performance. Include proper loading states and error handling."

Technical additions

Original: "Connect to database"

Enhanced: "Set up Supabase database connection by: 1) Installing @supabase/supabase-js, 2) Creating Supabase client configuration with environment variables, 3) Implementing connection initialization, 4) Adding error handling for connection failures, 5) Creating example query functions for CRUD operations, 6) Setting up TypeScript types for database tables."

When to use enhancement

Use enhancement when:

  • Your prompt is vague or general

  • You're new to a type of feature

  • Want to learn best practices

  • Not sure how to phrase a request

  • Building something you haven't built before

  • Want comprehensive implementation

Example scenarios:

  • "Add user profiles" → Gets enhanced with specific fields, pages, and functionality

  • "Improve error handling" → Gets enhanced with specific patterns and locations

  • "Make it responsive" → Gets enhanced with breakpoints and mobile considerations

When to skip enhancement

Skip enhancement when:

  • Your prompt is already specific and detailed

  • You've included file references (@file/path)

  • Following exact specifications

  • Making quick tweaks

  • Iterating on previous work

  • You know exactly what you want

Example scenarios:

  • "Add email validation to @src/LoginForm.tsx using regex pattern /^[^\s@]+@[^\s@]+.[^\s@]+$/"

  • "Change button color to #6366f1"

  • "Fix typo in line 45 of Header.tsx"

Tip: Enhancement is most valuable for your first few prompts in a project or when building new types of features.

Using prompt enhancement

Step-by-step process

1. Type your prompt: Enter your request in the chat input (don't press Enter yet).

2. Click the wand button: Find the purple gradient magic wand button (🪄) next to the mode selector.

3. Wait for enhancement: Button animates (pulsing gradient) while AI enhances your prompt. Usually takes 1-2 seconds.

4. Review enhanced prompt: Your original prompt is replaced with the enhanced version in the chat input.

5. Make adjustments (optional):

  • Accept as-is and send

  • Edit the enhanced version

  • Revert to original if you don't like it

  • Add file references with Quick Actions

6. Send your message: Hit Enter or click the send button.

Reviewing enhancements

What to check:

  • Does it match your intent?

  • Is it too detailed or not detailed enough?

  • Are there assumptions you disagree with?

  • Does it include irrelevant details?

If you don't like the enhancement:

  • Manually edit it to your preference

  • Or discard and type your own

  • Enhancement is a suggestion, not a requirement

Combining with other features

Enhancement + Quick Actions:

  1. Type basic prompt

  2. Enhance it

  3. Add file references with Quick Actions

  4. Send combined prompt

Enhancement + Chat Modes:

  • Works with all modes (Build, Plan, Debug, Review, Docs)

  • Enhancement adapts based on selected mode

  • Plan mode → emphasizes planning details

  • Debug mode → focuses on troubleshooting steps

Credit usage

Prompt enhancement consumes a small amount of credits each time you use it.

Credit consumption:

  • Minimal credit cost per enhancement

  • Lower than actually building the feature

  • Uses App2 credits by default

  • BYOK available for Lifetime subscribers

Cost context:

  • Enhancement helps avoid multiple iterations

  • Better first result often saves credits overall

  • Optional feature—skip to save credits

  • Free with BYOK (Lifetime tier)

Note: Enhancement uses credits from your workspace pool, just like other AI operations.

Best practices

Strategic enhancement

Enhance your first prompt in a new session or feature area. This sets a strong foundation with best practices.

Don't enhance every prompt. Once you see the pattern from enhanced prompts, you can write similar quality prompts yourself.

Use for learning. Enhanced prompts teach you how to write better prompts. Study them to improve your own prompt-writing skills.

Efficient usage

Quick changes: Skip enhancement for simple tweaks like "change color to blue" or "fix typo in line 23".

Complex features: Always enhance when building something new or complex like "add payment processing" or "implement real-time chat".

Follow-up prompts: If your first prompt was enhanced, subsequent related prompts may not need enhancement.

Editing enhanced prompts

Common edits:

  • Remove unnecessary details

  • Add specific constraints

  • Reference particular files

  • Adjust implementation approach

Example: Enhanced gives you: "Add user profile page with avatar, bio, and settings..."

You modify to: "Add user profile page with avatar and bio (skip settings for now) using the same styling as @src/components/UserCard.tsx"

Examples

Example 1: Adding a feature

Your prompt: "Add a shopping cart"

Enhanced version: "Implement a shopping cart feature with the following components: 1) Cart icon in header showing item count badge, 2) Cart page displaying added items with thumbnails, quantities, and prices, 3) Quantity adjustment controls (increase/decrease), 4) Remove item functionality, 5) Calculate and display subtotal, tax, and total, 6) 'Proceed to checkout' button, 7) Empty cart state with 'Continue shopping' CTA. Use local state management initially, with consideration for persistence in later iterations."

Value: Comprehensive implementation plan you might not have thought of.

Example 2: Debugging

Your prompt: "Login button not working"

Enhanced version: "Debug the login button issue by: 1) Checking if the onClick handler is properly attached, 2) Verifying form validation logic, 3) Inspecting network requests to ensure API calls are firing, 4) Checking browser console for JavaScript errors, 5) Validating input field values are being captured, 6) Testing with different browsers, 7) Adding console.log statements to trace execution flow. Include fixes for any identified issues and add error handling to prevent similar problems."

Value: Systematic debugging approach covers all potential causes.

Example 3: Design improvements

Your prompt: "Make it modern"

Enhanced version: "Modernize the app's design by implementing: 1) Contemporary color palette with gradients and subtle shadows, 2) Rounded corners and soft edges throughout, 3) Smooth transitions and micro-interactions (hover states, button press feedback), 4) Card-based layouts with proper spacing, 5) Modern sans-serif typography (Inter, Poppins, or similar), 6) Dark mode support with toggle, 7) Glass morphism effects where appropriate, 8) Responsive grid layouts, 9) Consistent iconography using a modern icon set."

Value: Specific design trends and implementation details.

Troubleshooting

Wand button disabled

Issue: Can't click the magic wand button.

Solutions:

  1. Type something in the chat input first (button disabled when empty)

  2. Check credits aren't exhausted

  3. Verify project isn't scaffolding

  4. Wait if code generation is in progress


Enhancement takes too long

Issue: Wand button animating for more than 10 seconds.

Solutions:

  1. Wait up to 30 seconds (complex context takes time)

  2. Refresh page if stuck after 30 seconds

  3. Try again with shorter prompt

  4. Check internet connection


Enhanced prompt doesn't match intent

Issue: Enhancement changes your meaning or adds unwanted details.

Solutions:

  • Edit the enhanced version to fix it

  • Or discard and write your own detailed prompt

  • Enhancement is optional—use only when helpful


Want to see original prompt again

Issue: Enhanced prompt replaced original, want to compare.

Solution: Enhancement replaces the text in the input. To revert, clear the input and retype your original prompt. Consider copying original before enhancing if you want to compare.

FAQ

Does prompt enhancement cost credits?

Yes. Enhancement uses a small amount of credits to generate the improved prompt. The cost is minimal compared to the actual code generation.

Can I use enhancement multiple times?

Yes. Enhance a prompt, review it, enhance again if needed. Each enhancement consumes a small amount of credits.

Does enhancement work with all chat modes?

Yes. Enhancement works with Build, Plan, Debug, Review, and Docs modes. The enhancement adapts based on the selected mode.

Can I edit the enhanced prompt?

Yes. The enhanced prompt replaces your text in the input. Edit it freely before sending.

Will enhancement always make my prompt better?

Usually, yes. But if your prompt is already specific and detailed, enhancement may not add much value. It's most helpful for vague or simple prompts.

Can I disable prompt enhancement?

The wand button is always available, but using it is completely optional. Simply don't click it if you don't want enhancement.

Does BYOK work with enhancement?

Yes. If your project uses BYOK (Bring Your Own Keys), prompt enhancement also uses your API keys at no App2 credit cost.

How is this different from predictive prompting?

Prompt Enhancement: Improves YOUR prompt before sending (you initiate by clicking wand)

Predictive Prompting: AI suggests NEXT prompts after code generation (automatic suggestions)

They're complementary features—use enhancement to improve what you write, use predictive prompting to discover what to do next.

Can I see what was enhanced?

The original prompt is replaced. To compare, copy your original before enhancing, then compare after.

Related links