Skip to content

Point at your Vite app, prompt your agent.

One plugin in your Vite config loads the Tencil overlay while you develop. Press C, click an element and say what should change: your agent makes the edit and Vite hot-reloads it.

npx tencil

  • vite.config.ts

    import tencil from 'tencil/vite';

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

    One plugin

    npx tencil finds vite.config and adds the plugin next to the ones you have. It loads the overlay only while vite dev runs, from the daemon on your machine.

  • React, Vue, Svelte and more

    The plugin works for every app on Vite: React, Vue, Svelte, TanStack Start, Astro and others. Your agent always gets the page, the markup, a selector, the visible text and the size of what you clicked.

  • Source files in React apps

    In React apps, Tencil also reads the component you clicked and its owners, with the file and line each one is written on, so your agent starts in the right file.

  • Hot reload shows the result

    The agent edits your code in place and Vite's hot module replacement updates the page. Progress streams onto the pin while it works, and you can reply on the pin to follow up.

Frequently asked questions

Using Tencil with Vite.

All of them: the overlay runs in the browser, on top of whatever renders the page. React apps also get the component and source file of what you click.

No. It only loads the overlay during vite dev, from the daemon on your machine.

Load one script in your development HTML: <script src="http://localhost:4747/tencil.js" async></script>. Without the daemon running, it does nothing.

All questions

More integrations

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