Point-and-click UI feedback that gets automatically implemented by AI

Point → Click → Describe → ZingIt to AI

ZingIt workflow illustration

Visual Markers

Click any element on your page to add notes about changes you want. Smart CSS selectors are automatically generated to target the exact element.

Example

Screenshot Capture

Automatically captures screenshots of marked elements to provide visual context to AI agents. No more manual screenshot taking and copying/pasting. ZingIt generates them for you!

Example

Multi-Agent Support

Works with Claude Code, GitHub Copilot CLI, and OpenAI Codex. Choose your preferred AI assistant and watch it work in real-time.

Example

Try ZingIt

1

Install an AI Agent

Install and login to one of these AI agents on your dev machine:

2

Try it with the ZingIt Website

Clone the https://github.com/danwahlin/zingit repo:

git clone https://github.com/danwahlin/zingit.git

In a terminal, start the ZingIt server:

cd zingit/server
npm install
npx cross-env PROJECT_DIR=../client npm run dev

In another terminal, run the demo site:

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 to assist you.

3

Start Marking

With ?zingit added to your URL, click any element to mark it. Press Z to toggle mark mode (turn it on/off).

Once you've added your markers, select the icon in the ZingIt toolbar to send your markers to your AI assistant.

Here's a quick guide to the toolbar icons:

ZingIt Toolbar
ON
 Toggle mark mode on/off. When ON, you can click elements to mark them.
Send your markers to your AI assistant. The assistant will analyze them and make the requested changes.
View change history to see all modifications made by your AI assistant.
Copy all markers as Markdown to share with your team or save for later.
Clear all markers to start fresh.
View keyboard shortcuts and help documentation.
Configure ZingIt settings including AI agent selection and project directory.
Close the ZingIt toolbar. Reopen by adding ?zingit to the URL.
4

Try it with Your Website

Start the ZingIt server in a terminal. Replace /path/to/your/project with your project path. Works on Windows, Mac, and Linux.

npx cross-env PROJECT_DIR=/path/to/your/project npx @codewithdan/zingit

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 ?zingit added to the URL.

Example: http://localhost:5200/?zingit