Fix visual bugs from the page.
A visual bug is hard to put into words and easy to point at. Pin it on the element, add a screenshot, and your agent gets what it needs to reproduce it in the code.
npx tencilThe context a bug report misses
Besides your words, the agent gets the element's markup, a selector, its component and source file in React apps, its size and position, and the viewport and pixel ratio you saw it in.
Breakpoint bugs included
Resize the window until it breaks and pin it there: the viewport width goes along, so the agent knows which breakpoint to fix.
Check the fix where you found it
The page hot-reloads, so you check the fix in the same place and the same width. The pin turns blue when the agent is done, and you resolve it once you are happy.
Frequently asked questions
What to know before you start.
It gets a screenshot when you attach one, and always the markup, the size and position of the element and your viewport.
No. The overlay lives in a shadow DOM on top of your page, so it does not touch your styles or markup.
More use cases
Tencil works the same everywhere: point at an element, say what should change.
- UI polishSpacing, alignment, colors and states: click the element that looks off, say what should change and your coding agent edits the right component.
- Copy editsSelect the words on your running app, type the new ones and your coding agent edits the right string, component or translation file.
- 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.