Introduction

DeepSeek Harness (DSH) agents usually interact with users through text. When handling complex data, forms, or visualizations, pure-text descriptions fall short. The a2ui-render-in-dsh plugin enables the DSH Web UI to render interactive UI cards within the conversation flow, allowing agents to dynamically generate quizzes, forms, charts, and diagrams based on context, and to feed the user’s actions back to the model in natural language.

Plugin Overview

This is a DSH plugin maintained by baihui-ai. It is based on the A2UI v0.9 protocol (implemented by @ant-design/x-card from Ant Design X) and extends the agent’s output capabilities to the UI layer. Its core value is enabling users to complete tasks through interactive cards rather than merely reading text.

Core Features

The plugin provides the following core capabilities:

  1. Interactive Card Rendering
    Supports multiple component types, including quizzes, forms, multi-step wizards, dropdown menus, date selectors, product cards, sortable/filterable tables, ECharts charts, China map heatmaps, mathematical function plots, Mermaid flowcharts/mind maps, KaTeX formulas, and step-by-step algorithm animations.

  2. Streaming Progressive Rendering
    Cards are displayed progressively while the model generates output, instead of waiting for the full generation to finish. This is achieved through a truncated JSON repair mechanism, allowing users to see content as it is rendered.

  3. In-Place Updates
    Supports partial updates to already rendered cards through the a2ui_update tool. This is critical for progress bars, long-running task status, or real-time dashboards.

  4. Component Catalog Service
    The plugin provides the a2ui_catalog tool, which returns the complete component catalog and authoring rules. The model calls this tool before rendering cards for the first time, and reuses the catalog in subsequent conversations, avoiding hard-coding large numbers of rules in prompts.

  5. Zero External Dependencies and Offline Capability
    All dependencies (ECharts, Mermaid, KaTeX fonts, China GeoJSON data) are bundled locally. The plugin runtime sends no external requests and works normally in offline environments.

  6. Natural Language Submission
    When users submit by clicking a card button or filling out a form, the system converts the operation into a natural-language message (e.g., “Submit signup”), rather than raw JSON. This makes it easier for the model to understand user intent.

  7. State Persistence and Session Navigation
    Drafts are automatically saved to localStorage and can be restored after a page refresh. Submitted forms are locked and their status is recorded. Even if the cache is cleared, the submission status can be reconstructed from session records. A session navigator on the right side of the plugin is provided for locating drafts and historical messages.

Installation and Enablement

The plugin is published as an npm package. After installing, the package’s files need to be integrated into the DSH build process.

  1. Install the npm package:
    npm install a2ui-render-in-dsh
  1. Integrate into the DSH Bundle:
    According to the configuration in package.json, the plugin includes lib/index.js (host side, provides tools) and lib/client.js (client side, provides tool views). Include these files in the DSH build configuration and apply the cordis.patch.yml patch to register the plugin.

Typical Usage

When interacting with users, the agent uses tools according to the following flow:

  1. Get component definitions: Before rendering cards for the first time, call a2ui_catalog to fetch the rules.
  2. Render cards: Call a2ui_render to generate a card (e.g., a form or chart).
  3. User interaction: The user fills out a form or clicks a button.
  4. Submission feedback: The user’s action is fed back to the model in natural language via session.prompt.
  5. Real-time updates: During generation, use a2ui_update to perform real-time updates to the card (e.g., a progress bar).

Applicable Scenarios and Notes

  • Applicable scenarios: Scenarios requiring data visualization, complex form interaction, mathematical formula display, or step-by-step algorithm demonstrations.
  • React dependency: @ant-design/x-card requires React as an optional peer dependency.
  • Voice limitations: Due to limitations of the DSH prompt channel, the current version does not support voice recording.
  • Offline environments: Because all resources are bundled, the plugin fully supports offline use.
  • License: Follows the MIT License.

Summary

a2ui-render-in-dsh introduces the A2UI protocol and builds a complete interaction loop in the DSH Web UI. It addresses the limitations of pure-text conversations in handling structured data and complex interactions, while maintaining a good user experience through streaming rendering and state management.

  • GitHub: https://github.com/baihui-ai/a2ui-render-in-dsh
  • Catalog: https://www.skillhub.cn/plugins/baihui-ai