Devtools and sessions

Connect Next.js

Install reflet-sdk, mount this client component once in your layout, and add the catch-all route below. You can also use the CLI setup command to add the integration.

"use client";

import { RefletFeedback } from "reflet-sdk/feedback";

export function FeedbackTools() {
  return <RefletFeedback publicKey="fb_pub_YOUR_PUBLIC_KEY" />;
}

// app/api/reflet-devtools/[...path]/route.ts
export { GET, POST } from "reflet-sdk/devtools/next";

Devtools load only when NODE_ENV is development. The Next.js route returns an empty 404 otherwise. The public feedback widget remains available in production. Set devtools={false} on the widget to hide development tools explicitly.

To customize the route, export GET and POST from createDevtoolsRoute(options) instead of re-exporting defaults. Keep the server bound to loopback, for example next dev --hostname 127.0.0.1.

Connect Vite

Mount the same React widget and add the plugin. Vite 5+ is required. The plugin serves /api/reflet-devtools in the development server only; it does not add a route to a production build or preview.

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { refletDevtools } from "reflet-sdk/devtools/vite";

export default defineConfig({
  plugins: [react(), refletDevtools()],
  server: { host: "127.0.0.1" },
});

Both integrations accept the options below. Vite also readsREFLET_ variables from its mode-specific environment files. None of these secrets need a VITE_ or NEXT_PUBLIC_ prefix.

Choose team access

• Local notes and source inspection do not require a Reflet secret key. A working development route is needed for source files and board requests.
• For member access, supply the public key, choose Connect in the devtools account footer, then approve the organization in Reflet. The returned fb_dev_ credential stays on disk under ~/.reflet/devtools/, scoped by app directory and API origin. The browser calls the local proxy, not the stored credential.
• A member connection enables private board feedback and the member's sessions. Disconnect revokes the stored sign-in. A secret key can enable board access, but cannot substitute for a member connection in sessions. If an explicit secret key takes precedence, remove it and connect as a member to record.
• On hosts where Connect is unavailable, sessions can use an existing machine account offered by the panel. This does not give that app board access. Do not add a secret key just to make sessions work.

Production team tools are separate from devtools. Open your app with ?reflet-team (or &reflet-team if it already has a query), then sign in as an organization member. A valid stored sign-in also reopens them. The URL flag only reveals the sign-in UI; it grants no access. Browser team access uses an origin-bound fb_team_ token stored in localStorage and exposes sessions, not source inspection or the board inbox. Set teamTools={false} to disable that surface.

Customer userToken is not a team credential. Desktop apps without a usable web origin need the privileged desktop bridge. See widget options for placement, disabling the public trigger, and capture settings.

Take notes and inspect source

Pick an element to leave a note or inspect its React owners and source. Source lookup needs development debug frames. Reads stay inside the detected repository, exclude node_modules, allow source extensions only, and reject files over 1 MiB.

Notes and element close-ups first stay in this origin's IndexedDB. Review them before using the panel's board-send or agent-copy actions. Sending creates internal feedback with page context and the selected element, then uploads its close-up. If a close-up fails, the feedback can already exist; retry the attachment rather than filing it again. Clearing notes archives them locally; restore them before they are purged after a day.

Record and hand off a session

Open Sessions after member sign-in and choose Start session. Recording requires microphone permission, a secure context (HTTPS or localhost), and working browser storage. No recording begins just from mounting the widget. A session is private to its author until they choose to share it with their team.

• During recording, Reflet collects microphone audio, the current page URL and title, viewport and scroll position, clicks, pointed-at elements, marks, and screenshots. It also collects visible element names and positions for screenshot context. Devtools can include source locations; production team sessions do not.
• It does not record keystrokes, network calls, or other tabs and apps. Form values are blanked in session screenshots. Password and credit-card fields and elements marked data-reflet-redact are hidden. Other visible text, including rich-text editors, can remain in screenshots. Mark sensitive regions explicitly.
• Session page context masks sensitive-looking URL parameter values and removes fragments.
• Audio and evidence upload to Reflet while recording, with an IndexedDB outbox for pending work. Pausing stops new collection; pending uploads can still finish. In-app recording pauses when its tab is hidden. Interrupted drafts can be resumed; storage exhaustion or capture limits stop further collection.
• Audio is sent to ElevenLabs Scribe through OpenRouter with zero-data-retention requested. Reflet deletes uploaded audio after transcription and expires remaining audio after 24 hours. Text and evidence remain for review. Optional speaker detection streams audio to Mistral (Voxtral); the in-app disclosure states retention of up to 30 days with no training.
• The current in-app limits are 30 active minutes, 400 audio segments, 60 screenshots, 5,000 events, and a 60 MB local pending buffer. The backend supplies the actual limits. Self-hosted transcription and analysis require provider configuration.

<section data-reflet-redact>
  Sensitive account information
</section>

Finish the recording, check the transcript and captured moments, then review the suggested intentions. Keeping an intention does not create a feedback item or start an agent. Use the explicit board action to add it to the board. To brief an agent, choose kept intentions and evidence, review the preview, then choose Copy brief or Download .zip. The ZIP contains the brief and selected image files. Recording and AI processing already send data to Reflet; the separate agent handoff happens only when you copy, download, or opt into the Live workflow.

Sharing a session with the team is not the same as exporting a brief. Sign out to remove this account's local session data; delete a session through its review controls to remove the server record. For the wider review workflow, see using Reflet.

Resolve setup failures

• Missing route: check the exact catch-all Next.js path or Vite plugin, restart the development server, and confirm the widget is running in development mode.
• 403 from the development route: use localhost or explicitly allow your dev hostname. The route checks Host, the SDK's custom request header, and same-origin fetch metadata. Do not expose the Next.js development server on a public interface; Vite additionally rejects non-loopback peers.
• Connect unavailable: use a supported local hostname with a public key, or the offered machine account for sessions. An allowed custom hostname is not automatically eligible for browser Connect.
• No source location: inspect a development React element, check root, and avoid expecting node_modules or production frames to resolve.
• Recording cannot start: allow microphone access and site data, check HTTPS/localhost, and sign in again if access was revoked. Keep pending-upload status visible before closing the page.