API Reference

This page documents the API for the prompt-my-client-react package.

usePrompt Hook

The usePrompt hook provides a flexible way to integrate AI text enhancement into your custom components.

Hook Return Values

Property	Type	Description
`generatePrompt`	`(text: string, prompt: string, tone?: string, style?: string) => Promise<void>`	Function to generate AI response
`isLoading`	`boolean`	Loading state indicator
`error`	`string \| null`	Error message if any
`result`	`string \| null`	AI response result
`reset`	`() => void`	Function to reset all states

Hook Options

Option	Type	Description
`onSuccess`	`(response: string) => void`	Callback when AI response succeeds
`onError`	`(error: string) => void`	Callback when an error occurs

Usage Example

import { usePrompt } from 'prompt-my-client-react';
 
function MyComponent() {
  const { generatePrompt, isLoading, error, result } = usePrompt({
    onSuccess: (response) => {
      setText(response);
      console.log('AI Response:', response);
    },
    onError: (error) => {
      console.error('Error:', error);
    }
  });
 
  const handleGenerate = async () => {
    await generatePrompt(
      "Hello world",           // text
      "Make it formal",        // prompt
      "professional",          // tone
      "concise"               // style
    );
  };
 
  return (
    <div>
      <button onClick={handleGenerate} disabled={isLoading}>
        {isLoading ? 'Processing...' : 'Make Professional'}
      </button>
      {error && <p>Error: {error}</p>}
      {result && <p>Result: {result}</p>}
    </div>
  );
}

AIDropDown Component

The main component that provides an AI-powered dropdown interface for text enhancement.

Props

Required Props

Prop	Type	Description
`text`	`string`	The text content to be processed by AI
`aiResponseCallback`	`(response: string) => void`	Callback function to handle AI responses

Optional Props

Prop	Type	Default	Description
`size`	`string`	`'48px'`	Size of the AI button
`renderIcon`	`() => React.ReactNode`	`undefined`	Custom icon renderer function
`iconColor`	`string`	`undefined`	Color of the default icon
`promptOptions`	`PromptOption[]`	Built-in options	Custom prompt options
`dropdownStyle`	`React.CSSProperties`	Default styles	Custom dropdown styling
`optionStyle`	`React.CSSProperties`	Default styles	Custom option styling
`optionHoverStyle`	`React.CSSProperties`	Default styles	Custom hover styling
`buttonStyle`	`React.CSSProperties`	Default styles	Custom button styling

Types

PromptOption

type PromptOption = {
  prompt: string;      // The actual prompt sent to AI
  label: string;       // Display label in dropdown
  tone?: string;       // Tone modifier (optional)
  style?: string;      // Style modifier (optional)
}

Usage Example

import { AIDropDown } from 'prompt-my-client-react';
 
function MyComponent() {
  const [text, setText] = useState('');
 
  const handleAIResponse = (response: string) => {
    if (response) {
      setText(response);
    }
  };
 
  return (
    <div>
      <textarea 
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Type your text here..."
      />
      <AIDropDown 
        text={text} 
        aiResponseCallback={handleAIResponse}
        size="48px"
        iconColor="#007bff"
        renderIcon={() => <span>✨</span>}
      />
    </div>
  );
}

Default Prompt Options

The component comes with these pre-built prompt options:

Label	Description
Fix Grammar	Corrects grammatical errors
Professional Tone	Converts text to professional language
Make it Short	Condenses text while maintaining meaning
Make it Detailed	Expands text with more information
Conversational	Makes text more casual and friendly
Creative	Adds creative flair to the content
Persuasive	Makes text more convincing and compelling

Installation Demos