ai-text-tool
Advanced tools
An AI text generation tool for EditorJS with automatic environment variable detection
An AI-powered text generation tool for Editor.js that provides both block-level and inline text generation capabilities. Generate and refine content with AI assistance directly within your Editor.js editor.
To install and use this tool in your Editor.js project, follow these steps:
npm install ai-text-tool
Add your OpenAI API key to your environment configuration based on your framework:
| Framework | Environment Variable | Config File |
|---|---|---|
| Next.js | NEXT_PUBLIC_OPENAI_API_KEY | .env.local |
| Vite (React/Vue/Svelte) | VITE_OPENAI_API_KEY | .env |
| Create React App | REACT_APP_OPENAI_API_KEY | .env |
| Nuxt 3 | VITE_OPENAI_API_KEY or runtime config | .env / nuxt.config.ts |
| SvelteKit | PUBLIC_OPENAI_API_KEY | .env |
| Angular | N/A (use environment.ts) | src/environments/environment.ts |
Example for Next.js (.env.local):
NEXT_PUBLIC_OPENAI_API_KEY=sk-your-openai-api-key-here
Example for Vite/Nuxt (.env):
VITE_OPENAI_API_KEY=sk-your-openai-api-key-here
Example for SvelteKit (.env):
PUBLIC_OPENAI_API_KEY=sk-your-openai-api-key-here
Example for Angular (src/environments/environment.ts):
export const environment = {
production: false,
openaiApiKey: 'sk-your-openai-api-key-here'
};
The tool provides both a block tool and an inline tool. Import and configure both in your Editor.js setup.
IMPORTANT: You must pass the API key explicitly from your app's environment to the tool's config.
Next.js Example (Recommended)
import AITextTool, { AITextInlineTool } from 'ai-text-tool';
// Get API key from Next.js environment
const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
const editor = new EditorJS({
holder: 'editorjs',
tools: {
aiTextTool: {
class: AITextTool,
config: {
apiKey: apiKey, // Pass explicitly
promptPlaceholder: 'Enter a prompt...',
generatedTextPlaceholder: 'Generated text will appear here...',
},
},
aiInlineTool: {
class: AITextInlineTool,
config: {
apiKey: apiKey, // Pass explicitly
},
},
},
});
Vite Example
import AITextTool, { AITextInlineTool } from 'ai-text-tool';
// Get API key from Vite environment
const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
const editor = new EditorJS({
holder: 'editorjs',
tools: {
aiTextTool: {
class: AITextTool,
config: {
apiKey: apiKey,
promptPlaceholder: 'Enter a prompt...',
generatedTextPlaceholder: 'Generated text will appear here...',
},
},
aiInlineTool: {
class: AITextInlineTool,
config: {
apiKey: apiKey,
},
},
},
});
Create React App Example
import AITextTool, { AITextInlineTool } from 'ai-text-tool';
// Get API key from CRA environment
const apiKey = process.env.REACT_APP_OPENAI_API_KEY;
const editor = new EditorJS({
holder: 'editorjs',
tools: {
aiTextTool: {
class: AITextTool,
config: {
apiKey: apiKey,
promptPlaceholder: 'Enter a prompt...',
generatedTextPlaceholder: 'Generated text will appear here...',
},
},
aiInlineTool: {
class: AITextInlineTool,
config: {
apiKey: apiKey,
},
},
},
});
Nuxt 3 / Vue 3 Example
import AITextTool, { AITextInlineTool } from 'ai-text-tool';
// Get API key from Nuxt runtime config
// Add to nuxt.config.ts: runtimeConfig.public.openaiApiKey
const config = useRuntimeConfig();
const apiKey = config.public.openaiApiKey;
// Or use Vite env vars in Nuxt
// const apiKey = import.meta.env.VITE_OPENAI_API_KEY;
const editor = new EditorJS({
holder: 'editorjs',
tools: {
aiTextTool: {
class: AITextTool,
config: {
apiKey: apiKey,
promptPlaceholder: 'Enter a prompt...',
generatedTextPlaceholder: 'Generated text will appear here...',
},
},
aiInlineTool: {
class: AITextInlineTool,
config: {
apiKey: apiKey,
},
},
},
});
SvelteKit Example
import AITextTool, { AITextInlineTool } from 'ai-text-tool';
import { env } from '$env/dynamic/public';
// Get API key from SvelteKit public env
// Add PUBLIC_OPENAI_API_KEY to your .env file
const apiKey = env.PUBLIC_OPENAI_API_KEY;
// Or use static imports
// import { PUBLIC_OPENAI_API_KEY } from '$env/static/public';
const editor = new EditorJS({
holder: 'editorjs',
tools: {
aiTextTool: {
class: AITextTool,
config: {
apiKey: apiKey,
promptPlaceholder: 'Enter a prompt...',
generatedTextPlaceholder: 'Generated text will appear here...',
},
},
aiInlineTool: {
class: AITextInlineTool,
config: {
apiKey: apiKey,
},
},
},
});
Angular Example
import AITextTool, { AITextInlineTool } from 'ai-text-tool';
import { environment } from './environments/environment';
// Get API key from Angular environment
// Add openaiApiKey to your environment.ts
const apiKey = environment.openaiApiKey;
const editor = new EditorJS({
holder: 'editorjs',
tools: {
aiTextTool: {
class: AITextTool,
config: {
apiKey: apiKey,
promptPlaceholder: 'Enter a prompt...',
generatedTextPlaceholder: 'Generated text will appear here...',
},
},
aiInlineTool: {
class: AITextInlineTool,
config: {
apiKey: apiKey,
},
},
},
});
The following configuration options are available for customization:
| Option | Description | Default Value |
|---|---|---|
apiKey
| The API key for accessing the AI service (e.g., OpenAI API). Must be passed explicitly from your app's environment variables (e.g., process.env.NEXT_PUBLIC_OPENAI_API_KEY) |
undefined (required)
|
promptPlaceholder | Placeholder text in the input field where users type the prompt | Enter a prompt... |
generatedTextPlaceholder | Placeholder text for the output area where generated text will appear |
Generated text will appear here...
|
readOnly | Whether the tool is in read-only mode (cannot be edited by the user) | false |
The block tool generates complete text blocks from scratch:
The inline tool transforms existing text with AI:
When the block tool is saved, it returns:
{
"prompt": "Write a paragraph about climate change",
"generatedText": "Climate change is one of the most pressing challenges..."
}
The inline tool modifies existing text in place and doesn't create separate data structures. Changes are applied directly to the text content of the block.
The tool includes default styles via index.css. The CSS includes:
Import the styles in your project:
import 'ai-text-tool/index.css';
{
class: AITextTool,
config: {
apiKey?: string, // Optional: OpenAI API key (auto-detected from env if not provided)
promptPlaceholder?: string, // Optional: Prompt input placeholder
generatedTextPlaceholder?: string, // Optional: Output area placeholder
readOnly?: boolean // Optional: Read-only mode (default: false)
}
}
{
class: AITextInlineTool,
config: {
apiKey?: string, // Optional: OpenAI API key (auto-detected from env if not provided)
maxTokens?: number // Optional: Maximum tokens for generation (default: 8000)
}
}
We welcome contributions to this tool! To contribute:
This project is licensed under the ISC License - see the LICENSE file for details.
For issues, questions, or feature requests, please open an issue on the GitHub repository.
apiKey config optional - can now omit it entirely if using environment variablesFAQs
An AI text generation tool for EditorJS with automatic environment variable detection
We found that ai-text-tool demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.