Tired of describing what element to change in the UI, taking screenshots, and copying/pasting them into your AI assistant? Streamline how you share UI changes! Select elements, mark them with the changes you want to make, and send directly to AI agents for automated fixes.
Point → Click → Describe → ZingIt to AI
Click any element on your page to add notes about changes you want. Smart CSS selectors are automatically generated to target the exact element.
Automatically captures screenshots of marked elements to provide visual context to AI agents. No more manual screenshot taking!
Works with Claude Code, GitHub Copilot CLI, and OpenAI Codex. Choose your preferred AI assistant and watch it work in real-time.
Once you've marked your changes, simply click the sparkle icon (✨) in the ZingIt toolbar to send everything to your AI agent. Watch as it generates code updates live!
- Real-time Streaming - Watch the AI work in real-time
- Smart Selectors - Auto-generates CSS selectors for precise targeting
- Change History - Track all modifications made by your AI assistant
- Remote/Local Detection - Warns when editing published sites vs local development
-
Install an AI agent - Install and login to one of these AI agents on your dev machine:
-
Clone and setup:
git clone https://github.com/danwahlin/zingit.git- Start the ZingIt server (in one terminal):
cd zingit/server
npm install
npx cross-env PROJECT_DIR=../client npm run devServer runs on ws://localhost:3000
- Run the demo site (in another terminal):
cd zingit/client
npm install
npm run dev-
Visit http://localhost:5200/?zingit to see ZingIt in action!
-
You'll be prompted to select an AI agent. Start marking!
- Start the ZingIt server:
npx cross-env PROJECT_DIR=/path/to/your/project npx @codewithdan/zingitReplace /path/to/your/project with your project path.
- Add the ZingIt script to your HTML pages just before the closing
</body>tag:
<script src="https://cdn.jsdelivr.net/npm/@codewithdan/zingit@latest/dist/zingit-client.js"></script>- Run your website's dev server and visit it with
?zingitadded to the URL.
Example: http://localhost:5200/?zingit
- Press
Zto toggle mark mode on/off - Click elements on your page to mark them - add notes about changes you want
- Click the sparkle icon (✨) in the toolbar to send markers to your AI agent
- Watch the agent work in real-time - the response panel shows streaming updates
| Icon | Description |
|---|---|
| ON/OFF | Toggle mark mode |
| ✨ (Sparkle) | Send markers to AI agent |
| 🕒 (Clock) | View change history |
| 📋 (Copy) | Export markers as Markdown |
| 🧹 (Broom) | Clear all markers |
| ? | View keyboard shortcuts |
| ⚙️ (Gear) | Open settings |
| ✕ | Close ZingIt toolbar |
| Key | Action |
|---|---|
Z |
Toggle mark mode on/off |
Ctrl/Cmd+Z |
Undo last marker |
? |
Show help overlay |
` |
Toggle ZingIt visibility |
Esc |
Close current panel/modal |
Ctrl/Cmd+Enter |
Save marker (in modal) |
Click the gear icon for settings:
| Setting | Default | Description |
|---|---|---|
| WebSocket URL | ws://localhost:3000 |
Server connection |
| Project Directory | (server default) | Override project path |
| Highlight Color | #fbbf24 |
Element highlight color |
| Marker Color | #3b82f6 |
Marker badge color |
zingit/
├── client/ # Lit web components (browser UI)
│ ├── src/components/ # UI components
│ ├── src/services/ # WebSocket, storage
│ └── dist/ # Built bundle
└── server/ # WebSocket server + AI agents
└── src/agents/ # Claude, Copilot, Codex integrations
WebSocket not connected
- Ensure server is running:
npx cross-env PROJECT_DIR=/path npx @codewithdan/zingit - Check WebSocket URL in settings (default:
ws://localhost:3000) - Make sure you've added
?zingitto your URL
Agent not responding
- Verify AI agent is installed and authenticated
- Check server logs for error messages
Markers not persisting
- Markers are URL-specific and stored in localStorage
- Changing pages clears markers
Changes not appearing on published site
- If you see a "Remote" badge in the toolbar, you're editing a published site
- Changes are saved locally only - to see them, run the project locally or deploy the updated files
- For best experience, use ZingIt with local development (localhost)
MIT
Made by Dan Wahlin | Issues | Contributing