Preface

Under the DSH plugin system, WebUI plugin development often requires checking the real interface, modifying source code, adjusting Harmony Patches, and confirming running results after building. If unfinished code is modified directly on the stable Host, it is easy to introduce debugging states into the environment currently in use.

DeepSeek WebUI Studio is a visual workspace maintained by memorax-ai for building DSH WebUI plugins. Its positioning is to perform checks, edits, builds, and verifications around the official DSH WebUI, rather than creating an offline mock page tool. It requires dsh-harmony@0.8.7 as the minimum compatible version and includes Harmony as a transitive dependency.

What is this

  • Repository: memorax-ai/dsh-webui-studio
  • Package name: dsh-webui-studio
  • License: MIT
  • Purpose: Visually build DSH WebUI plugins
  • Runtime requirements: Node engines ^22.22.3 || >=24.11.1

This tool isolates the Draft workspace from the stable DSH Host. Each Draft can have its own Git worktree, DSH_HOME, profile, dependencies, and child Host. You can check the official WebUI, edit plugin source code, generate styles, build plugins, and confirm the live Client graph revision within this isolated environment.

Core Features

The capabilities listed below all revolve around Draft isolation, real WebUI inspection, and plugin artifact verification.

  • Create a minimal DSH Web Client plugin, or import an existing local plugin folder.
  • Provide independent Git worktree, DSH_HOME, profile, dependencies, and child Host for each Draft.
  • Preview the official WebUI without loading Draft code into the stable Host.
  • Browse normally, and check DOM, React owners, source candidates, and Patch traces.
  • Automatically display plugin-registered Element controls, and save defaults and subtree-scoped CSS back to Draft source.
  • Check Component declaration matches, generate CSS decorators, without modifying existing call-site props.
  • Adjust Harmony providers and the order/switch of individual Patches via a single transactional reload.
  • Edit Draft source using CodeMirror, and keep installed dependency sources as read-only.
  • Execute Build, apply via Harmony, reload, and confirm live Client graph revision.
  • Start Draft-scoped Agent, or continue using temporary Studio tools, skills, and context in an existing DSH session.
  • Allow external Agents to check running WebUI via a local read-only Streamable HTTP MCP endpoint.
  • Answer one-shot tool approvals, structured questions, and plan reviews inside Studio.
  • Check package exports, artifacts, Patch state, ordering, dependencies, and pack output.
  • Run multiple isolated Draft Preview Hosts simultaneously.
  • Snapshot the current WebUI profile or another local profile to each isolated Draft runtime.
  • Adjust plugins order via a single transactional hot reload, and enable/disable Harmony Providers.

Installation and Activation

First, confirm that the local Node version meets the requirements:

^22.22.3 || >=24.11.1

Then install and start DSH Web:

dsh plugin --profile web add dsh-webui-studio
dsh web

After starting, Studio provides locally:

http://127.0.0.1:<dsh-port>/studio

The first time you access /studio, you need to approve “Install Harmony and restart”. This step installs the launcher and returns you to Studio after the local DSH process restarts.

Studio-managed data is saved in:

$DSH_HOME/studio/

During editing, unsaved Source modifications must be saved first with Ctrl+S or Command+S before switching or closing tabs.

Typical Usage

The following explains the common development sequence.

1. Create or Import Plugins

You can create a new minimal DSH Web Client plugin, or import an existing local plugin folder.

New plugins are saved inside Studio by default. If a target folder needs to be specified, you can record an absolute destination, but Studio will not create or modify that folder at creation time. Only when “Save plugin to folder” is used later will the Studio-owned project snapshot be synchronized, and destination-only files like node_modules will not be modified in the target folder.

When importing an existing plugin, Studio copies an isolated snapshot that does not include .git or node_modules. Symbolic links are rejected, and the original folder is not modified.

2. Inspect Real WebUI

After opening Draft Preview in Studio, you can first browse the interface normally, then enter inspection mode. Inspectable content includes:

DOM
React owners
source candidates
Patch traces

This step confirms the current interface, component ownership, relevant source code candidates, and Patch traces, allowing subsequent modifications to be based on real runtime results.

3. Modify Source Code and Styles

Studio uses CodeMirror to edit Draft source. Installed dependency source code is protected as read-only to prevent direct modification of dependency sources.

For style work, two types of operations can be performed:

  1. Save defaults for plugin-registered Element controls.
  2. Save subtree-scoped CSS back to Draft source.

You can also check Component declaration matches and generate CSS decorators. This process does not change existing call-site props, suitable for scenarios where call-site control is needed without modification.

4. Build, Apply, and Verify

After modifications are complete, execute the build and verification process:

  1. Build Draft plugin.
  2. Apply via Harmony.
  3. Reload preview environment.
  4. Confirm live Client graph revision.

Only when the Preview confirms the new live Client graph revision does the build result enter a usable state.

5. Use Agent or External MCP to Inspect

Studio supports starting an Agent within the Draft scope, or continuing an existing DSH session while temporarily adding Studio tools, skills, and context. You can handle one-shot tool approvals, structured questions, and plan reviews inside Studio.

External Agents can also check the running WebUI via a local read-only Streamable HTTP MCP endpoint:

http://127.0.0.1:<dsh-port>/studio/mcp

This MCP endpoint follows Studio’s loopback-only boundary, including access via SSH loopback tunnel. MCP tools only check the current Host; external Agents are still responsible for editing and building their own WebUI projects.

6. Run Multiple Drafts and Profile Snapshots

You can run multiple isolated Draft Preview Hosts simultaneously. Each Draft runtime can take a snapshot from the current WebUI profile or another local profile. This allows comparison of different plugin combinations, Patch orders, or profile configurations across different Drafts without interfering with each other.

Applicable Scenarios and Notes

Scenarios suitable for this tool typically include:

  • Developing DSH WebUI plugins, needing to inspect interface and components based on the official WebUI.
  • Need to isolate Draft, independent DSH_HOME, independent profiles, and independent Preview Hosts.
  • Need to adjust Harmony Providers, Patches, plugin order, and perform transactional reloads.
  • Need to check Patch traces, source candidates, package exports, artifacts, and pack output.
  • Need to allow external Agents to check running status via a local MCP endpoint in read-only mode.

Note the following points before use:

  1. Plugins run with the current dsh process permissions; check source code, dependencies, and license before installing.
  2. dsh-harmony@0.8.7 is the minimum compatible version.
  3. First access to /studio installs the Harmony launcher and restarts the local DSH process.
  4. Studio data is in $DSH_HOME/studio/; save Source before switching or closing tabs.
  5. MCP endpoint is for local loopback inspection only and does not replace external Agents’ responsibilities for editing and building.
  6. Symbolic links are rejected when importing local plugins, and the original folder is not modified.
  7. New plugins remain inside Studio by default; the optional target folder is not created or modified before “Save plugin to folder”.

Summary

The value of DeepSeek WebUI Studio lies in putting DSH WebUI plugin development into a checkable, isolatable, and verifiable workspace: first check based on the official WebUI, then edit Draft source, and finally build, reload, and confirm the live Client graph revision through Harmony. For development workflows requiring stable handling of real plugin graphs, Patches, styles, and external Agent inspections, it is an engineering-oriented choice.

GitHub URL:

https://github.com/memorax-ai/dsh-webui-studio