@imgly/plugin-ai-text-generation-web
Advanced tools
A plugin for integrating AI text generation capabilities into CreativeEditor SDK.
The @imgly/plugin-ai-text-generation-web package enables users to generate and transform text using AI directly within CreativeEditor SDK. This plugin provides text generation capabilities through AI models like Anthropic Claude.
Features include:
npm install @imgly/plugin-ai-text-generation-web
To use the plugin, import it and configure it with your preferred provider(s):
import CreativeEditorSDK from '@cesdk/cesdk-js';
import TextGeneration from '@imgly/plugin-ai-text-generation-web';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';
// Initialize CreativeEditor SDK
CreativeEditorSDK.create(domElement, {
license: 'your-license-key'
// Other configuration options...
}).then(async (cesdk) => {
// Add the text generation plugin
cesdk.addPlugin(
TextGeneration({
provider: Anthropic.AnthropicProvider({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
model: 'claude-3-7-sonnet-20250219', // Optional model selection (this is also the default)
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
}),
// Optional configuration
debug: false
})
);
// Set canvas menu order to display AI text actions
cesdk.ui.setCanvasMenuOrder([
'ly.img.ai.text.canvasMenu',
...cesdk.ui.getCanvasMenuOrder()
]);
});
You can configure multiple providers, and users will see a selection box to choose between them:
import CreativeEditorSDK from '@cesdk/cesdk-js';
import TextGeneration from '@imgly/plugin-ai-text-generation-web';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';
// Initialize CreativeEditor SDK
CreativeEditorSDK.create(domElement, {
license: 'your-license-key'
// Other configuration options...
}).then(async (cesdk) => {
// Add the text generation plugin with multiple providers
cesdk.addPlugin(
TextGeneration({
provider: [
Anthropic.AnthropicProvider({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
model: 'claude-3-7-sonnet-20250219', // Optional model selection (this is also the default)
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
}),
// Add more providers here as they become available
// OtherProvider.SomeModel({
// proxyUrl: 'http://your-proxy-server.com/api/proxy',
// headers: {
// 'x-api-key': 'your-key',
// 'x-source': 'cesdk'
// }
// })
],
// Optional configuration
debug: false
})
);
// Set canvas menu order to display AI text actions
cesdk.ui.setCanvasMenuOrder([
'ly.img.ai.text.canvasMenu',
...cesdk.ui.getCanvasMenuOrder()
]);
});
The plugin currently includes the following providers:
A versatile text generation model that handles various text transformations:
provider: Anthropic.AnthropicProvider({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional model selection (this is also the default)
model: 'claude-3-7-sonnet-20250219',
// Optional custom headers for API requests
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0',
'x-request-source': 'cesdk-plugin'
},
// Optional debug mode
debug: false
});
Default Model: If no model is specified, the provider uses 'claude-3-7-sonnet-20250219' by default.
Key features:
A powerful text generation model that handles various text transformations:
provider: OpenAIText.OpenAIProvider({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
// Optional model selection (this is also the default)
model: 'gpt-4o-mini',
// Optional custom headers for API requests
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0',
'x-request-source': 'cesdk-plugin'
},
// Optional debug mode
debug: false
});
Default Model: If no model is specified, the provider uses 'gpt-4o-mini' by default.
Key features:
The plugin accepts the following configuration options:
| Option | Type | Description | Default |
|---|---|---|---|
provider | Provider | Provider[] | Provider(s) for text generation and transformation. When multiple providers are provided, users can select between them | required |
debug | boolean | Enable debug logging | false |
middleware | Function[] | Array of middleware functions for the generation | undefined |
The middleware option allows you to add pre-processing and post-processing capabilities to the generation process:
import TextGeneration from '@imgly/plugin-ai-text-generation-web';
import Anthropic from '@imgly/plugin-ai-text-generation-web/anthropic';
import OpenAIText from '@imgly/plugin-ai-text-generation-web/open-ai';
import { loggingMiddleware, rateLimitMiddleware } from '@imgly/plugin-ai-generation-web';
// Create middleware functions
const logging = loggingMiddleware();
const rateLimit = rateLimitMiddleware({
maxRequests: 20,
timeWindowMs: 60000, // 1 minute
onRateLimitExceeded: (input, options, info) => {
console.log(`Text generation rate limit exceeded: ${info.currentCount}/${info.maxRequests}`);
return false; // Reject request
}
});
// Create custom middleware
const customMiddleware = async (input, options, next) => {
console.log('Before generation:', input);
// Add custom fields or modify the input
const modifiedInput = {
...input,
customField: 'custom value'
};
// Call the next middleware or generation function
const result = await next(modifiedInput, options);
console.log('After generation:', result);
// You can also modify the result before returning it
return result;
};
// Apply middleware to plugin
cesdk.addPlugin(
TextGeneration({
provider: Anthropic.AnthropicProvider({
proxyUrl: 'http://your-proxy-server.com/api/proxy'
}),
middleware: [logging, rateLimit, customMiddleware] // Apply middleware in order
})
);
Built-in middleware options:
You can also create custom middleware functions to meet your specific needs.
For security reasons, you must use a proxy server to handle API requests to Anthropic. The proxy URL is required when configuring providers:
provider: Anthropic.AnthropicProvider({
proxyUrl: 'http://your-proxy-server.com/api/proxy',
headers: {
'x-custom-header': 'value',
'x-client-version': '1.0.0'
}
});
Your proxy server should:
The headers option allows you to include custom HTTP headers in all API requests. This is useful for:
Never expose your API keys in client-side code.
TextGeneration(options: PluginConfiguration): EditorPlugin
Creates and returns a plugin that can be added to CreativeEditor SDK.
interface PluginConfiguration {
// Provider(s) for text generation and transformation
provider: (context: {
cesdk: CreativeEditorSDK;
}) => Promise<Provider<'text', any, any> | Provider<'text', any, any>[]>;
// Enable debug logging
debug?: boolean;
}
Anthropic.AnthropicProvider(config: {
proxyUrl: string;
model?: string;
headers?: Record<string, string>;
debug?: boolean;
})
OpenAIText.OpenAIProvider(config: {
proxyUrl: string;
model?: string;
headers?: Record<string, string>;
debug?: boolean;
})
The plugin automatically registers the following UI components:
The plugin automatically registers quick actions for text transformation. Here are the available quick actions:
ly.img.improve: Improve writing quality
{ prompt: string }ly.img.fix: Fix spelling and grammar
{ prompt: string }ly.img.shorter: Make text shorter
{ prompt: string }ly.img.longer: Make text longer
{ prompt: string }ly.img.changeTone: Change the tone of the text
{ prompt: string, type: string }ly.img.translate: Translate text to different languages
{ prompt: string, language: string }ly.img.changeTextTo: Change text to a different format or style
{ prompt: string, customPrompt: string }Providers declare which quick actions they support through their configuration:
const myTextProvider = {
// ... other provider config
input: {
// ... panel config
quickActions: {
supported: {
'ly.img.improve': {
mapInput: (quickActionInput) => ({
prompt: quickActionInput.prompt
})
},
'ly.img.fix': {
mapInput: (quickActionInput) => ({
prompt: quickActionInput.prompt
})
},
'ly.img.changeTone': {
mapInput: (quickActionInput) => ({
prompt: quickActionInput.prompt,
tone: quickActionInput.type
})
}
// Add more supported quick actions as needed
}
}
}
};
To add the AI text menu to your canvas menu, use:
cesdk.ui.setCanvasMenuOrder([
'ly.img.ai.text.canvasMenu',
...cesdk.ui.getCanvasMenuOrder()
]);
This plugin is part of the IMG.LY plugin ecosystem for CreativeEditor SDK. Please refer to the license terms in the package.
FAQs
AI text generation plugin for the CE.SDK editor
The npm package @imgly/plugin-ai-text-generation-web receives a total of 566 weekly downloads. As such, @imgly/plugin-ai-text-generation-web popularity was classified as not popular.
We found that @imgly/plugin-ai-text-generation-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 12 open source maintainers 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.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.