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

<Steps titleSize="h2">
  <Step title="Retrieve Comment Annotations">
    * Retrieve all comment annotations data.
    * [Learn more](/async-collaboration/comments/customize-behavior#getcommentannotations).

    <Tabs>
      <Tab title="React / Next.js">
        Using Hooks:

        ```jsx theme={null}
        let commentAnnotations = useCommentAnnotations()
        ```

        Using API:

        ```js theme={null}
        const commentElement = client.getCommentElement();
        let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
          // console.log(commentAnnotations);
        });
        ```

        To unsubscribe from the subscription:

        ```jsx theme={null}
        subscription?.unsubscribe()
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```js theme={null}
        const commentElement = Velt.getCommentElement();
        let subscription = commentElement.getAllCommentAnnotations().subscribe((commentAnnotations) => {
          // console.log(commentAnnotations);
        });
        ```

        To unsubscribe from the subscription:

        ```jsx theme={null}
        subscription?.unsubscribe()
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Add the Velt Comment Thread component">
    * Iterate over the `Comment Annotations` array and add the `Velt Comment Thread` component.
    * Pass the `annotation Id` prop to set the specific Comment Thread data.

    Here's an improved example:

    <Tabs>
      <Tab title="React / Next.js">
        ```jsx theme={null}

        let commentAnnotations = useCommentAnnotations()

        return (
          <div>
            {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
          </div>
        )
        ```
      </Tab>

      <Tab title="Other Frameworks">
        ```html theme={null}
        <!-- 
          If you are using pure html, inject <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
          In other frameworks, you can loop over the comments inside the template itself
        -->
        <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
        ```
      </Tab>
    </Tabs>
  </Step>
</Steps>

<RequestExample>
  ```jsx React / Next.js theme={null}
  import { VeltCommentThread, useCommentAnnotations } from '@veltdev/react';

  export default function YourDocument() {

    let commentAnnotations = useCommentAnnotations()

    return (
      <div>
        {commentAnnotations.map((x,i) => <VeltCommentThread key={i} annotationId={x.annotationId}/>)}
      </div>
    )
  }
  ```

  ```js Other Frameworks theme={null}
  const commentElement = client.getCommentElement();
  let subscription = commentElement.getAllCommentAnnotations().subscribe((comments) => {
      // If you are using pure html, inject <velt-comment-thread annotation-id="ANNOTATION_ID"></velt-comment-thread>
      // In other frameworks, you can loop over the comments inside the template itself
  });

  //To unsubscribe from the subscription:
  subscription?.unsubscribe()
  ```
</RequestExample>