pengyue-polaron/deepseek-harness-genui

Code-first generative UI for DeepSeek Harness

Bundle 已验证 MIT TypeScript v0.12.2
Bundle 已验证

已收录

34

Ui

Bundle 已验证

版本v0.12.2
语言TypeScript
许可证MIT
在 GitHub 查看

功能介绍

Code-first React + TypeScript 任务应用,支持 Inline、Canvas、全屏与 localhost;交互状态可供 Agent 后续轮次读取,MCP 和 API 访问在用户授权后执行。

适合

  • 需要通过交互模型、图示或基于源码的探索器理解复杂关系的任务。
  • 需要收集多项关联选择或表单值,并让 Agent 后续轮次读取保存状态继续处理的工作流。
  • 需要让同一个 React + TypeScript 任务应用运行于 Inline、Canvas、全屏或 localhost 的团队。

不适合

  • 用文字即可清楚完成的简单提问、改写、摘要或短列表。
  • 要求链接、授权或交互状态永久保留的工作流;文档说明链接和授权 7 天后过期,状态连续 7 天未更新也会过期。
  • 需要未声明、带凭据或任意直连 API 的应用;直接请求仅限已声明的无凭据公开 HTTPS 路由,MCP 访问还需授权。

README

DeepSeek Harness GenUI

English 简体中文

Node.js License

DeepSeek Harness with an interactive day plan inline and a scientific model open in Canvas

Some tasks are awkward in text. DeepSeek Harness GenUI lets an Agent create a focused interface for the current task: something that explains a difficult relationship or collects a complex user response.

The plugin is code-first. The Coding Agent writes ordinary React + TypeScript, not a component-tree DSL or IR. The interface can save what the user selected, entered, or changed so the next Agent turn can read it and continue the task.

When an Interface Helps

Use an interface when the user needs to see a difficult relationship or make several connected choices. Plain questions, rewriting, summaries, and simple lists stay in prose.

Pick calendar slots

Turn candidate availability into a short list of useful 90-minute writing blocks.

The interface saves the three choices to the task. A later calendar action remains separate and asks for approval.
English interface for choosing three writing slots
Explore photosynthesis

Move light, carbon dioxide, temperature, and stomatal controls to find the limiting step.

The diagram changes with the controls, making each variable's effect easier to explore than to describe.
English interactive photosynthesis model with four causal controls
Trace a code path

Ask from the CLI for a source-grounded explanation of a real project flow.

The result is a local explorer with files, functions, branches, and the path selected by the user.
English source-grounded code path explorer returned from a CLI request

Inline & Canvas

The same app can sit inside the answer or open beside the conversation.

Inline Canvas
An interactive code path shown inline in a DeepSeek Harness conversation The DeepSeek Harness sidebar, conversation, and code-path explorer visible together in the right-side Canvas
A compact control or focused choice. More room without covering the conversation.

Inline, Canvas, fullscreen, and CLI/localhost are different surfaces over the same task state. Selections and inputs saved in one surface remain available to later Agent turns.

CLI Example

The terminal profile returns a localhost app. A follow-up can refer to the path already selected in that app.

❯ Explain how a generated app reaches the permission-gated runtime in this
  repository. Build an interactive code-path explorer and return a localhost URL.

  I mapped src/tools.ts → src/artifacts/builder.ts → src/runtime/server.ts
  → src/artifacts/registry.ts.

  http://127.0.0.1:<port>/genui/app/<task-app>

❯ Where does the path I selected stop?

  It reaches the permission check in src/runtime/server.ts, then stops before
  the connected tool runs because access has not been allowed.

How It Works

  1. The Agent writes ordinary React + TypeScript and the plugin builds and checks it.
  2. The interface saves semantic values—selections, form answers, drafts, and progress—to the current task. A follow-up can read those values instead of asking the user to repeat them.
  3. The app declares only the Harness/MCP/Skill tools or credential-free public HTTPS routes it needs. Before opening a connected app, Harness presents the complete access list for one task-scoped decision; changed capabilities are shown again, and undeclared calls are blocked.
  4. Later edits update the same app. A failed update never replaces the current working version.

In Web, access can be reviewed or revoked from the app card. MCP credentials never enter generated code.

Why Code-First

Most generative UI systems ask developers to prebuild widgets or maintain a trusted component catalog. This plugin lets the Coding Agent build task-specific React instead. The generated code still runs inside a sandbox, meaningful user state stays with the task, connected actions remain permission-gated, and a failed update never replaces the last working version.

That makes GenUI more expressive than a fixed component catalog, but deliberately narrower than a cross-client UI protocol: it is built for DeepSeek Harness and its task lifecycle.

Task Apps or Component Trees?

Both approaches are useful, but they optimize for different work:

Choose a component-schema renderer when… Choose this plugin when…
The result is a compact card, table, chart, or form assembled from a known catalog. The task needs a purpose-built React app whose structure and interactions are not known in advance.
Small, predictable model output and portable rendering matter most. Free-form simulations, spatial tools, connected workflows, or multi-step state matter most.
An interaction can be represented as a component event. The user’s selections and edits need to become task state that the next Agent turn can read.

This project does not replace lightweight dsh-ui component renderers. It covers the code-first, task-specific side of GenUI.

DESIGN.md

Open Settings → Plugins → Plugin configuration to set the default design for new apps. Choose automatic selection or a built-in profile, import a custom DESIGN.md, or export the selected one as a starting point. Once selected, it becomes the default for apps created later, so the style does not need to be repeated in every prompt. Existing apps keep their original design.

DESIGN.md controls the design language, not the page structure. React + TypeScript remains free to implement simulations, graphics, maps, timelines, code graphs, animation, and irregular layouts.

Design Visual language
material-3 Google Material 3: tonal surfaces, expressive color, clear hierarchy, and touch-friendly controls
apple-human-interface Apple Human Interface: calm, precise, content-led, and familiar system-like controls
shadcn-ui shadcn/ui: semantic tokens, crisp borders, compact forms, and complete interaction states

Install

Use Node.js ^22.19.0 || >=24. The plugin supports DeepSeek Harness ^0.1.0-rc.6.

dsh plugin --profile web add dsh-plugin-genui
dsh --profile web

The Web profile supports Inline, Canvas, fullscreen, and localhost links. For a terminal profile, replace web with tui; TUI returns localhost links and does not embed Canvas. Connect MCP servers to the same profile as usual.

The plugin does not download or launch a browser. Every candidate is compiled and checked against the source contracts before it can replace the last working version. The repository CI separately exercises the sandboxed runtime in Chromium; plugin users do not need it.

Try It in Two Minutes

Start a new Web session and paste one of these prompts:

Plan a Saturday route with a museum, a riverside garden, and dinner. Build an
interface where I can change the times and make the garden optional.
Trace how a generated app reaches the permission-gated runtime in this
repository. Build an interactive code-path explorer grounded in the source.
Build an interactive double-slit experiment. Let me change wavelength, slit
spacing, and screen distance and see the interference pattern update.

After changing and saving something in the interface, ask:

What did I just choose in the interface? Continue from the saved result.

The useful proof is not only that an interface appears—it is that the next Agent turn can continue from the interaction.

Safety

Generated code runs in a sandbox. Direct API requests are limited to declared, credential-free public HTTPS routes. Temporary links and grants expire after 7 days; saved task state expires 7 days after its last update. Return to the app card in the task to review or remove access.

The plugin uses DeepSeek Harness + Cordis, React 18 + TypeScript, and esbuild. Repository tests use Playwright and Vitest.

Development

Building from source requires pnpm 11.

Chromium is needed only to run the repository’s browser end-to-end tests. It is not installed or launched by the plugin.

pnpm install
pnpm exec playwright install chromium
pnpm run typecheck
pnpm test
pnpm run package:plugin

Acceptance scenarios · Contributing · MIT

常见问题常见问题

在启用了 DSH 的终端中执行已验证命令 dsh plugin --profile default add github:pengyue-polaron/deepseek-harness-genui。命令会解析公开 package 元数据,并保持插件与本页展示的目录身份一致。