Overplay docs

Quick start

Create a projectSign up or self-host.
Add the widgetUse the AI prompt or the code below.
Sign in on your siteApprove the address once, then comment.

Fastest: AI Install

Open your project in the dashboard, choose Install, and copy the AI Install prompt into Claude Code, Cursor or Copilot. The agent finds your framework and adds the widget.

Install

Install the package, then start the widget once, in the browser. With Community, use your own server URL.

Terminal

npm install overplay@^4

main.js

import { initOverplay } from 'overplay';

const widget = initOverplay({
  serverUrl: 'https://overplay.app',
  projectId: 'YOUR_PROJECT_ID'
});

// When your app unmounts:
widget.destroy();

No bundler? Add the script tag before </body>:

index.html

<script src="https://overplay.app/widget.js"></script>
<script>
  Overplay.init({
    serverUrl: 'https://overplay.app',
    projectId: 'YOUR_PROJECT_ID'
  });
</script>

React, Next.js and Vue examples are in your project’s Install tab under Manual Install. With server rendering, start the widget on the client only.

Pin to components

Give important components a stable, unique name. Pins remember their place inside that component, so they follow responsive layouts. If a component disappears, its pins hide until it comes back.

HTML

<section data-overplay-anchor="pricing:pro">
  …
</section>

Websites and sign-in

The project ID is public

It grants nothing alone. Only signed-in project members can read or write comments.

New addresses are approved once

The first time a member signs in on localhost or a preview deployment, they approve it. Owners can allow only a fixed list of websites in project settings.

AI agents (MCP)

Connect Claude Code, Cursor or another agent to the Overplay MCP server. The agent reads feedback, finds the element, replies and resolves the thread when the fix is done. Choose projects and permissions on the MCP Server page of the dashboard.

Set Up MCP

Update the widget

On localhost, the widget shows when a new version is out, with a prompt for your coding agent. A new package version alone is often not enough: clear the bundler cache and restart the dev server.

Terminal

npm install overplay@latest
rm -rf node_modules/.vite .next   # the cache of your bundler
npm run dev

The script tag loads the server’s copy, so it updates by itself.

Local demo mode

Call initOverplay() with no options. Notes stay in that browser and are not shared.

Add Overplay in a few minutes.