Add visual feedback to your Next.js app.

01 · Create a project

Sign up free with Google and create a project in the dashboard. Its Install tab shows the tag with your project key filled in. The Free plan costs $0 a month.

No Next.js app yet? Start one:

npx create-next-app@latest my-app

02 · Add the script tag

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pinthread.dev/embed.js"
          data-project="YOUR_PROJECT_KEY"
        />
      </body>
    </html>
  );
}

import type { AppProps } from "next/app";
import Script from "next/script";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://pinthread.dev/embed.js"
        data-project="YOUR_PROJECT_KEY"
      />
    </>
  );
}

Replace YOUR_PROJECT_KEY with the key from the Install tab. The key is public: it only tells the widget which project to load.

03 · Check that it works

Run npm run dev and open the app on localhost. The pinthread button shows at the edge of the page, and the project’s Install tab changes from waiting to installed. Click the button, sign in, and pin a comment to any element.

Pages on localhost and 127.0.0.1 load pinthread for every project. For a deployed site, add its address under the project’s Settings.

Troubleshooting

Two pinthread buttons appear

The tag is in more than one layout. Keep it only in the root layout or in _app.tsx.

The button shows locally but not on Vercel

Add the deployment address, such as https://my-app.vercel.app, under the project’s Settings. Local addresses work without this step.

You want feedback on previews only

Render the tag only when NEXT_PUBLIC_VERCEL_ENV is not production. The configuration page shows the code.

Connect your coding agent

pinthread is also an MCP server. Claude Code, Cursor, or Codex can read every comment with its page and element, make the change, and reply in the thread.

• Agent workflow guideFrom a comment on the page to a fix in your code.
• MCP server referenceTokens, scopes, and every tool.

Questions

Other frameworks

• ViteReact, Vue, or Svelte: one tag in index.html.
• AstroAn inline script in your base layout.
• SvelteKitOne tag in src/app.html.
• NuxtA head script in nuxt.config.ts.
• AngularOne tag in src/index.html.
• HTMLStatic sites, site generators, and templates.
• All install stepsAccount, project, and invitations.