@shubhamrasal/autocomplete NPM

@shubhamrasal/autocomplete

A React-based AI-powered code editor component with intelligent code suggestions.

This component is heavily inspired by codeium-react-code-editor but with option to use openai as provider.

Installation

npm install @shubhamrasal/autocomplete

yarn add @shubhamrasal/autocomplete

Features

AI-powered code suggestions using OpenAI
Monaco editor integration
TypeScript support
Customizable styling
React 18+ compatible

Usage

import { AICodeEditor } from '@shubhamrasal/autocomplete';

function App() {
  return (
    <AICodeEditor
      language="javascript"
      value={initialCode}
      onChange={(value) => console.log(value)}
      openAIKey="your-openai-api-key"
      options={{
        fontSize: 16,
        lineHeight: 1.6,
        padding: { top: 16, bottom: 16 },
      }}
    />
  );
}

Configuration

The AICodeEditor component accepts the following props:

Prop	Type	Description
language	string	The programming language for syntax highlighting (e.g. 'javascript', 'typescript', 'python')
value	string	The initial value of the editor
onChange	(value: string \| undefined) => void	Callback function called when the editor content changes
openAIKey	string	Your OpenAI API key for AI-powered suggestions
options	object	Monaco editor options (see Monaco Editor documentation)
className	string	Additional CSS classes to apply to the editor