pengyue-polaron/deepseek-harness-genui
Code-first generative UI for DeepSeek Harness
已收录
34
Ui
Bundle 已验证
功能介绍
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 | 简体中文 |

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. |
![]() |
|
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. |
![]() |
|
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. |
![]() |
Inline & Canvas
The same app can sit inside the answer or open beside the conversation.
| Inline | 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
- The Agent writes ordinary React + TypeScript and the plugin builds and checks it.
- 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.
- 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.
- 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 元数据,并保持插件与本页展示的目录身份一致。
兼容性以页面上展示的 bundle 与 profile 状态为准。如果某个 profile 尚未检测到,请先保持禁用,并在生产启用前阅读仓库文档。
GitHub 链接和 activity 元数据是 release 与维护状态的来源。新版本发布后重新查看本页,确认目录已经观察到最新版本。




