Skip to content

Point at your Next.js app, prompt your agent.

Tencil adds one component to your root layout. Press C on your dev site, click an element and say what should change: your agent gets the component and source file, and Fast Refresh shows the result.

npx tencil

  • app/layout.tsx

    import { Tencil } from 'tencil/react';

<body>
  {children}
  <Tencil />
</body>

    One component in your root layout

    npx tencil finds your Next.js app and adds <Tencil /> as the last child of <body>. It renders nothing outside development, so the change is safe to commit.

  • pages/_document.tsx

    import { Tencil } from 'tencil/react';

<body>
  <Main />
  <NextScript />
  <Tencil />
</body>

    App router and pages router

    With the pages router, the component goes into pages/_document instead. init picks the right file, and npx tencil init --dry-run shows the change before it writes anything.

  • Your agent gets the source file

    Next.js runs React, so Tencil reads the component you clicked and its owners from React, with the file and line each one is written on. The agent starts in the right file instead of searching the repository.

  • Found from the port

    The daemon matches your page to its project through the port next dev listens on, so several Next.js apps on one machine each get their own pins and agent. In Docker or on a remote dev server, the overlay asks once which project the page belongs to.

Frequently asked questions

Using Tencil with Next.js.

Yes. init adds <Tencil /> to pages/_document for the pages router, and to app/layout.tsx for the app router.

No. <Tencil /> renders nothing outside development, and the overlay itself is a script your machine's daemon serves while you develop.

Yes. Tencil doesn't hook into the bundler for Next.js: the component loads the overlay from the daemon in the browser, whatever builds your app.

All questions

More integrations

Tencil works the same everywhere: point at an element, say what should change.