Frameworks: proven, wired, and the difference

npm i -D @reticlehq/react @reticlehq/vite-plugin

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { reticle } from '@reticlehq/vite-plugin';

export default defineConfig({
  plugins: [reticle(), react()],
});

npm i -D @reticlehq/react @reticlehq/next

const { withReticle } = require('@reticlehq/next');

module.exports = withReticle({/* your config */});

---
import { readFileSync } from 'node:fs';
import { homedir } from 'node:os';
import { join } from 'node:path';
const pairingToken = (() => {
  if (!import.meta.env.DEV) return '';
  const dir = process.env['RETICLE_PAIRING_TOKEN_DIR'] || join(homedir(), '.reticle');
  try { return readFileSync(join(dir, 'pairing-token'), 'utf8').trim(); } catch { return ''; }
})();
const pairingRoot = import.meta.env.DEV ? process.cwd() : '';
---
<meta name="reticle-pairing-token" content={pairingToken} />
<meta name="reticle-pairing-root" content={pairingRoot} />
<script>
  import { reticle, install } from '@reticlehq/react';
  if (import.meta.env.DEV) {
    const token = document.querySelector('meta[name="reticle-pairing-token"]')?.getAttribute('content') ?? '';
    const root = document.querySelector('meta[name="reticle-pairing-root"]')?.getAttribute('content') ?? '';
    install();
    reticle.connect({
      ...(0 < token.length ? { token } : {}),
      ...(0 < root.length ? { root } : {}),
    });
  }
</script>

// src/hooks.client.ts (abridged)
if (import.meta.env.DEV) {
  void import('@reticlehq/browser').then(({ reticle }) => {
    // Inlined by @reticlehq/vite-plugin. The bridge refuses a connect with no token, even on localhost.
    const token = typeof __RETICLE_TOKEN__ !== 'undefined' ? __RETICLE_TOKEN__ : '';
    reticle.connect({ ...(token.length > 0 ? { token } : {}) });
  });
}

useEffect(() => {
  if (import.meta.env.DEV) {
    const token = typeof __RETICLE_TOKEN__ !== 'undefined' ? __RETICLE_TOKEN__ : '';
    void import('@reticlehq/react').then(({ reticle, install }) => {
      install();
      reticle.connect({ ...(token.length > 0 ? { token } : {}) });
    });
  }
}, []);

// app/plugins/reticle.client.ts (Nuxt 3: plugins/reticle.client.ts), abridged
export default defineNuxtPlugin(() => {
  if (!import.meta.dev) return;
  void import('@reticlehq/browser').then(({ reticle }) => {
    // Both inlined by the vite.define block init adds to nuxt.config.
    const token = typeof __RETICLE_TOKEN__ !== 'undefined' ? __RETICLE_TOKEN__ : '';
    const root = typeof __RETICLE_ROOT__ !== 'undefined' ? __RETICLE_ROOT__ : '';
    reticle.connect({
      ...(token.length > 0 ? { token } : {}),
      ...(root.length > 0 ? { root } : {}),
    });
  });
});

npm i -D @reticlehq/browser @reticlehq/vite-plugin

// src/index.js
if (process.env.NODE_ENV !== 'production') {
  // The bridge refuses a connect with no pairing token, even on localhost.
  void Promise.all([
    import('@reticlehq/browser'),
    import('../reticle.local.js').catch(() => ({})),
  ]).then(([{ reticle }, local]) => {
    reticle.connect({ token: local.token });
  });
}

<script type="module">
  Promise.all([
    import('https://cdn.jsdelivr.net/npm/@reticlehq/browser@<version>/+esm'),
    import('./reticle.local.js').catch(() => ({})),
  ]).then(([{ reticle }, local]) =>
    reticle.connect({ projectId: '<your-project-id>', token: local.token }),
  );
</script>

# reticle_dev.py: add to MIDDLEWARE while DEBUG is on:
#   MIDDLEWARE = [..., "reticle_dev.ReticleDevMiddleware"]
import json
import os
from pathlib import Path

from django.conf import settings

_SNIPPET = """<script type="module">
  import { reticle } from 'https://cdn.jsdelivr.net/npm/@reticlehq/browser@<version>/+esm';
  reticle.connect({ ...{ projectId: '<your-project-id>' }, token: __RETICLE_PAIRING_TOKEN__ });
</script>"""


def _reticle_pairing_token():
    folder = os.environ.get("RETICLE_PAIRING_TOKEN_DIR") or str(Path.home() / ".reticle")
    try:
        return (Path(folder) / "pairing-token").read_text().strip()
    except OSError:
        return ""


class ReticleDevMiddleware:
    """Inject the Reticle SDK into HTML responses during development only."""

    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        if not settings.DEBUG:
            return response
        if "text/html" not in response.get("Content-Type", ""):
            return response
        # Streaming responses have no .content to rewrite; leave them alone.
        if getattr(response, "streaming", False):
            return response
        body = response.content.decode(response.charset)
        if "</body>" not in body:
            return response
        snippet = _SNIPPET.replace("__RETICLE_PAIRING_TOKEN__", json.dumps(_reticle_pairing_token()))
        response.content = body.replace("</body>", snippet + "</body>", 1).encode(
            response.charset
        )
        if response.has_header("Content-Length"):
            response["Content-Length"] = str(len(response.content))
        return response