Predictive Textarea

A textarea component with AI-powered content prediction for React applications. It enables predictive text suggestions as users type, similar to GitHub Copilot's ghost text feature.

Features

• 🤖 AI-powered content predictions
• 📱 Responsive design
• 🎨 Customizable styling
• 🧩 Easy integration with form libraries
• ♿ Accessible design
• 💻 Framework-agnostic (works with or without shadcn/ui)

Demo

You can see a demo of the component here which includes options to test different variations of the component.

Installation

npm install predictive-textarea
# or
yarn add predictive-textarea
# or
pnpm add predictive-textarea

Dependencies

The component has minimal dependencies:

• React: As this is a React component
• Tailwind CSS: For styling (or you can provide custom classes)
• uuid: Used internally for prediction ID generation

Local Demo

To run the demo locally:

# Install dependencies
yarn install

# Run the demo
yarn demo

The demo shows different examples of the PredictiveTextarea component:

• Basic usage with content prediction
• Disabled state
• Pre-filled content

Press Tab to accept suggestions when they appear.

Development

This project provides two environments for development:

Development Server

Run the development server for local development:

# Start the development server (Vite)
yarn dev

The development server is located in the dev/ directory and provides a sandbox environment for testing and developing the component.

Demo Application

Run the demo application to see the component in action in various scenarios:

# Run the Next.js demo
yarn demo

The demo is located in the demo/ directory and showcases different usage examples of the component in a Next.js application.

Usage

import React from 'react';
import { PredictiveTextarea } from 'predictive-textarea';

// Your content prediction function
// This should connect to your AI service that generates predictions and return a string
async function getContentPrediction(text: string): Promise<string> {
  const response = await fetch('your-prediction-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text }),
  });
  
  const data = await response.json();
  return data.prediction || '';
}

function MyForm() {
  return (
    <div className="my-form">
      <label htmlFor="content">Content:</label>
      <PredictiveTextarea
        name="content"
        getContentPredictionFn={getContentPrediction}
        debounceTime={300}
        placeholder="Start typing..."
      />
      <button type="submit">Submit</button>
    </div>
  );
}

export default MyForm;

OpenAI Integration

This package includes built-in OpenAI integration for text predictions.

To use the OpenAI integration in a Next.js app:

// app/actions.ts
'use server'

import { predictInputContent } from 'predictive-textarea/openai'

export async function getPrediction(text: string) {
  return predictInputContent(text)
}

// app/components/my-textarea.tsx
'use client'
import { PredictiveTextarea } from 'predictive-textarea'
import { getPrediction } from '../actions'

export function MyTextarea() {
  return <PredictiveTextarea getContentPredictionFn={getPrediction} />
}

In order to use the OpenAI integration, you need to set the OPENAI_API_KEY environment variable in your Next.js application. The OPENAI_MODEL environment variable is optional and defaults to gpt-4o-mini.

Props

| Name | Type | Required | Description | |------|------|----------|-------------| | getContentPredictionFn | (text: string, abortSignal?: AbortSignal) => string \| Promise<string> | Yes | Function that returns prediction text based on user input | | debounceTime | number | No | Time to wait after typing stops before fetching predictions (ms) | | disabled | boolean | No | Disables the textarea | | placeholder | string | No | Placeholder text | | value | string | No | Initial value | | rows | number | No | Number of rows to display (default: 1) | | className | string | No | Additional CSS classes for the textarea container | | predictionClassName | string | No | Additional CSS classes for the prediction text | | ...props | React.HTMLAttributes<HTMLDivElement> | No | Any other props are passed to the underlying div |

Styling

The component uses utility classes that are compatible with Tailwind CSS by default.

To customize the appearance, you can provide a className prop:

<PredictiveTextarea
  getContentPredictionFn={getContentPrediction}
  className="min-h-[200px] font-mono bg-gray-100 dark:bg-gray-800"
/>

Integration with UI Libraries

This component is designed to be framework-agnostic and can be integrated with any UI library. The component uses Tailwind CSS conventions that make it easy to customize:

• It uses standard Tailwind CSS class naming conventions
• It follows common styling patterns for focus states, borders, and other UI elements
• The demo showcases integration with various UI component structures and themes

Caching and Performance

The PredictiveTextarea component includes built-in caching and performance optimization features to minimize API calls and improve user experience.

Content Prediction Caching

The component uses a trie-based caching mechanism to store and retrieve predictions:

• Previously requested predictions are cached to avoid redundant API calls
• The cache is optimized for prefix matching, making it efficient for text input scenarios
• Default cache size is 100 entries, providing a balance between memory usage and performance

// Example showing caching behavior
function MyForm() {
  // This function will only be called once for the same input
  // even if the component re-renders
  async function getContentPrediction(text: string) {
    console.log('Making API call for:', text);
    // Your prediction API call here
    return 'predicted text';
  }

  return (
    <PredictiveTextarea
      getContentPredictionFn={getContentPrediction}
      debounceTime={300} // Configure debounce time
    />
  );
}

Debouncing Mechanism

To prevent excessive API calls as users type:

• Input requests are debounced by default (300ms)
• Adjustable via the debounceTime prop to match your use case
• Optimizes the balance between responsiveness and API usage

+import React from 'react';  
+import { PredictiveTextarea } from 'predictive-textarea';  
+  
 function MyComponent() {  
   return (  
     <PredictiveTextarea  
       getContentPredictionFn={getContentPrediction}  
       debounceTime={500} // Increase to 500ms for slower typing or expensive API calls  
     />  
   );  
 } 

Performance Benefits

The caching and debouncing mechanisms provide several performance benefits:

• Reduced API calls, especially for repetitive text patterns
• Improved user experience during backspace operations where cached predictions can be reused
• Lower latency for cached predictions (near-instant suggestions)
• Deterministic prediction IDs ensure proper component rerendering

While the cache is configured with sensible defaults, you can customize its behavior by adjusting the debounceTime prop:

• Lower values (e.g., 100ms) provide more responsive predictions but increase API calls
• Higher values (e.g., 500ms) reduce API calls but may feel less responsive
• The default value (300ms) provides a good balance for most use cases

Attribution

This component was inspired by and adapted from react-ghost-text.