@classy-comments/core

AI-powered comment refinement library for JavaScript and TypeScript. Automatically improve comment quality, filter profanity, correct grammar, and maintain professional discussions on any website.

Features

• 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

Installation

npm install @classy-comments/core

Quick Start

Vanilla 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();

React

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 (
    <form id="comment-form">
      <textarea id="comment-text" name="comment" />
      <button type="submit">Submit</button>
    </form>
  );
}

Vue

<template>
  <form ref="commentForm">
    <textarea name="comment" />
    <button type="submit">Submit</button>
  </form>
</template>

<script>
import { ClassyComments } from '@classy-comments/core';
import '@classy-comments/core/styles.css';

export default {
  mounted() {
    const classy = new ClassyComments({
      apiKey: process.env.VUE_APP_CLASSY_API_KEY,
      apiBaseUrl: 'https://api.classycomments.com',
      formSelector: 'form',
      fieldSelector: 'textarea[name="comment"]',
    });

    classy.init();
  },
};
</script>

Manual Mode

For more control, use manual mode instead of automatic form interception:

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

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

ClassyComments

Main class for comment refinement.

Methods

• init(): Promise<void> - Initialize the library and load configuration
• processComment(text, form?, fieldName?): Promise<void> - Process a comment (used internally)
• processCommentManual(text, callbacks, options?): Promise<void> - Process a comment with custom callbacks
• updateConfig(updates): Promise<void> - Update the configuration
• getConfig(): ClassyConfig | null - Get current configuration

Configuration Options

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:

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:

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:

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

WordPress Integration

For WordPress, we recommend using our official WordPress plugin which handles all the integration automatically.

Custom Styling

Override default styles with CSS variables:

: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:

const classy = new ClassyComments({
  apiKey: 'your-api-key',
  theme: {
    primaryColor: '#ff6b6b',
    accentColor: '#4ecdc4',
  },
});

Getting an API Key

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.

Links

• 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: [email protected]

License

MIT