How to edit your UI with T3 Code by pointing at it
To edit your UI with T3 Code by pointing at it, run npx tencil in your project with the T3 Code desktop app running, press C on your dev site, click the element and type what should change. Every pin becomes a T3 Code thread in your project, with the element in its first message.
npx tencilWhat you need
- Node 22 or newer
- The T3 Code desktop app, running
- A Next.js or Vite app, or any dev server
Run Tencil in your project
In the folder of your app, run
npx tencil. The first time, it pairs with the T3 Code on your machine by itself and starts the daemon. Then it adds Tencil to your project and shows the change first.terminal
cd your-app npx tencilPair by hand if you need to
If T3 Code runs elsewhere, create a pairing link in T3 Code under Settings, Connections, and hand it to Tencil. The Pair button in the overlay does the same.
terminal
npx tencil connect "<pairing link>"Point at what should change
Start your dev server, press
C, click the element and type what you want. Pick the model in the comment box, or leave it on T3 Code’s default for the project.Work in the thread
The pin is a real T3 Code thread in the project of your dev server’s folder. Open it in T3 Code from the pin’s link icon, or read, reply and stop it from the inbox while you look at the page.
Send the next element to the same thread
In the composer, switch from New thread to any thread in the project: the element you click becomes its next message, so the agent that built the feature picks it up.
Questions
What people run into along the way.
Yes, the desktop app. Tencil talks to it on your machine; a T3 Code server elsewhere works with --t3-url.
The providers you set up in T3 Code. Choose one for Tencil in the comment box, or with --model, as instance and model.
Read next
More on how it works and what it is good for.
- 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.
- How it worksPress C on your dev site, click an element and say what should change. What Tencil captures, how the daemon hands it to your coding agent, and how the result reloads on the page.
- Design reviewWalk through a feature on your dev site, pin every change on the element it is about and let your coding agent work through them while you keep reviewing.