vite.config.ts
import tencil from 'tencil/vite'export default defineConfig({ plugins: [react(), tencil()],});Vite
React, Vue, Svelte, TanStack Start, Astro and anything else on Vite.
Point at your UI, prompt your agent.
Click any element of your running app and say what should change. Your coding agent gets the component, source file and markup, and your dev server reloads the result.
npx tencilWorks with T3 Code and Claude Code, on Next.js, Vite and any dev server.
How it works
Review your app the way you would with a teammate: point, say what's off, and watch it change.
Works with your stack.
npx tencil finds your framework and adds the right integration. Here is what it adds.
app/layout.tsx
import { Tencil } from 'tencil/react'<body> {children} <Tencil /></body>Next.js
One component in your root layout, or in pages/_document for the pages router.
index.html
<!-- development only --><script src= "http://localhost:4747/tencil.js" async></script>Anything else
Load one script in development. Without the daemon running, it does nothing.
Agents
Bring the agent you already use.
With T3 Code, every pin is a real thread in the project that matches your dev site's folder. With Claude Code, the daemon runs it under your own login and every pin is a session you can resume in a terminal. Pick one per project; agents plug in through one small interface, so more are on the way.
- T3 CodeAvailable
- Claude CodeAvailable
- More agentsLater
Runs on your machine.
There is no Tencil server and no account. A small daemon on your laptop connects the page to your agent, and it only answers to your own dev sites.
Everything stays local
One daemon per machine on localhost:4747. Your page talks to it, it talks to your agent on the same machine. Credentials stay in ~/.config/tencil and never reach the page.
Only in development
The overlay is a script the daemon serves while you develop. Production builds don't include it, and without the daemon nothing loads, so the integration is safe to commit.
Locked to localhost
The daemon listens on 127.0.0.1 and only accepts pages from loopback origins, unless you allow another one yourself. Other host names are refused, which blocks DNS rebinding.
Frequently asked questions
What you need, what the agent sees and what stays on your machine.
Node 22 or newer, and T3 Code (the desktop app) or Claude Code (installed and logged in). Run npx tencil in your project. The first time, it sets up your machine: it picks your agent, pairs with T3 Code if you use it, and starts the daemon, at login if you like. Then it adds the integration. Start your dev server as usual and press C on the page.
Next.js (app and pages router) through the <Tencil /> component, and every Vite app (React, Vue, Svelte, TanStack Start, Astro and others) through the Vite plugin. Anything else works with one script tag in your development HTML. In React apps, Tencil also finds the component and source file of what you click.
T3 Code and Claude Code. Setup uses the one you have, or asks once if you have both. Each project can switch in the overlay: the gear on the toolbar opens its settings. Pins keep the agent they started with.
Your prompt, plus the element's component, source file and markup, and a screenshot if you attach one. Every provider gets exactly the same input, rendered by the daemon.
No. The overlay is loaded from the daemon on your machine, only in development. Production builds don't include it, and for anyone without the daemon running, the script doesn't load and nothing appears.
Tencil itself has no server and no account: the daemon runs on localhost and only talks to your agent on the same machine. That agent talks to its model provider, exactly like it does without Tencil.
Yes. With T3 Code, every pin is a real thread in the project that matches your dev site, so you can open it there. With Claude Code, every pin is a session you can pick up in a terminal with claude --resume. Either way you can reply from the pin in the browser, or send a new element to a thread that already exists.
Yes. Tencil matches a page to its project through the port it is served on. When that does not work, the overlay asks which project the page belongs to and remembers your answer.