Introduction¶

In the DeepSeek Harness (DSH) development workflow, the most common problem when asking AI to modify the UI is not clearly saying “where” to change. A screenshot plus a phrase like “that gray card on the right” leaves AI to guess, and a wrong guess requires another round of conversation. dsh-annotate solves this problem: in DSH’s live preview, select elements directly and add annotations, then send structured data directly into the conversation—no screenshots and no guessing.

Plugin Introduction¶

dsh-annotate is a sidebar plugin for DeepSeek Harness (DSH). It is maintained by TheYoungChen and belongs to the “online tools” category. It currently has 2 stars and uses the MIT license. Its core value is: select elements in live preview, add annotations, and send them directly into the conversation.

Core Features¶

• Two clicks to annotate: Hover to highlight and display the selector; click to complete.
• Two granularities: mark / annotation: Clicking only an element creates a “mark”; adding text after selecting an element creates an “annotation”.
• Robust selectors: Prefer semantic class names, avoid positional chains, and ensure uniqueness.
• Multiple items in one send: Sorted top-to-bottom on the page, with numbers matching the markers in the page.
• Annotations persist across pages: In single-page applications (SPAs), annotated content is preserved when switching routes.
• Address bar shows the real address: Displays the full current page address (including path, query, and hash) rather than the proxy port.
• Does not dirty the message: Annotations are delivered as independent context and are not mixed into the user input box.
• Stack detection: Automatically detects local ports and identifies frameworks (Vite / Next / React / Vue, etc.).
• Local proxying: Shares the site with the host and uses the same-origin policy to handle login state and storage.

Installation and Enabling¶

Host and requirements:
* Host: DeepSeek Harness (DSH); Profile must be web.
* Node version: >= 20.
* Platform: Windows / macOS / Linux.
* Dependencies: No additional runtime dependencies (@deepseek-ai/cordis is provided by DSH).

Installation steps:
1. Clone the plugin into DSH’s plugin directory:

    git clone https://github.com/TheYoungChen/dsh-annotate

2. Add dsh-annotate to dsh.profile.bundles in the Web profile.
3. Restart DSH’s Web client.

Typical Usage¶

1. Open the “Annotation” tab in the sidebar (shortcut ⌘⇧B).
2. At the top, select a local service (port and stack auto-detected) or enter an address directly; .html files in the workspace can also be opened directly.
3. Click “Mark,” then hover in the preview; the highlight box displays the selector.
4. Click the element, and a card appears below the element.
5. Write an annotation if desired, otherwise save directly.
6. The annotation list is sorted top-to-bottom on the page, with numbers matching the markers in the page.
7. Fill in the input box and send the message; annotations are attached to the message as independent context.

Applicable Scenarios and Notes¶

Suitable scenarios: web UI changes, front-end revisions, letting AI precisely locate DOM elements, and selecting elements on local services.

Known limitations:
* Independent operation outside DSH (it must be installed in DSH’s Web profile).
* Elements inside cross-origin iframes (limited by browser same-origin policy).
* Automatic code modification (it only handles “where” to change, not the code itself).
* Network access: By default, only loopback addresses (127.0.0.1) and workspace files can be previewed; configure allowRemote to preview arbitrary http(s) sites.
* After switching pages, manually switch back to the Annotation tab to see the list.

Conclusion¶

dsh-annotate replaces vague descriptions with structured data and injects UI feedback directly into the conversation flow. If you frequently modify interfaces in DSH, this plugin saves time spent repeatedly explaining “where” to change. Related repository and source code: dsh-annotate.