Install pinthread.

Paste this prompt into your coding agent, or follow the steps below. Works with React, Astro, Vue, and plain JavaScript.

Add pinthread to this website. Install pinthread, run `npx pinthread init --origin <dev server URL>` in the background, and mount initPinthread() from ./pinthread.config.js on the client for dev and preview builds. Then ask me to choose Connect pinthread to sign in. Docs: https://pinthread.dev/install/

Or install manually. Requires Node.js 22 or newer.

01 · Install the package

npm install pinthread

02 · Create your project

npx pinthread init

Keep this terminal open while you start your app in another terminal.

03 · Add pinthread to your app

Setup creates pinthread.config.js and updates it automatically when you connect. Choose your framework and adjust the import path to that file.

'use client';
import { useEffect } from 'react';
import { initPinthread } from './pinthread.config.js';

export function Pinthread() {
  useEffect(() => {
    const pinthread = initPinthread();
    return () => pinthread.destroy();
  }, []);
  return null;
}

Render <Pinthread /> once in your app or layout. Keep this component after connecting.

<script>
  import { initPinthread } from './pinthread.config.js';
  initPinthread();
</script>

With Astro’s client router, destroy the controller on astro:before-swap, then initialize on astro:page-load.

import { initPinthread } from './pinthread.config.js';

const pinthread = initPinthread();

Run after your page mounts. Call pinthread.destroy() when removing the page.

04 · Connect from your site

Open your app and choose Connect pinthread in the sidebar. Review your site addresses, then sign in with Google. Setup saves your project automatically—you’re ready to comment.

Set up pinthread

Connect pinthread to start leaving feedback on this site.

your-site.com

preview.your-site.com

Connect pinthreadConnected

Share your preview with a teammate. They can leave their name to reply, or sign in with Google.

Already connected? Use inline options

The generated helper keeps working. If you prefer inline options in React, replace the component above with usePinthread. Use the project key printed in your terminal; never mount both.

'use client';
import { usePinthread } from 'pinthread/react';

export function Pinthread() {
  usePinthread({ project: 'YOUR_PROJECT_KEY' });
  return null;
}

Other frameworks can call initPinthread({ project: 'YOUR_PROJECT_KEY' }) from pinthread instead.

Keep it on preview builds

Pass your framework’s public environment flag to the same mount:

initPinthread({
  enabled: import.meta.env.DEV ||
    import.meta.env.PUBLIC_PREVIEW === 'true',
});

Using usePinthread? Add enabled to its options instead.

Configuration options