Skip to content

From a click on your UI to a change in your code.

Tencil is an open-source browser review tool for coding agents. Press C on your running dev site, click any element and say what should change: Tencil hands your agent the component, source file and markup, and your dev server reloads the result.

npx tencil
  1. Run npx tencil once. Works with T3 Code or Claude Code, on any dev server.
  2. Press C and click it. Pick up a thread or start a new one, right on the page.
  3. Watch it change in place. Reply on the pin for another round, then resolve it.
  4. Review a whole page at once. Queue your comments, then send them all to your agent.

How it works

Four steps, the first one once.

Install it, point at what should change, let your agent work and judge the result where you found it.

  • 1. Install once

    npx tencil sets up your machine the first time: it picks your agent, pairs with T3 Code if you use it, and starts the daemon, at login if you like. Then it adds Tencil to the project in the current folder, and shows the change before it writes it.

  • 2. Point at it

    Start your dev server as usual and press C on the page. Click the element that should change, type what you want and press Enter. Select words to point at just those, or attach a screenshot. Esc cancels.

  • 3. Your agent works on it

    The pin starts a thread with your agent, or continues one it already worked in, with the element in its first message. Progress streams onto the pin while it works, and Stop ends the turn.

  • 4. See it, then follow up

    Your dev server hot-reloads the change, so you judge it on the real page. Reply on the pin for another round in the same thread, and resolve it when you are happy.

What your agent receives.

Describing a margin to an agent means describing where it is. A pin hands over the rest, the same for every agent, rendered by the daemon.

Your prompt
What should change, in your own words.
Component and source file
In React apps: the component you clicked and its owners, each with the file and line it is written on.
The element
Its markup, a selector, its visible text and, when you select part of it, exactly the words you selected.
Size and place
Where it sits on the page and how big it is, with your viewport and pixel ratio.
The page
The URL you were on when you pinned it.
A screenshot
When you attach one, to show what you mean.

Three parts, all on your machine.

Your dev site, a small daemon and your agent. There is no Tencil server in between.

  • The overlay

    A small script your dev site loads from the daemon, in development only. It draws the picker, pins, threads and the inbox in a shadow DOM on top of your page, so it never touches your styles or markup.

  • The daemon

    One per machine, on localhost:4747. It works out which project a page belongs to from the port it is served on, keeps each project's pins and agent connection, and holds the credentials, which never reach the page.

  • Your agent

    T3 Code or Claude Code, on the same machine, signed in as you. With T3 Code every pin is a real thread; with Claude Code a session you can resume in a terminal with claude --resume.

A command line for the rest.

npx tencil is all most people run. The other commands are there when you need them; the README lists every option.

npx tencil --help

tencil            Set up this machine if needed, then add Tencil to this project
tencil setup      Set up this machine: start Tencil (at login) and pair
tencil init       Load the overlay in this project (Next.js, Vite)
tencil status     Show the daemon and the projects it serves
tencil stop       Stop the daemon (until the next login)

Questions about how it works

What the agent sees, which thread it works in and where it may run.

Yes. A new element starts a new thread by default; in the composer, switch New thread to any thread of the project, and the element you picked becomes its next message. The inbox opens any of those threads next to the page, so you can read what your agent did and reply while you look at the result. It works the other way too: with T3 Code, every pin is a real thread you can open there, and with Claude Code a session you can pick up with claude --resume.

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.

Nobody sits at a terminal to approve tool calls, so --runtime-mode decides up front. full-access (the default) lets the agent run anything; with approval-required, auto-accept-edits or auto, tools that would need approval are refused and the agent is told why.

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.

All questions

Works with your stack.

Next.js, every Vite app and any dev server, with Claude Code or T3 Code.