I Wanted to Comment Directly on AI-Written Documents, So I Built a VS Code Extension

Introducing Agentic HTML Visual Editor, a VS Code extension designed to help users interact with and edit documents created by AI agents. The creator of the extension observed a shift in their work as they handed more coding and documentation tasks to AI agents. They found that they were spending more time reading and reviewing the AI's output than actually creating it themselves.

This led to increased effort when requesting changes, as each change required quoting the relevant passage and explaining the desired modification. The creator wished to leave feedback directly within the document to streamline the process. This desire gave birth to the Agentic HTML Visual Editor, a VS Code extension that allows users to open HTML files as editable documents.

Text can be selected and commented on, with comments and replies stored within the HTML file. By installing the accompanying Agent Skill, users can prompt an AI agent to read the file, revise the document based on provided feedback, and reply all within the same thread. The extension aims to simplify the workflow of reviewing AI-generated documents by enabling users to request changes directly within the document itself, rather than having to copy and paste text into a separate chat interface.

This approach keeps the conversation and document closely linked, making it easier to track changes and maintain context. The creator provides a concrete example of how this workflow can be applied, such as when clarifying the team review date in a checkout design note. The implementation of insertion and deletion marks assists in reviewing changes, as users can inspect proposed modifications within the editor before accepting or rejecting them.

The extension comes with a stylesheet for formatting headings, tables, and lists, simplifying the process of creating well-structured HTML content. Users can generate content using the extension and then review revisions in the same document. To get started with the Agentic HTML Visual Editor, install the extension from the Visual Studio Marketplace, open an HTML file, and choose "Open in WYSIWYG" to view it as an editable document.

Once installed, users must also install the authoring skill for their AI agent using the command "npx skills add Ymmy833y/Agentic-HTML-Visual-Editor". The source code, README, and authoring skill are available in the GitHub repository.