Production setup · 4 steps

Cloud autopilot —
wire it up.

Drop the SDK into your prod build, connect your repo + your Vercel project, install the SWC plugin so picks resolve to exact source. ~5 minutes wiring; first PR lands the first time a user reports a bug.

Last updated 2026-05-23 · @insitue/sdk@0.4.14 · @insitue/swc-source-attr@0.2.2

cheat sheet · production wiringbash
# 1. Install + mount the capture SDK in your prod build
pnpm add @insitue/sdk
#    Mount <InSitueCapture projectKey="pk_live_…" />
#    in app/layout.tsx. See step 1 below for the snippet.

# 2. On your project page in the dashboard:
#    Connect GitHub  (installs the InSitue GitHub App on one repo)

# 3. On your project page in the dashboard:
#    Connect Vercel  (installs the Marketplace Integration; verify-via-preview)

# 4. Next.js only — add the SWC source-attr plugin
pnpm add @insitue/swc-source-attr
#    Wire next.config.mjs (see step 4 below) then bust the cache:
rm -rf .next   # only needed after first install / plugin upgrade

# That's the whole wiring. First user report = first draft PR.
Setup checklist
  1. 1Install the capture SDK
  2. 2Connect your GitHub repo
  3. 3Connect your Vercel project
  4. 4Add the SWC source-attr plugin
Stack support

We integrate where you already ship.

Today: Next.js on Vercel, with GitHub for PR delivery and Anthropic for the agent. More frameworks, hosts, and tooling integrations are coming — see the roadmap below.

Available today
GitHub
PR delivery + branch push
live
Vercel
Sandbox microVMs + verify-via-preview
live
Next.js
Capture SDK + SWC source-attr (App + Pages Router)
live
Anthropic
Claude model provider
live
Claude Code + Desktop
Local dev tool via MCP plugin
live
Vite
Local dev tool (any React app)
live
Remix
Local dev tool (any React app)
live
On the roadmapWant one prioritised? Email us →
GitLab
PR delivery parity
soon
Bitbucket
PR delivery parity
soon
Nuxt
Vue ecosystem (cloud autopilot)
soon
Astro
.astro file source resolution
soon
Netlify
Verify-via-preview parity
soon
Cloudflare Pages
Verify-via-preview parity
soon
Setup · 4 steps

The wire-up, step by step.

Each step has one outcome. If a step fails, the dashboard tells you exactly which one and why.

Framework requirement
Next.js on Vercel · today
These steps assume a Next.js (App Router or Pages Router) app deployed on Vercel, React 18+. Vite, Remix, Astro, Nuxt and others are on the roadmap. Email us to vote for one.
1

Install the capture SDK

Add @insitue/sdk and mount the capture widget in production. The component self-isolates inside a Shadow DOM — no style or DOM leakage into your app.
app/layout.tsxtsx
pnpm add @insitue/sdk

// app/layout.tsx
import { InSitueCapture } from "@insitue/sdk";

// Mount in prod only — in dev the same component (without
// projectKey) connects to a local companion instead. See /docs/dev.
{process.env.NODE_ENV === "production" && (
  <InSitueCapture projectKey="pk_live_…" />
)}
Your pk_live_…key is on the project page. It's Origin-pinned, quota'd, and rate-limited — safe to ship in your prod bundle.
2

Connect GitHub

On the project page, click Connect GitHub. You install the InSitue GitHub App scoped to the repo you want autopilot for. We request only contents: read/write and pull-requests: write on that repo — no org-wide access, no other repos.
Branches are pushed as fix/insitue-run_… and PRs are opened as drafts. We never push to your default branch.
3

Connect Vercel

On the project page, click Connect Vercel. You install the InSitue Marketplace Integration and pick which Vercel project to grant. The autopilot uses your project's preview deployment as the verify gate — it watches the deploy that runs against the proposed change and only opens the PR when that deploy succeeds.
Scopes requested: Projects: Read (so we can list your projects and resolve the right one) + Deployments: Read (so we can watch the verify deploy succeed before opening the PR). No write access. No env-var access. Nothing else.
4

Add the SWC source-attr plugin

Next.js only. Add @insitue/swc-source-attr to your config — it stamps every host JSX element with a data-insitue-source="file:line:col" attribute at build time, so the capture widget can resolve picks to an exact file and line in production. Without this, the agent falls back to component-stack heuristics and resolves to the owning component, not the exact JSX site.
next.config.mjsjs
// SWC WASM plugins are referenced by package NAME (string),
// not imported as JS — the plugin has no JS exports. Pass
// rootDir so emitted paths are project-relative.
const nextConfig = {
  experimental: {
    swcPlugins: [
      ["@insitue/swc-source-attr", { rootDir: process.cwd() }],
    ],
  },
};
export default nextConfig;
Heads up — clear your build cache after install. Next caches SWC-transformed output in .next/cache; adding the plugin doesn't bust that cache, so the old (unstamped) transforms get reused. Run rm -rf .nextonce after install (and after each plugin upgrade). On Vercel: trigger a deploy with the “Clear cache” option (or push a commit that invalidates the build hash). pnpm workspaces:if Next can't resolve the plugin, add public-hoist-pattern[]=*swc-source-attr* to your .npmrc, or resolve the wasm path explicitly with require.resolve("@insitue/swc-source-attr/insitue_swc_source_attr.wasm") in next.config.mjs.
How it works

The four moving parts.

You don't need to know how the autopilot works to use it. If you're evaluating, these are the guarantees.

Capture

  • Origin-pinned publishable key.
  • Quota'd + rate-limited per project.
  • Text fields token-scrubbed before persistence; screenshots / DOM passed through.
  • Carries selector, DOM, styles, runtime, screenshot, source line.

Sandbox

  • Ephemeral Vercel Sandbox microVM per run.
  • Read-only repo tools — no shell, no sockets.
  • The agent reads, reasons, and proposes — it doesn't execute code in your repo.
  • Destroyed at end-of-run. Source never persisted.

Review gate (always on)

  • Every fix lands as a PR — you review the diff.
  • Nothing reaches your default branch without your merge.
  • Caps blast radius from agent mistakes or runaway usage.
  • InSitue never auto-merges, on any plan or tier.

Ship

  • A PR on the default branch base — your review and merge.
  • Safe tier opens draft; Standard opens ready-for-review.
  • Per-project pause + global stop-the-world. Both <1s.
  • Revert-PR + redeploy-previous in one click on every PR.

What's next

Your first capture should arrive in under a minute. Open your project dashboard to watch runs go from capture → microVM clone → agent proposes → PR live. From there:

Wire it up, then walk away.

10 resolved PRs free, no card. Kill switch from setup minute zero. Every PR is a draft until you merge.