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

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

#### Step 2: Subscribe to text selection events

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>

#### 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`](/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>

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

<Tabs>
  <Tab title="Option A: Replace selected text">
    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: aiResponse.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: aiResponse.text, event });

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

  <Tab title="Option B: Add a comment to selected text">
    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: aiResponse.text, 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: aiResponse.text, event });

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

## Complete Example

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

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