> ## Documentation Index
> Fetch the complete documentation index at: https://velt.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Setup

## Setup

#### Step 1: Enable Rewriter

> [tab] React / Next.js
>
> ```js theme={null}
> const rewriterElement = client.getRewriterElement();
> rewriterElement.enableRewriter();
> rewriterElement.disableRewriter(); //to disable
>
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> 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`](https://velt.dev/docs/api-reference/sdk/models/data-models#textselectedevent) whenever a user selects text in a Rewriter-enabled region.

* **Params:** `action: 'textSelected'`
* **Returns:** `Observable<`[`TextSelectedEvent`](https://velt.dev/docs/api-reference/sdk/models/data-models#textselectedevent)`>`

> [tab] React / Next.js
>
> ```js theme={null}
> const rewriterElement = client.getRewriterElement();
>
> rewriterElement.on('textSelected').subscribe((event) => {
>   console.log('Selected text:', event.text);
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> 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`](https://velt.dev/docs/api-reference/sdk/models/data-models#rewriteraskairequest)
* **Returns:** `Promise<`[`RewriterAskAiResponse`](https://velt.dev/docs/api-reference/sdk/models/data-models#rewriteraskairesponse)`>`

> [tab] React / Next.js
>
> ```js theme={null}
> 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);
> }
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> 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.

> [tab] Option A: Replace selected text
>
> Replace the DOM text identified by a [`TextSelectedEvent`](https://velt.dev/docs/api-reference/sdk/models/data-models#textselectedevent) with new text.
>
> * **Params:** [`RewriterReplaceTextRequest`](https://velt.dev/docs/api-reference/sdk/models/data-models#rewriterreplacetextrequest)
>
> * **Returns:** `Promise<`[`RewriterReplaceTextResponse`](https://velt.dev/docs/api-reference/sdk/models/data-models#rewriterreplacetextresponse)`>`
>
> > [tab] React / Next.js
> >
> > ```js theme={null}
> > const rewriterElement = client.getRewriterElement();
> >
> > const result = await rewriterElement.replaceText({ text: aiResponse.text, event });
> >
> > if (result.success) {
> >   console.log('Replaced:', result.originalText, '→', result.replacedText);
> > }
> > ```
>
> > [tab] Other Frameworks
> >
> > ```js theme={null}
> > const rewriterElement = Velt.getRewriterElement();
> >
> > const result = await rewriterElement.replaceText({ text: aiResponse.text, event });
> >
> > if (result.success) {
> >   console.log('Replaced:', result.originalText, '→', result.replacedText);
> > }
> > ```

> [tab] Option B: Add a comment to selected text
>
> Create a comment annotation anchored to the text range from a [`TextSelectedEvent`](https://velt.dev/docs/api-reference/sdk/models/data-models#textselectedevent).
>
> * **Params:** [`RewriterAddCommentRequest`](https://velt.dev/docs/api-reference/sdk/models/data-models#rewriteraddcommentrequest)
>
> * **Returns:** `Promise<`[`RewriterAddCommentResponse`](https://velt.dev/docs/api-reference/sdk/models/data-models#rewriteraddcommentresponse)`>`
>
> > [tab] React / Next.js
> >
> > ```js theme={null}
> > const rewriterElement = client.getRewriterElement();
> >
> > const result = await rewriterElement.addComment({ text: aiResponse.text, event });
> >
> > if (result.success) {
> >   console.log('Created annotation:', result.annotationId);
> > }
> > ```
>
> > [tab] Other Frameworks
> >
> > ```js theme={null}
> > const rewriterElement = Velt.getRewriterElement();
> >
> > const result = await rewriterElement.addComment({ text: aiResponse.text, event });
> >
> > if (result.success) {
> >   console.log('Created annotation:', result.annotationId);
> > }
> > ```

## Complete Example

> [tab] React / Next.js
>
> ```js theme={null}
> 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 });
>   }
> });
> ```

> [tab] Other Frameworks
>
> ```js theme={null}
> 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 });
>   }
> });
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.