> ## 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.

# Customize Behavior

# addComment

Create a comment annotation anchored to the text range from a [`TextSelectedEvent`](/api-reference/sdk/models/data-models#textselectedevent).

* **Params:** [`RewriterAddCommentRequest`](/api-reference/sdk/models/data-models#rewriteraddcommentrequest)
* **Returns:** `Promise<`[`RewriterAddCommentResponse`](/api-reference/sdk/models/data-models#rewriteraddcommentresponse)`>`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    const rewriterElement = client.getRewriterElement();

    const result = await rewriterElement.addComment({ text: 'Consider simplifying this.', event });

    if (result.success) {
      console.log('Created annotation:', result.annotationId);
    }
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const rewriterElement = Velt.getRewriterElement();

    const result = await rewriterElement.addComment({ text: 'Consider simplifying this.', event });

    if (result.success) {
      console.log('Created annotation:', result.annotationId);
    }
    ```
  </Tab>
</Tabs>

# askAi

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

* **Params:** [`RewriterAskAiRequest`](/api-reference/sdk/models/data-models#rewriteraskairequest)
* **Returns:** `Promise<`[`RewriterAskAiResponse`](/api-reference/sdk/models/data-models#rewriteraskairesponse)`>`

<Tabs>
  <Tab title="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>

  <Tab title="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);
    }
    ```
  </Tab>
</Tabs>

# enableRewriter

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    const rewriterElement = client.getRewriterElement();
    rewriterElement.enableRewriter();
    rewriterElement.disableRewriter(); //to disable

    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    if (Velt) {
      const rewriterElement = Velt.getRewriterElement();
      rewriterElement.enableRewriter();
      rewriterElement.disableRewriter(); //to disable
    }
    ```
  </Tab>
</Tabs>

# on

Subscribe to Rewriter events. Supports `'textSelected'` to receive a [`TextSelectedEvent`](/api-reference/sdk/models/data-models#textselectedevent) whenever a user selects text in a Rewriter-enabled region.

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

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    const rewriterElement = client.getRewriterElement();

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

  <Tab title="Other Frameworks">
    ```js theme={null}
    const rewriterElement = Velt.getRewriterElement();

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

# replaceText

Replace the DOM text identified by a [`TextSelectedEvent`](/api-reference/sdk/models/data-models#textselectedevent) with new text.

* **Params:** [`RewriterReplaceTextRequest`](/api-reference/sdk/models/data-models#rewriterreplacetextrequest)
* **Returns:** `Promise<`[`RewriterReplaceTextResponse`](/api-reference/sdk/models/data-models#rewriterreplacetextresponse)`>`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    const rewriterElement = client.getRewriterElement();

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

    if (result.success) {
      console.log('Replaced:', result.originalText, '→', result.replacedText);
    }
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const rewriterElement = Velt.getRewriterElement();

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

    if (result.success) {
      console.log('Replaced:', result.originalText, '→', result.replacedText);
    }
    ```
  </Tab>
</Tabs>

# enableDefaultUI

Show or hide the built-in Velt rewriter toolbar. Calling `disableDefaultUI()` suppresses the toolbar on text selection while keeping all rewriter events active, so you can render a fully custom UI. Call `enableDefaultUI()` to restore the default toolbar.

* **Returns:** `void`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    const rewriterElement = client.getRewriterElement();

    // Show the default Velt toolbar on text selection (default state)
    rewriterElement.enableDefaultUI();

    // Hide the default Velt toolbar; handle UI yourself
    rewriterElement.disableDefaultUI();
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```js theme={null}
    const rewriterElement = Velt.getRewriterElement();

    // Show the default Velt toolbar on text selection (default state)
    rewriterElement.enableDefaultUI();

    // Hide the default Velt toolbar; handle UI yourself
    rewriterElement.disableDefaultUI();
    ```
  </Tab>
</Tabs>