useturtle

Click on your UI. Describe the change. Claude fixes the code.

A dev tool for Vite apps. Point at any element in your running app, tell Claude what you want changed, and it edits the source file. No copy-pasting selectors, no describing layouts in chat. Just point and talk.

Setup

cd your-project        # go to your project root (where vite.config.ts lives)
npm install useturtle -D
npx useturtle-init

That's it. Three things happen:

1. turtle() gets added to your vite.config.ts plugins
2. The MCP server gets registered with Claude Code
3. A /turtle slash command gets added to your project

Start your dev server, open your app, and type /turtle in Claude Code. You're ready to go.

Usage

1. Start your Vite dev server like you normally do
2. In Claude Code, type /turtle to activate watch mode
3. Open your app in the browser. Click the turtle icon in the bottom-right.
4. Click on any element, type what you want changed, hit send
5. Claude picks it up, edits the source file, and HMR reloads the page

That's the full loop. Click, describe, done.

Features

Annotate -- Click any element, type what you want changed. Claude reads the annotation (component name, file path, props, CSS) and edits the code. HMR reloads the page.

Multi-select -- Shift+click multiple elements, then comment on all of them at once.

Area select -- Hold Alt and drag a rectangle to select multiple elements in a region.

Rearrange -- Switch to rearrange mode, drag elements to reorder them. Claude updates the source to match.

Layout mode -- Pick components from a palette (Navigation, Header, Hero, Section, etc.) and place them as wireframe blocks. Hit send and Claude builds the page.

Threads -- If Claude isn't sure what you mean, it asks a follow-up question right on the annotation. Click the badge to reply. No context lost.

What Claude sees

Every annotation includes:

• Vue component name and file path
• Props and parent component chain
• CSS selector and computed styles
• Bounding box and accessibility attributes
• Selected text (if any)
• The page URL

Claude knows exactly which file to edit and what the element looks like.

Requirements

• Vite 5+ (works with any Vite-based framework)
• Claude Code with MCP support
• Dev mode only (zero production impact)

Manual setup

If you prefer not to use the init script:

// vite.config.ts
import turtle from 'useturtle'

export default defineConfig({
  plugins: [turtle()]
})

claude mcp add turtle -- npx useturtle-mcp

Options

// Change which file the overlay injects into (default: 'inertia.ts')
turtle({ appendTo: 'main.ts' })

License

MIT