Setup

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments /> {/* Add VeltComments to the root of your app provider */}
      <VeltCommentsSidebar /> {/* Add VeltCommentsSidebar to the root of your app provider */}

      <div className="toolbar">
        <VeltCommentTool /> {/* Add VeltCommentTool wherever you want it to appear */}
        <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */}
      </div>

    </VeltProvider>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Collaboration App</title>
    <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
    <script>
      async function loadVelt() {
        await Velt.init("YOUR_VELT_API_KEY");
      }
    </script>
  </head>
  <body>
    <velt-comments></velt-comments> <!-- add to the root of your app-->
    <velt-comments-sidebar></velt-comments-sidebar> <!-- add to the root of your app -->
    <div class="toolbar"> <!-- a component representing a toolbar-->
      <velt-comment-tool></velt-comment-tool> <!-- add wherever you want it to appear-->
      <velt-sidebar-button></velt-sidebar-button> <!-- add wherever you want it to appear -->
    </div>
    

  </body>
</html>

React / Next.js
Other Frameworks

Import Comments Sidebar Components

Import the Comments Sidebar Components.

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

Add Comments and Sidebar components

Add the VeltComments and VeltCommentsSidebar components to the root of your app.

<div>
  <VeltComments />
  <VeltCommentsSidebar />
</div>

Add Sidebar button and Comment Tool component

Add the Sidebar button to toggle the sidebar. Add the VeltCommentTool component to leave comments.

<div className="toolbar">
  <VeltSidebarButton />
  <VeltCommentTool />
</div>

This is completely optional and you can toggle the sidebar in the comment dialog as well.

Test Integration

Test it out by opening the sidebar.You should be able to click the All comments link in a comment dialog box on the bottom.

Place the <velt-comments-sidebar> component

Place the <velt-comments-sidebar> component at the root of your app.

<velt-comments-sidebar></velt-comments-sidebar>

Place the <velt-sidebar-button> component

Place the <velt-sidebar-button> component wherever you want the toggle button to appear.

<velt-sidebar-button></velt-sidebar-button>

import { 
  VeltProvider, 
  VeltCommentsSidebar, 
  VeltSidebarButton,
  VeltCommentTool 
} from '@veltdev/react';

export default function App() {

  return (
    <VeltProvider apiKey="API_KEY">
      <VeltComments /> {/* Add VeltComments to the root of your app provider */}
      <VeltCommentsSidebar /> {/* Add VeltCommentsSidebar to the root of your app provider */}

      <div className="toolbar">
        <VeltCommentTool /> {/* Add VeltCommentTool wherever you want it to appear */}
        <VeltSidebarButton /> {/* Add VeltCommentSideBarButton wherever you want it to appear */}
      </div>

    </VeltProvider>
  );
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Collaboration App</title>
    <script type="module" src="https://cdn.velt.dev/lib/sdk@latest/velt.js" onload="loadVelt()"></script>
    <script>
      async function loadVelt() {
        await Velt.init("YOUR_VELT_API_KEY");
      }
    </script>
  </head>
  <body>
    <velt-comments></velt-comments> <!-- add to the root of your app-->
    <velt-comments-sidebar></velt-comments-sidebar> <!-- add to the root of your app -->
    <div class="toolbar"> <!-- a component representing a toolbar-->
      <velt-comment-tool></velt-comment-tool> <!-- add wherever you want it to appear-->
      <velt-sidebar-button></velt-sidebar-button> <!-- add wherever you want it to appear -->
    </div>
    

  </body>
</html>

Overview Customize Behavior

⌘I

Get Started

Agentic Setup

Key Concepts

Async Collaboration

Realtime Collaboration

AI

Self-Host Data

Backend SDKs

Model Context Protocol

Webhooks

Security

Miscellaneous