InstallCopy Anchor Link

npm install @hyperse/next-inspector @hyperse/inspector

Wrap next.configCopy Anchor Link

import { resolve } from 'node:path';
import { createNextConfig } from '@hyperse/next-config';
import withNextInspector from '@hyperse/next-inspector/plugin';

const plugins = [
  withNextInspector({
    projectCwd: resolve(process.cwd()),
    trustedEditor: 'cursor',
    customLaunchEditorEndpoint: '/hps_inspector',
    keys: ['$mod', 'i'],
  }),
];

const nextConfig = {
  /* ... */
};

export default createNextConfig(nextConfig, plugins);

Route handlerCopy Anchor Link

On the first development run, @hyperse/next-inspector creates app/<customLaunchEditorEndpoint>/route.ts (or under src/app) if the file is missing, re-exporting @hyperse/next-inspector/api. You can commit that file or let each developer generate it locally—either way the folder name must match customLaunchEditorEndpoint.

ClientCopy Anchor Link

Render <Inspector customLaunchEditorEndpoint="/hps_inspector" /> (or align with your chosen path) during development.

See Next plugin options.