Vite + React

Install Clamp in a Vite + React app. Call init() once in main.tsx, queryable by your AI agent via MCP.

Install

npm install @clamp-sh/analytics

Setup

Call init() in main.tsx before ReactDOM.createRoot:

import React from "react"
import ReactDOM from "react-dom/client"
import { init } from "@clamp-sh/analytics"
import App from "./App"

init("proj_xxx")

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Pageviews — including SPA navigations — are tracked automatically.

Track custom events

Import track from the main SDK entry and call it from any component:

import { track } from "@clamp-sh/analytics"

export function SignupButton() {
  return (
    <button onClick={() => track("signup_started", { plan: "pro" })}>
      Sign up
    </button>
  )
}

Properties must be flat string key-value pairs. See Events for limits and schema.

Server-side events

From any Node.js backend (Express, Fastify, etc.), use the /server entry with an API key:

import { init, track } from "@clamp-sh/analytics/server"

init({ projectId: "proj_xxx", apiKey: process.env.CLAMP_API_KEY! })

app.post("/api/signup", async (req, res) => {
  const { anonymousId } = req.body

  await track("signup_completed", {
    anonymousId,
    properties: { plan: "pro" },
  })

  res.json({ ok: true })
})

Pass anonymousId from the browser (via getAnonymousId()) to link server events to the visitor session.

Verify

1. Deploy or open your app at a non-localhost URL (localhost is skipped by design).
2. Navigate between a few pages.
3. In your Clamp dashboard, pageviews should appear within ~5 seconds.
4. DevTools → Network → filter for e/batch to confirm requests are sending.

Gotcha

Next step