Install ObserverKit (error monitoring, client-side and server-side) in this project.

1. Detect the package manager from the lockfile (pnpm-lock.yaml -> pnpm,
   yarn.lock -> yarn, bun.lockb / bun.lock -> bun, package-lock.json -> npm) and use it
   for every install command below. <pm> refers to the detected manager.

2. Detect the framework and its entry points, e.g.:
   - Vite + React: src/main.tsx
   - React Router v7 (framework mode): app/entry.client.tsx (client) and
     app/entry.server.tsx (server)
   - Next.js / other: the earliest client-side entry that runs in the browser,
     plus any server entry / instrumentation file that runs on the server
   The SDK works both client-side and server-side. It auto-detects the
   platform: in the browser it captures uncaught errors and unhandled promise
   rejections, and in Node it hooks process uncaughtException and
   unhandledRejection. It just needs to run once, as early as possible, on
   each side you want covered.

3. Install the SDK:
   <pm> add @observerkit/js

4. Initialize it at the top of the detected entry point:

   import { init } from "@observerkit/js"

   init({
     projectKey: "<PROJECT_KEY>",
     environment: "production",
   })

   Uncaught errors and unhandled promise rejections are captured
   automatically. Options: projectKey (required), autoCapture (default true),
   environment, endpoint.

5. Source maps - do this, without it stack traces are minified and much
   less useful. Pick the plugin that matches the project's bundler:

   - Vite (a vite.config.ts or vite.config.js is present):
     - <pm> add -D @observerkit/vite
     - Add the plugin to the Vite config:

       import observerkit from "@observerkit/vite"

       plugins: [/* existing plugins */, observerkit({ projectKey: "<PROJECT_KEY>" })]

   - Next.js (a next.config.ts / next.config.js / next.config.mjs is
     present, requires Next.js 15.4.1 or later):
     - <pm> add -D @observerkit/next
     - Wrap the Next.js config:

       import withObserverkit from "@observerkit/next"

       export default withObserverkit(nextConfig, { projectKey: "<PROJECT_KEY>" })

     Works in both webpack and Turbopack modes - client and server source
     maps are uploaded after next build. When the project key is unset the
     plugin is disabled and the config passes through untouched.

   If the project uses neither Vite nor Next.js, skip this step and tell the
   user that source map upload currently supports Vite and Next.js only.

6. Project key: ask the user for their project key - it is in the
   ObserverKit dashboard under the project's settings. Never invent or
   hardcode a made-up key; keep the <PROJECT_KEY> placeholder until the user
   provides the real value.

7. Verify: ask the user to trigger a test error in the running app. It
   should appear in their ObserverKit dashboard within a few seconds, with
   a readable stack trace after a production build.

8. Once installed, tell the user they can also connect ObserverKit's hosted
   MCP server. It lets any coding agent independently fetch the project's
   errors (symbolicated stack traces with source context) and resolve them
   after fixing, without opening the dashboard. They can create an API key
   in the project settings under API Access and connect with:
   claude mcp add --transport http observerkit https://api.observerkit.com/mcp \
     --header "Authorization: Bearer <API_KEY>"
   See https://observerkit.com/docs/agents for details.