Add visual feedback to your Vite 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 Vite app yet? Start one:

npm create vite@latest my-app

02 · Add the script tag

index.html

<script src="https://pinthread.dev/embed.js"
  data-project="YOUR_PROJECT_KEY" defer></script>

Paste it before </body> in index.html at the project root. Vite leaves an external script tag as it is, in development and in the production build.

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 address Vite prints, such as http://localhost:5173. 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

The tag is missing from the build

Check that you edited the index.html at the project root, not a file in public/.

Comments stay on the wrong page after a route change

pinthread follows client-side routers, such as React Router and Vue Router, and shows the comments for the new URL.

The button shows locally but not on your host

Add the deployed address under the project’s Settings. Local addresses work without this step.

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

• Next.jsnext/script in the App Router or Pages Router.
• 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.