Pular para o conteúdo principal

Prompt Library

Pre-built prompts for common development tasks to accelerate your workflow.

Overview​

The Prompt Library provides ready-to-use prompts for:

  • Authentication systems
  • Payment integrations
  • Dashboard layouts
  • CRUD operations
  • API integrations
  • UI components

How to Use​

Access Library​

  1. Click Prompt Library icon in chat
  2. Browse categories
  3. Click any prompt to use it
  4. Customize parameters
  5. Send to AI

Quick Insert​

Type / in chat to see prompt suggestions:

/auth → Authentication prompts
/payment → Payment integration prompts
/dashboard → Dashboard layout prompts
/crud → CRUD operation prompts

Categories​

Authentication​

Basic Auth​

Create a login and signup system with:
- Email/password authentication
- Form validation
- Error handling
- Remember me functionality
- Password strength indicator

Social Auth​

Add social authentication with:
- Google OAuth
- GitHub OAuth
- Facebook Login
- Apple Sign In
- Automatic account linking

Multi-Factor Auth (MFA)​

Implement 2FA authentication with:
- TOTP (Time-based One-Time Password)
- SMS verification
- Email verification codes
- Backup codes
- QR code setup

Payments​

Stripe Checkout​

Integrate Stripe checkout with:
- One-time payment
- Product selection
- Success/cancel pages
- Webhook handling
- Receipt emails

Subscription Billing​

Create subscription system with:
- Multiple pricing tiers
- Monthly/annual billing
- Upgrade/downgrade flow
- Payment method management
- Invoice history

Payment Methods​

Add payment method management:
- Save multiple cards
- Set default payment method
- Update billing details
- Delete payment methods
- 3D Secure support

Dashboards​

Admin Dashboard​

Build admin dashboard with:
- User management table
- Analytics charts
- Recent activity feed
- Quick actions
- Search and filters

Analytics Dashboard​

Create analytics dashboard with:
- Revenue charts (line, bar, pie)
- Key metrics cards
- Date range selector
- Export to CSV
- Real-time updates

User Dashboard​

Build user dashboard with:
- Profile overview
- Recent activity
- Quick stats
- Action buttons
- Settings link

CRUD Operations​

User Management​

Create user management system:
- List users with pagination
- Search and filter
- Create new user
- Edit user details
- Delete user with confirmation
- Bulk actions

Product Catalog​

Build product catalog with:
- Product grid/list view
- Categories and filters
- Search functionality
- Product details page
- Add to cart
- Stock management

Blog System​

Create blog system with:
- Post list with pagination
- Create/edit posts
- Rich text editor
- Categories and tags
- Featured images
- SEO metadata

Forms​

Contact Form​

Add contact form with:
- Name, email, message fields
- Form validation
- Submit to database
- Email notification
- Success message
- reCAPTCHA

Multi-Step Form​

Create multi-step form with:
- Progress indicator
- Step validation
- Back/next navigation
- Save draft
- Review before submit
- Success confirmation

File Upload Form​

Build file upload form with:
- Drag and drop
- Multiple files
- File type validation
- Size limit
- Progress bar
- Preview thumbnails

UI Components​

Create responsive navigation with:
- Logo and menu items
- Mobile hamburger menu
- Dropdown submenus
- Search bar
- User profile dropdown
- Dark mode toggle

Data Table​

Build data table with:
- Sortable columns
- Pagination
- Search filter
- Row selection
- Bulk actions
- Export to CSV
Create modal system with:
- Backdrop overlay
- Close button
- Keyboard shortcuts (ESC)
- Scroll lock
- Animation
- Multiple sizes

API Integration​

REST API​

Integrate REST API with:
- Fetch data with error handling
- Loading states
- Retry logic
- Caching
- Pagination
- Authentication headers

GraphQL​

Add GraphQL integration with:
- Apollo Client setup
- Queries and mutations
- Optimistic updates
- Error handling
- Cache management
- Subscriptions

WebSocket​

Implement WebSocket with:
- Real-time connection
- Auto-reconnect
- Message handling
- Typing indicators
- Online status
- Heartbeat ping

Custom Prompts​

Save Your Own​

Create custom prompts:

  1. Write a prompt that works well
  2. Click Save to Library
  3. Add title and description
  4. Choose category
  5. Set parameters (optional)

Share with Team​

Share prompts with your team:

  1. Go to Prompt Library
  2. Click prompt → Share
  3. Copy share link
  4. Team members can import

Parameters​

Add dynamic parameters:

Create a {component_type} with:
- {feature_1}
- {feature_2}
- {feature_3}
Using {framework} and {styling}

When used, AI asks for:

  • component_type: "modal", "dropdown", etc.
  • feature_1, feature_2, feature_3
  • framework: "React", "Vue", etc.
  • styling: "Tailwind", "CSS", etc.

Best Practices​

Writing Good Prompts​

Be Specific:

❌ "Add authentication"
✅ "Create email/password authentication with Supabase Auth, including login form, signup form, password reset, and email verification"

Include Details:

✅ "Build a user dashboard with:
- Profile card showing avatar, name, email
- Stats cards for projects, tasks, messages
- Recent activity list (last 10 items)
- Quick action buttons
- Responsive layout (mobile-first)"

Specify Tech Stack:

✅ "Integrate Stripe checkout using:
- @stripe/stripe-js for frontend
- Stripe API for backend
- Supabase for storing orders
- Email notifications via Resend"

Organizing Prompts​

  • Use clear, descriptive titles
  • Add detailed descriptions
  • Tag with relevant keywords
  • Group by project type
  • Version control (v1, v2, etc.)

Most Used​

  1. Supabase Auth Setup (12,453 uses)
  2. Stripe Subscription (8,721 uses)
  3. Admin Dashboard (7,892 uses)
  4. CRUD Table (6,543 uses)
  5. Contact Form (5,234 uses)
  1. AI Chat Interface (↑ 234%)
  2. Dark Mode Toggle (↑ 189%)
  3. File Upload (↑ 156%)
  4. Real-time Chat (↑ 142%)
  5. Payment Methods (↑ 128%)

Community Prompts​

Browse Community​

Explore prompts shared by other users:

  1. Go to Prompt Library → Community
  2. Filter by:
    • Category
    • Rating
    • Most used
    • Recent
  3. Preview prompt
  4. Add to your library

Submit Your Prompt​

Share with the community:

  1. Create a great prompt
  2. Test it thoroughly
  3. Click Submit to Community
  4. Add description and tags
  5. Wait for approval (24-48 hours)

Ratings​

Rate prompts you use:

  • ⭐⭐⭐⭐⭐ Excellent
  • ⭐⭐⭐⭐ Good
  • ⭐⭐⭐ Average
  • ⭐⭐ Needs improvement
  • ⭐ Poor

Advanced Features​

Prompt Chains​

Combine multiple prompts:

1. [Auth Setup] → Create authentication
2. [User Dashboard] → Add user dashboard
3. [Profile Settings] → Add profile editing

AI executes sequentially.

Conditional Prompts​

Add logic to prompts:

IF project_type === "mobile" THEN
Use React Native components
ELSE
Use React web components
END

Variables​

Use project variables:

Add {integration_name} integration to {project_name}
with API key from environment variable {env_var_name}

Prompt Library API​

Programmatic Access​

// Fetch prompt
const prompt = await promptLibrary.get('stripe-checkout');

// Use prompt
const result = await ai.generate({
prompt: prompt.template,
params: {
currency: 'usd',
amount: 2999
}
});

Webhook Integration​

Trigger prompts via webhook:

curl -X POST https://api.prompttoapp.dev/v1/prompts/execute \
-H "Authorization: Bearer YOUR_API_KEY" \
-d '{
"prompt_id": "stripe-checkout",
"project_id": "abc123",
"params": {
"currency": "usd"
}
}'

Pricing​

Prompt Library access:

FeatureEssentialsPlusUltra
Pre-built prompts✅✅✅
Save custom prompts1050Unlimited
Share with team❌✅✅
Community prompts✅✅✅
Submit to community❌✅✅
API access❌❌✅