Getting started with the Copylume React widget

The Copylume widget lets you add a “Generate” button next to any text field. When the user clicks it, they get AI suggestions based on your context and constraints; one click applies the chosen text to the field.

Install

npm install @copylume/widget

You’ll also need a Copylume API (or your own backend that implements the same contract).

Basic usage

import { CopylumeField } from '@copylume/widget';

<CopylumeField
  template="hero_title"
  context={{
    businessType: 'Car wash',
    brandName: 'Rio Shine',
    tone: 'Premium',
  }}
  constraints={{ minWords: 6, maxWords: 10 }}
  onApply={(text) => setTitle(text)}
/>;

• template — e.g. hero_title, hero_subtitle, hero_cta. Defines the kind of copy.
• context — Business/product context (brand, tone, audience, keywords, etc.). Optional brief for extra instructions.
• constraints — Min/max words, banned words, style guidelines.
• onApply — Callback when the user picks a suggestion; update your state (or form value) here.

Optional: theme and defaults

Use CopylumeThemeProvider and CopylumeProvider to set default apiUrl, apiKey, locale, and theme tokens so you don’t repeat them on every field.

For full props and theming, see the API docs and the README in the repo.