Both the text and the images in this post were made by an AI tool (Claude Code) through the ManualWorks MCP. Screen captures, callouts, the flowchart, the writing, and putting it all into the document were done 100% by AI. A person only chose the topic and described what to fix. No one touched the text or images directly.
If you've ever written a software guide, you know this. Capturing the screen, cropping just the part you need, adding numbers, and matching them to the numbers in the text takes longer than writing the explanation. And when the screen changes even a little, you have to do it all over again.
Starting with ManualWorks 6.0.27, you can hand this work to an AI tool. An AI tool connected through MCP creates not only the text but also the screen captures and callouts, and puts them into the document.
An image made by an AI tool
The following image was made by an AI tool that captured the ManualWorks visual editor screen, added numbers, and put it into the document.
An image captured and annotated with callouts by an AI tool
1Open the page list, 2click the More icon of a page, and 3select “Copy ID.” The images we added to the Visual Editor chapter of the 6.0.27 user guide were made the same way.
How is it made?
The AI tool goes through the following steps with MCP.
Steps for creating captures and callouts
Capture the screen: Capture the screen you need with a browser or the operating system's capture command.
Upload the image: Upload the capture to ManualWorks with
create_image_upload.Add callouts: Place the capture as an image object, and add callouts and leader lines on top of it as visual editor shape JSON.
Draw with the editor: Open the rendering page that
create_visual_imagereturns, and it draws and saves the image with the same code as the visual editor.Insert the image: Insert the image element after the element you want with
add_image_element.
Because the visual editor draws the image itself, it looks the same as an image a person made in the editor. The AI tool downloads the drawn image to check it, and if a callout covers something else, it moves the callout and draws again. The first image above was redrawn once, too, because the leader line of 1 crossed a sidebar icon at first.
It stays as an editable source, not a flat image
There are many tools that make images with AI. The difference is what the result stays as. In an image added to ManualWorks, the capture and the callouts remain as separate visual editor objects. Click the “Visual Editor” link of the image element to open the image and select a callout, and the number and formatting options appear on the right, as shown below.
A callout selected in the visual editor
If you don't like where a number is, just drag the callout in the visual editor.
When the screen changes, the AI tool replaces only the capture and reuses the callout shapes as they are.
The AI tool can read an image a person has edited and continue working on it.
You can add captures and callouts to the pages of a visual document the same way.
Desktop apps work too, not just the web
ManualWorks doesn't care whether a capture is from a web page or an installed app. With a single captured image, it adds callouts the same way and puts it into the document. The following image is the <Format | Font> dialog of Windows Notepad, captured and annotated by an AI tool.
The Notepad Font dialog captured and annotated with callouts by an AI tool
Choose the 1font, 2font style, and 3size, preview the result in 4Sample, and click 5OK to apply.
The AI tool opened Notepad with a PowerShell script, opened the Font dialog with a menu command, and captured only that dialog window. Because it doesn't capture the whole screen, other windows and notifications don't get mixed in. From there, it's the same as with a web page.
There are some differences from web pages, though.
On a web page, the AI tool can read the page structure to get the exact coordinates of menu items. For a desktop app, the AI tool decides where the callouts go by looking at the capture, so it adjusts them while checking the drawn result. In the image above, 2 and 3 covered the ends of the text at first, so they were moved aside and drawn again.
How to get an app into a state with a menu open or a dialog showing differs from app to app. You can use an AI tool that can operate the desktop, or a person can set up the screen, take the capture, and hand it to the AI tool.
To use it
You need ManualWorks 6.0.27 or later.
A user with MCP permission creates an API key and connects the AI tool. For how to connect, see Using ManualWorks in Claude Code/Codex/Gemini CLI.
Screen captures are taken on the AI tool's side. Web pages are captured with a browser tool, and desktop apps with the operating system's capture command or a screen control tool. You can also hand over captures a person took.
The rendering page address opens without logging in and can be used only once within 10 minutes.
What's next
For now, the AI tool downloads the drawn image to check it. In ManualWorks 7.0, we're preparing features to get the drawn result back directly through MCP and to edit it object by object, such as picking just one callout and moving it. Our goal is for you to refine the text and images of your guides together with an AI tool, through conversation.