Core library for Classy Comments - AI-powered comment refinement
AI-powered comment refinement library for JavaScript and TypeScript. Automatically improve comment quality, filter profanity, correct grammar, and maintain professional discussions on any website.
- AI-Powered Refinement: Automatic grammar correction, tone adjustment, and profanity filtering
- Flexible Integration: Works with vanilla JS, React, Vue, and any JavaScript framework
- Form Interception: Automatically intercepts comment submissions
- Contenteditable Support: Works with both traditional textareas and contenteditable elements
- Customizable: Full control over formality, tone, emoji handling, and more
- TypeScript: Full TypeScript support with type definitions included
``bash`
npm install @classy-comments/core
`javascript
import { ClassyComments } from '@classy-comments/core';
import '@classy-comments/core/styles.css';
const classy = new ClassyComments({
apiKey: 'your-api-key',
apiBaseUrl: 'https://api.classycomments.com',
formSelector: 'form.comment-form',
fieldSelector: 'textarea[name="comment"]',
});
await classy.init();
`
`jsx
import { useEffect, useState } from 'react';
import { ClassyComments } from '@classy-comments/core';
import '@classy-comments/core/styles.css';
function CommentForm() {
const [classy, setClassy] = useState(null);
useEffect(() => {
const instance = new ClassyComments({
apiKey: process.env.REACT_APP_CLASSY_API_KEY,
apiBaseUrl: 'https://api.classycomments.com',
formSelector: '#comment-form',
fieldSelector: '#comment-text',
});
instance.init().then(() => setClassy(instance));
}, []);
return (
$3
vue
`Manual Mode
For more control, use manual mode instead of automatic form interception:
javascript
import { ClassyComments } from '@classy-comments/core';const classy = new ClassyComments({
apiKey: 'your-api-key',
apiBaseUrl: 'https://api.classycomments.com',
});
await classy.init();
// Process a comment manually
await classy.processCommentManual('this is my comment text', {
onApprove: (approvedText) => {
console.log('User approved:', approvedText);
// Submit to your backend
},
onCancel: () => {
console.log('User cancelled');
},
});
`Configuration
javascript
const classy = new ClassyComments({
// Required
apiKey: 'your-api-key',
apiBaseUrl: 'https://api.classycomments.com', // Optional - Auto-attach to forms
formSelector: 'form.comment-form',
fieldSelector: 'textarea[name="comment"]',
// Optional - Callbacks
onApprove: (text) => console.log('Approved:', text),
onCancel: () => console.log('Cancelled'),
// Optional - Theme customization
theme: {
primaryColor: '#9333ea',
accentColor: '#f59e0b',
backgroundColor: '#ffffff',
textColor: '#1f2937',
borderColor: '#e5e7eb',
},
// Optional - Validation
validateBeforeIntercept: true, // Enable HTML5 validation before showing modal
// Optional - AI Provider Override
aiProviderOverride: 'openai', // or 'anthropic', 'ollama'
});
`API Reference
$3
Main class for comment refinement.
#### Methods
-
- Initialize the library and load configuration
- processComment(text, form?, fieldName?): Promise - Process a comment (used internally)
- processCommentManual(text, callbacks, options?): Promise - Process a comment with custom callbacks
- updateConfig(updates): Promise - Update the configuration
- getConfig(): ClassyConfig | null - Get current configuration$3
Server-side configuration is managed through your Classy Comments dashboard at https://classycomments.com/dashboard. You can configure:
- Formality Level (1-5): Control how formal the refined text should be
- Tone: friendly, neutral, or professional
- Profanity Handling: remove, soften, or keep
- Grammar Strictness (1-5): How aggressively to fix grammar
- Emoji Handling: add, remove, or keep
- Length Preference: concise, keep, or elaborate
- Custom Instructions: Additional AI instructions for your specific needs
Browser Extension Mode
The library also supports browser extension mode for processing comments on any website:
`javascript
const classy = new ClassyComments({
apiKey: 'your-extension-api-key',
apiBaseUrl: 'https://api.classycomments.com',
});await classy.init();
await classy.processCommentManual(
commentText,
{
onApprove: (text) => {
// Insert approved text back into the page
commentField.value = text;
},
},
{ mode: 'extension' }
);
`TypeScript Support
The library is written in TypeScript and includes full type definitions:
typescript
import { ClassyComments, ClassyCommentsOptions, ClassyConfig } from '@classy-comments/core';const options: ClassyCommentsOptions = {
apiKey: 'your-api-key',
apiBaseUrl: 'https://api.classycomments.com',
};
const classy = new ClassyComments(options);
`Demo Mode
No API key? Try demo mode with basic rule-based refinement:
javascript
import { ClassyModal } from '@classy-comments/core';// Demo mode uses local processing only (no AI)
const modal = new ClassyModal(
{
commentId: 'demo',
originalText: 'THIS IS MY COMMENT!!!',
classyText: 'This is my comment.',
},
{
onApprove: (text) => console.log('Approved:', text),
onCancel: () => console.log('Cancelled'),
}
);
modal.show();
`Examples
$3
For WordPress, we recommend using our official WordPress plugin which handles all the integration automatically.
$3
Override default styles with CSS variables:
css
:root {
--classy-primary-color: #9333ea;
--classy-primary-hover: #7c3aed;
--classy-accent-color: #f59e0b;
--classy-background-color: #ffffff;
--classy-text-color: #1f2937;
--classy-border-color: #e5e7eb;
}
`Or use the theme option:
javascript
const classy = new ClassyComments({
apiKey: 'your-api-key',
theme: {
primaryColor: '#ff6b6b',
accentColor: '#4ecdc4',
},
});
``1. Sign up at https://classycomments.com/register
2. Create a new client in your dashboard
3. Copy your API key
4. Add it to your environment variables
Free tier includes 50 refinements/month. No credit card required.
- Documentation: https://classycomments.com/docs/npm
- Dashboard: https://classycomments.com/dashboard
- API Reference: https://classycomments.com/docs/api
- WordPress Plugin: https://classycomments.com/docs/wordpress
- Browser Extension: https://classycomments.com/docs/extension
- GitHub: https://github.com/yourusername/classy-comments
- Support: support@classycomments.com
MIT