Works with your dev server and your agent.
Tencil adds one line to Next.js or any Vite app, and one script tag to anything else. What you point at goes to Claude Code or T3 Code, on your machine, under your own login.
Get started in one command.
Run Tencil in your project. It detects Next.js or Vite and shows you what it will add before changing any files. Any other dev server takes one script tag.
npx tencilFrameworks
Where the overlay loads: your dev site, in development only.
- Next.jsAdd one component to your Next.js root layout, click any element of your dev site and tell your coding agent what to change. App and pages router.
- ViteA Vite plugin for React, Vue, Svelte, TanStack Start and Astro: click any element of your dev site and tell your coding agent what should change.
- ReactIn React apps, Tencil hands your coding agent the component you clicked and the components that render it, each with its file and line. Next.js, Vite, TanStack Start and more.
- Any dev serverNot on Next.js or Vite? Load one script in your development HTML and point at any element of your Rails, Laravel, Django, Phoenix or static site to prompt your coding agent.
Agents
Who makes the change: the agent you already use, signed in as you.
- Claude CodeClick any element of your running app and Claude Code makes the change, under your own login. Every pin is a Claude Code session you can resume in a terminal.
- T3 CodeClick any element of your running app and T3 Code makes the change. Every pin is a real T3 Code thread in your project, so you can continue it there.
Questions about integrations
Frameworks, bundlers and dev servers.
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.
Yes. For Next.js, Tencil doesn't hook into the bundler: <Tencil /> loads the overlay from the daemon in the browser, whatever builds your app.
Load one script in your development HTML only: <script src="http://localhost:4747/tencil.js" async></script>. Without the daemon running, it does nothing.
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.