Setup

Setup

Step 1: Enable Rewriter

React / Next.js

const rewriterElement = client.getRewriterElement();
rewriterElement.enableRewriter();
rewriterElement.disableRewriter(); //to disable

Other Frameworks

if (Velt) {
  const rewriterElement = Velt.getRewriterElement();
  rewriterElement.enableRewriter();
  rewriterElement.disableRewriter(); //to disable
}

Step 2: Subscribe to text selection events

Subscribe to Rewriter events. Supports 'textSelected' to receive a TextSelectedEvent whenever a user selects text in a Rewriter-enabled region.

• Params: action: 'textSelected'
• Returns: Observable<TextSelectedEvent>

React / Next.js

const rewriterElement = client.getRewriterElement();

rewriterElement.on('textSelected').subscribe((event) => {
  console.log('Selected text:', event.text);
});

Other Frameworks

const rewriterElement = Velt.getRewriterElement();

rewriterElement.on('textSelected').subscribe((event) => {
  console.log('Selected text:', event.text);
});

Step 3: Send a prompt to AI

Send a text-generation prompt to any AI model via Velt’s api. The provider is resolved automatically from the model name prefix (gpt-*/o1-*/o3-*/o4-* → OpenAI, claude-* → Anthropic, gemini-* → Gemini).

• Params: RewriterAskAiRequest
• Returns: Promise<RewriterAskAiResponse>

React / Next.js

const rewriterElement = client.getRewriterElement();

const response = await rewriterElement.askAi({
  model: 'gemini-2.5-flash',
  prompt: 'Make it more formal',
  selectedText: event.text,
});

if (response.success) {
  console.log('AI output:', response.text);
}

Other Frameworks

const rewriterElement = Velt.getRewriterElement();

const response = await rewriterElement.askAi({
  model: 'gemini-2.5-flash',
  prompt: 'Make it more formal',
  selectedText: event.text,
});

if (response.success) {
  console.log('AI output:', response.text);
}

Step 4: Take action on the returned result

Once you have the AI response, you can either replace the selected text in the DOM or anchor a comment to it. Choose the option that fits your use case, or combine both.

Option A: Replace selected text

Replace the DOM text identified by a TextSelectedEvent with new text.

• Params: RewriterReplaceTextRequest
• Returns: Promise<RewriterReplaceTextResponse>

React / Next.js

const rewriterElement = client.getRewriterElement();

const result = await rewriterElement.replaceText({ text: aiResponse.text, event });

if (result.success) {
  console.log('Replaced:', result.originalText, '→', result.replacedText);
}

Other Frameworks

const rewriterElement = Velt.getRewriterElement();

const result = await rewriterElement.replaceText({ text: aiResponse.text, event });

if (result.success) {
  console.log('Replaced:', result.originalText, '→', result.replacedText);
}

Option B: Add a comment to selected text

Create a comment annotation anchored to the text range from a TextSelectedEvent.

• Params: RewriterAddCommentRequest
• Returns: Promise<RewriterAddCommentResponse>

React / Next.js

const rewriterElement = client.getRewriterElement();

const result = await rewriterElement.addComment({ text: aiResponse.text, event });

if (result.success) {
  console.log('Created annotation:', result.annotationId);
}

Other Frameworks

const rewriterElement = Velt.getRewriterElement();

const result = await rewriterElement.addComment({ text: aiResponse.text, event });

if (result.success) {
  console.log('Created annotation:', result.annotationId);
}

Complete Example

React / Next.js

const rewriterElement = client.getRewriterElement();
rewriterElement.enableRewriter();

rewriterElement.on('textSelected').subscribe(async (event) => {
  const aiResponse = await rewriterElement.askAi({
    model: 'gemini-2.5-flash',
    prompt: 'Make it more formal',
    selectedText: event.text,
  });
  if (aiResponse.success) {
    await rewriterElement.replaceText({ text: aiResponse.text, event });
  }
});

Other Frameworks

const rewriterElement = Velt.getRewriterElement();
rewriterElement.enableRewriter();

rewriterElement.on('textSelected').subscribe(async (event) => {
  const aiResponse = await rewriterElement.askAi({
    model: 'gemini-2.5-flash',
    prompt: 'Make it more formal',
    selectedText: event.text,
  });
  if (aiResponse.success) {
    await rewriterElement.replaceText({ text: aiResponse.text, event });
  }
});