Skip to content

Click a React component, your agent opens its file.

In a React app, Tencil does more than describe the element you clicked: it reads the component that renders it, and the components above that, each with the file and line it is written on. Your agent starts in the right file instead of searching for it.

npx tencil

  • The component and its owners

    Tencil walks up from the element to the components that rendered it: the Button you clicked, the PricingCard that renders it, the page around that. The agent gets each one with its file and line, so it can decide whether the change belongs in the button or in the card.

  • From React itself

    The file and line come from React 19’s owner stacks in development, mapped back to your source through the source maps your dev server already serves. There is no Babel plugin or build step to add.

  • Older React still works

    On React 18 or without source maps, Tencil falls back to the names of the components, which still narrows the search. The markup, selector, text and size go along either way.

  • vite.config.ts

    import react from '@vitejs/plugin-react';
import tencil from 'tencil/vite';

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

    Any React setup

    Next.js through <Tencil />, and Vite, TanStack Start, React Router or Astro islands through the Vite plugin. npx tencil picks the right one and shows the change before it writes it.

Frequently asked questions

Using Tencil with React.

Any. With React 19 in development, your agent gets the file and line of each component; with React 18, it gets their names. Everything else is the same.

Tencil reads the components React renders in the browser. For a Server Component, the agent gets the client markup and the nearest components React reports, and finds the rest in your repository.

No. Tencil reads what React already exposes in development. Nothing changes in how your app is built.

All questions

More integrations

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