Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
Setup
Step 1: Enable Rewriter
React / Next.js
Other Frameworks
const rewriterElement = client.getRewriterElement();
rewriterElement.enableRewriter();
rewriterElement.disableRewriter(); //to disable
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.
React / Next.js
Other Frameworks
const rewriterElement = client.getRewriterElement();
rewriterElement.on('textSelected').subscribe((event) => {
console.log('Selected text:', event.text);
});
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).
React / Next.js
Other Frameworks
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);
}
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.
Replace the DOM text identified by a TextSelectedEvent with new text. React / Next.js
Other Frameworks
const rewriterElement = client.getRewriterElement();
const result = await rewriterElement.replaceText({ text: aiResponse.text, event });
if (result.success) {
console.log('Replaced:', result.originalText, '→', result.replacedText);
}
const rewriterElement = Velt.getRewriterElement();
const result = await rewriterElement.replaceText({ text: aiResponse.text, event });
if (result.success) {
console.log('Replaced:', result.originalText, '→', result.replacedText);
}
Complete Example
React / Next.js
Other Frameworks
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 });
}
});
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 });
}
});
