# Tencil

> Point at any element of your running app to start a thread with your coding agent, or continue one it already worked in. Tencil hands your agent the component, source file and markup, and your dev server reloads the result.

Tencil is open source (Apache-2.0): https://github.com/tencildev/tencil. Install it with `npx tencil` in your project.

## Pages

- [How it works](https://tencil.dev/how-it-works): Press 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.
- [Integrations](https://tencil.dev/integrations): Tencil works with Next.js, every Vite app and any dev server, and hands what you point at to Claude Code or T3 Code. One command sets it up.
- [Next.js](https://tencil.dev/integrations/nextjs): Add 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.
- [Vite](https://tencil.dev/integrations/vite): A 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.
- [React](https://tencil.dev/integrations/react): In 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 server](https://tencil.dev/integrations/any-dev-server): Not 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.
- [Claude Code](https://tencil.dev/integrations/claude-code): Click 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 Code](https://tencil.dev/integrations/t3-code): Click 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.
- [Use cases](https://tencil.dev/use-cases): What teams use Tencil for: polishing UI, editing copy where you read it, fixing visual bugs and reviewing a feature in the browser with a coding agent.
- [Point and prompt](https://tencil.dev/use-cases/point-and-prompt): Click an element of your running app and say what should change: Tencil hands Claude Code or T3 Code the component, source file and markup. Free, open source and local.
- [UI polish](https://tencil.dev/use-cases/ui-polish): Spacing, alignment, colors and states: click the element that looks off, say what should change and your coding agent edits the right component.
- [Copy edits](https://tencil.dev/use-cases/copy-edits): Select the words on your running app, type the new ones and your coding agent edits the right string, component or translation file.
- [Visual bugs](https://tencil.dev/use-cases/visual-bugs): Overflowing text, a broken layout at one width, a misaligned icon: pin the bug on the element and your coding agent gets the markup, size and viewport to fix it.
- [Design review](https://tencil.dev/use-cases/design-review): Walk 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.
- [Guides](https://tencil.dev/guides): Step-by-step guides for pointing your coding agent at your UI: Claude Code and T3 Code setups, and fixing layout bugs at one screen width.
- [Edit your UI with Claude Code](https://tencil.dev/guides/edit-ui-with-claude-code): Set up Tencil with Claude Code in a few minutes, then click any element of your dev site and say what should change. Claude Code gets the component and source file.
- [Edit your UI with T3 Code](https://tencil.dev/guides/edit-ui-with-t3-code): Pair Tencil with T3 Code, then click any element of your dev site and say what should change. Every pin becomes a T3 Code thread with the element in its first message.
- [Fix responsive layout bugs](https://tencil.dev/guides/fix-responsive-layout-bugs): Resize until the layout breaks, pin the element right there and your coding agent gets the viewport width, the element’s size and its markup to fix the right breakpoint.
- [Compare](https://tencil.dev/compare): How Tencil compares with Cursor Annotate and other tools that point a coding agent at your UI: what each one hands the agent, who makes the change and where it runs.
- [Tencil vs Cursor Annotate](https://tencil.dev/compare/cursor-annotate): Cursor Annotate lets you point at your app for Cursor’s agent, in Cursor’s browser. Tencil does it in your own browser for Claude Code or T3 Code: free, open source, no account.
- [Tencil vs React Grab](https://tencil.dev/compare/react-grab): React Grab copies a React element’s file, component and HTML for you to paste into your agent. Tencil sends it to your agent with your prompt and streams the change back onto the page.
- [Tencil vs Agentation](https://tencil.dev/compare/agentation): Agentation turns UI annotations into structured context you paste or serve over MCP. Tencil sends each pin to Claude Code or T3 Code and streams the change back onto the element.
- [Tencil vs stagewise](https://tencil.dev/compare/stagewise): stagewise is an open-source agentic IDE with its own browser and agents on any model. Tencil adds element pins to the dev site in your own browser and hands them to Claude Code or T3 Code.
- [Tencil vs Onlook](https://tencil.dev/compare/onlook): Onlook is a visual editor where designers work on an app in code, on a canvas. Tencil adds pins to your dev site and hands each one to Claude Code or T3 Code.
- [Tencil vs Frontman](https://tencil.dev/compare/frontman): Frontman runs its own AI frontend agent in your app, on the model provider you choose. Tencil hands what you point at to Claude Code or T3 Code, with no account and no server.
- [Tencil vs Pinpoint](https://tencil.dev/compare/pinpoint): Pinpoint is a browser extension that hands notes on elements to your agent over MCP. Tencil starts Claude Code or T3 Code itself and streams the change back onto the pin.
- [Cursor Annotate alternative](https://tencil.dev/alternatives/cursor-annotate): Point at your running app and hand the element to Claude Code or T3 Code, in your own browser and with any editor. Free, open source and local, with no account.
- [Privacy and security](https://tencil.dev/security): No Tencil server, no account, no telemetry. The daemon is locked to localhost, the overlay only loads in development, and your agent runs under your own login.
- [FAQ](https://tencil.dev/faq): Answers about Tencil: what you need to run it, which agents and frameworks it supports, what the agent receives and what stays on your machine.
- [Privacy policy](https://tencil.dev/privacy): tencil.dev sets no cookies and uses cookieless analytics, and the open-source Tencil software runs on your machine and sends nothing to us. What we do process, and why.
- [Terms of use](https://tencil.dev/terms): The terms for using tencil.dev and the open-source Tencil software, next to the software’s own open-source license.