Frequently Asked Questions

Common questions and answers about the Prompt My Client React component.

🤔 General Questions

What is Prompt My Client React?

Prompt My Client React is a React component library that provides an AI-powered dropdown interface for text enhancement and transformation. It allows users to easily enhance, rewrite, or transform text content using various AI-powered prompts.

What are the system requirements?

React 18 or higher
React DOM 18 or higher
Modern web browser (Chrome, Firefox, Safari, Edge)

Is this component free to use?

Yes! The component is open-source and available under the MIT License, which means you can use it freely in both personal and commercial projects.

🚀 Installation & Setup

How do I install the package?

npm install prompt-my-client-react

yarn add prompt-my-client-react

Do I need to set up any API keys?

No, the component handles AI service integration internally. You just need to provide the text and handle the response callback.

Can I use this with Next.js?

Absolutely! The component works perfectly with Next.js, Create React App, Vite, and any other React setup.

🎯 Usage Questions

How do I handle the AI response?

You provide a callback function via the aiResponseCallback prop:

const handleAIResponse = (response: string) => {
  if (response) {
    setText(response);
    console.log("AI Response:", response);
  }
};
 
<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse} 
/>

What happens if there's no text to process?

If the text prop is empty or undefined, the AI button will be disabled to prevent unnecessary API calls.

Can I customize the prompt options?

Yes! You can provide your own custom prompt options:

const customPrompts = [
  {
    prompt: 'Translate to Spanish',
    label: 'Spanish',
    tone: 'formal'
  }
];
 
<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse}
  promptOptions={customPrompts}
/>

🎨 Styling & Customization

How do I change the button size?

Use the size prop with predefined values:

<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse}
  size="38px"  // Small
  // size="48px"  // Medium (default)
  // size="52px"  // Large
/>

Can I change the colors?

Yes! You can customize all aspects of the styling:

<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse}
  buttonStyle={{
    background: '#ff6b6b',
    color: 'white'
  }}
  dropdownStyle={{
    background: '#ffffff',
    border: '2px solid #ff6b6b'
  }}
/>

How do I make it match my app's theme?

Use the styling props to match your design system:

<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse}
  buttonStyle={{
    background: 'var(--primary-color)',
    color: 'var(--text-on-primary)'
  }}
  dropdownStyle={{
    background: 'var(--surface-color)',
    border: `1px solid var(--border-color)`
  }}
/>

🔧 Technical Questions

How does the AI integration work?

The component integrates with AI services to process text based on the selected prompt. When a user selects an option, the text and prompt are sent to the AI service, which returns the enhanced text.

Is the component accessible?

Yes! The component includes:

Proper ARIA labels and roles
Keyboard navigation support
Screen reader compatibility
Focus management

Does it work on mobile devices?

Absolutely! The component is fully responsive and works great on mobile, tablet, and desktop devices.

Can I use this in a TypeScript project?

Yes! The component is written in TypeScript and includes full type definitions.

🚨 Troubleshooting

The component isn't rendering

Check these common issues:

Make sure you've imported the component correctly
Verify your React version is 18 or higher
Check that the package was installed successfully
Ensure you're providing the required props (text and aiResponseCallback)

AI responses aren't working

Troubleshooting steps:

Verify the text prop contains the text you want to transform
Check that the aiResponseCallback function is properly defined
Ensure your internet connection is working
Check the browser console for any error messages

Styling isn't applying correctly

Common styling issues:

Make sure you're using the correct prop names (buttonStyle, dropdownStyle, etc.)
Check that your CSS properties are valid
Verify that your custom styles aren't being overridden by CSS specificity
Try using !important for critical styles if needed

The dropdown is positioned incorrectly

Positioning issues:

Check if the parent container has position: relative
Ensure there are no conflicting CSS transforms
Verify z-index values for proper layering
For mobile, consider using position: fixed for the dropdown

🔄 Integration Questions

Can I use this with form libraries?

Yes! The component works great with React Hook Form, Formik, and other form libraries:

import { useForm, Controller } from 'react-hook-form';
 
const { control, setValue, watch } = useForm();
const content = watch('content');
 
const handleAIResponse = (response: string) => {
  if (response) {
    setValue('content', response);
  }
};
 
<Controller
  name="content"
  control={control}
  render={({ field }) => (
    <div>
      <textarea {...field} />
      <AIDropDown 
        text={content} 
        aiResponseCallback={handleAIResponse}
      />
    </div>
  )}
/>

Does it work with state management libraries?

Yes! You can use it with Redux, Zustand, Zustand, or any other state management solution:

import { useStore } from 'zustand';
 
const { text, setText } = useStore();
 
const handleAIResponse = (response: string) => {
  if (response) {
    setText(response);
  }
};
 
<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse}
/>

Can I use this in a server-side rendered app?

Yes! The component works with SSR frameworks like Next.js. Just make sure to handle the client-side AI interactions properly.

📱 Mobile & Responsiveness

How do I optimize for mobile?

Use mobile-specific styling:

<AIDropDown 
  text={text} 
  aiResponseCallback={handleAIResponse}
  size="48px"
  dropdownStyle={{
    position: 'fixed',
    bottom: '80px',
    left: '20px',
    right: '20px',
    borderRadius: '16px',
    maxHeight: '60vh'
  }}
/>

Does it work on touch devices?

Yes! The component is fully touch-friendly and includes proper touch event handling.

🚀 Performance Questions

Is the component performant?

Yes! The component is optimized for performance:

Only re-renders when necessary props change
AI requests are debounced to prevent excessive API calls
The dropdown is rendered conditionally
Large text inputs are handled efficiently

How do I optimize for large text inputs?

The component handles large text efficiently, but you can optimize further:

Consider debouncing user input
Use virtual scrolling for very long text
Implement text chunking if needed

🔒 Security & Privacy

Is my text data secure?

The component sends text to AI services for processing. Check the privacy policy of the AI service provider for details about data handling.

Can I use this in production?

Yes! The component is production-ready and includes error handling, loading states, and graceful degradation.

📚 Getting Help

Where can I find more examples?

Check out our Examples page for comprehensive usage examples and patterns.

How do I report a bug?

Please report bugs on our GitHub repository (opens in a new tab) by opening an issue.

Can I contribute to the project?

Absolutely! We welcome contributions. Please check the contributing guidelines in our GitHub repository.

Where can I get support?

Check this FAQ first
Review the API Reference
Look at the Examples
Open an issue on GitHub
Check the Getting Started guide

📝 Still Have Questions?

If you couldn't find the answer here, please:

Check the API Reference for detailed documentation
Look at the Examples for usage patterns
Visit our GitHub repository (opens in a new tab)
Open an issue with your question

We're here to help you get the most out of Prompt My Client React! 🚀

Demos