How to edit your UI with Claude Code by pointing at it
To edit your UI with Claude Code without describing where things are, run npx tencil in your project, press C on your dev site, click the element and type what should change. Tencil hands Claude Code the component, source file and markup, and your dev server reloads the result.
npx tencilWhat you need
- Node 22 or newer
- Claude Code, installed and logged in
- 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 sets up your machine: with only Claude Code installed, it picks it by itself and installs the Claude Agent SDK into its own config folder. Then it adds Tencil to your project and shows the change first.terminal
cd your-app npx tencilStart your dev server
Run it as usual, such as
npm run dev. The Tencil toolbar appears at the bottom of the page; a green dot means the daemon and Claude Code are ready.Point at what should change
Press
C, click the element and type what you want, such as “less space above this, and align it with the title”. PressEnter. Select words first to point at just those, or attach a screenshot.Watch Claude Code work
The pin spins while Claude Code works in your repository and streams its progress onto the pin. It turns blue when it is done, and your dev server has already reloaded the change.
Follow up, or continue in the terminal
Reply on the pin for another round in the same session, and resolve it when you are happy. Every pin is a Claude Code session, so you can also pick it up in a terminal.
terminal
claude --resume <id>
Questions
What people run into along the way.
No. Tencil runs Claude Code under the login you already use for it.
That is up to --runtime-mode: full-access by default, or a stricter mode where tools that need approval are refused.
Yes, in the comment box, or with --model, such as --model claude-opus-5-5.
Read next
More on how it works and what it is good for.
- 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.
- 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.
- UI polishSpacing, alignment, colors and states: click the element that looks off, say what should change and your coding agent edits the right component.