vite-plugin-ai-annotator 1.1.1 → 1.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -0
- package/dist/annotator-toolbar.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -76,6 +76,15 @@ bun dev
|
|
|
76
76
|
|
|
77
77
|
The annotator toolbar will automatically appear in your application.
|
|
78
78
|
|
|
79
|
+
## Usage
|
|
80
|
+
|
|
81
|
+
1. Click the **inspect button** on the toolbar to enter selection mode
|
|
82
|
+
2. Click on any element(s) you want to modify
|
|
83
|
+
3. Ask Claude Code to modify them - it will use `annotator_get_selected_elements` to get the selected elements with their source locations
|
|
84
|
+
4. Claude modifies the source code directly
|
|
85
|
+
|
|
86
|
+
Example prompt: *"Make the selected button larger and change its color to blue"*
|
|
87
|
+
|
|
79
88
|
## Port Configuration
|
|
80
89
|
|
|
81
90
|
Default port is `7318`. You can customize it:
|
|
@@ -7777,7 +7777,7 @@
|
|
|
7777
7777
|
this.showToast("No elements selected");
|
|
7778
7778
|
return;
|
|
7779
7779
|
}
|
|
7780
|
-
const text =
|
|
7780
|
+
const text = `I have selected ${elements.length} element(s) in the browser. Use the \`annotator_get_selected_elements\` tool to retrieve them and modify the code.`;
|
|
7781
7781
|
try {
|
|
7782
7782
|
await navigator.clipboard.writeText(text);
|
|
7783
7783
|
this.showToast(`Copied ${elements.length} element(s)`);
|
package/package.json
CHANGED