Annot: Anotasi Halaman Web untuk Asisten Kode AI
Annot, yang dikembangkan oleh Denolehov, adalah alat server MCP gratis yang dirancang untuk anotasi UI dan interaksi di platform mcp. Ini beroperasi sebagai proxy terbalik, menyuntikkan skrip anotasi ringan ke dalam halaman web mana pun untuk menambahkan label hover. Dibangun di atas Node.js menggunakan JavaScript/TypeScript, Annot menyederhanakan proses komunikasi referensi elemen UI web kepada asisten pengkodean AI. Ini mendukung transportasi HTTP dan kompatibel dengan klien AI seperti Claude Code Cursor dan VS Code Claude Desktop / JSON, memungkinkan tugas pengembangan web yang didorong AI lebih tepat tanpa pengaturan yang luas.
Apa yang dihubungkan oleh Annot?
Annot berfungsi sebagai proxy terbalik, menghubungkan dan menyajikan halaman web mana pun untuk menyuntikkan skrip anotasinya. Ia berkomunikasi menggunakan protokol HTTP standar, menangani permintaan POST dan GET. Desain ini memungkinkan ia beroperasi tanpa memerlukan ekstensi browser atau modifikasi pada kode asli halaman web. Klien AI yang kompatibel untuk menginstal dan berinteraksi dengan Annot termasuk Claude Code Cursor dan VS Code Claude Desktop / JSON, memfasilitasi integrasinya ke dalam lingkungan pengembangan yang dibantu AI.
Fitur dan alat inti
Annot menyediakan beberapa alat yang dapat dipanggil untuk interaksi UI web. Pengguna dapat menggunakan annotate untuk menerapkan label pada elemen web dan get_elements untuk mengambil informasi tentang mereka. Alat highlight_element membantu dalam mengidentifikasi komponen tertentu secara visual. Untuk konten halaman dinamis, rescan_elements memastikan deteksi elemen yang akurat. Selain itu, inspect_mode menawarkan fungsi klik-untuk-menyalin untuk nama elemen, pemilih CSS, dan dimensi, meningkatkan produktivitas pengembang dengan asisten AI.
Siapa yang membutuhkannya?
Annot ditujukan untuk siapa saja yang perlu mengkomunikasikan referensi elemen UI web dengan jelas kepada asisten pengkodean AI. Ini termasuk pengembang, desainer, atau profesional jaminan kualitas yang bekerja dengan AI untuk memodifikasi atau menganalisis tata letak dan fungsionalitas halaman web. Ini sangat berguna bagi mereka yang mencari interaksi AI yang tepat dengan komponen UI tertentu. Lewati ini jika Anda memerlukan mekanisme otentikasi tingkat lanjut, kelas perusahaan yang melampaui penggunaan lokal.
Cara memulai
Tidak ada kredensial yang diperlukan untuk kasus penggunaan lokal utamanya. Ia beroperasi melalui HTTP, mendukung komunikasi melalui permintaan POST dan GET.
Kasus penggunaan
- Memungkinkan asisten AI untuk memahami dan merujuk elemen halaman web tertentu dengan nama mereka, seperti menginstruksikannya untuk membuat sidebar lebih lebar.
- Memungkinkan pengguna untuk mengarahkan kursor ke elemen web mana pun untuk segera melihat nama, pemilih CSS, dan dimensi.
- Menyediakan fungsi klik-untuk-menyalin untuk nama elemen melalui mode inspeksi.
Annot oleh Denolehov menawarkan solusi yang sederhana untuk memberi anotasi pada halaman web, membuat elemen UI dapat dipahami untuk asisten pengkodean AI. Arsitektur reverse proxy dan pengaturan minimalnya menyederhanakan integrasi untuk tugas pengembangan lokal. Kemampuan alat ini untuk mengekspos detail elemen dan memungkinkan interaksi AI yang tepat sangat membantu alur kerja pengembangan web.
