dsh-genui 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 lhuans
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,64 +1,232 @@
1
1
  # dsh-genui
2
2
 
3
- [中文文档](README.zh-CN.md)
3
+ **English** · [简体中文](https://github.com/lhuans/dsh-genui/blob/main/README.zh-CN.md)
4
4
 
5
- Installable [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) **bundle**: GenUI system prompt + Vue card rendering for assistant `` ```schemaJson `` `` blocks.
5
+ > Turn [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) replies from a wall of text into an interface you can actually click.
6
6
 
7
- Does **not** modify harness source. Uses Cordis slot shadowing (`conversation.chat.node` / `assistant-step` at `priority: -1`), same shape as other out-of-tree plugins (see harness [publish tutorial](../deepseek-harness/docs/user/develop/basic/publish.md)).
7
+ You ask the AI to run a calculation and get back a formula. You ask it to file a request and get eight Markdown bullets. You ask about last week's traffic and get numbers lined up as plain text.
8
8
 
9
- The web profile conversation UI is React. This plugin keeps that slot in React and hosts each card as a **light-DOM Web Component** (`<dsh-genui-card>`) whose internals are `@opentiny/genui-sdk-vue` + OpenTiny Vue materials.
9
+ Nothing is wrong but you still do the work yourself: copy, paste, do the math in your head, then type another message saying "I'll take the second one."
10
10
 
11
- ## Dependencies
11
+ **dsh-genui** is a plugin for DeepSeek Harness (DSH). Install it, ask the same questions, and the answer grows a real interface: calculator keys you can press, dropdowns you can pick from, charts with actual axes. Whatever you click or fill in flows back into the conversation, and the AI picks up from there.
12
12
 
13
- GenUI packages (`@opentiny/genui-sdk-*`, `@opentiny/tiny-schema-renderer`) are pinned in `devDependencies` and resolved from npm at build time. Built artifacts (`lib/index.js`, `lib/client.js`) **inline** GenUI + TinyVue so `dsh plugin add` does not need those packages in the profile.
13
+ One command to install. No changes to DSH source.
14
14
 
15
- ## Prerequisites
15
+ ---
16
16
 
17
- Node.js + pnpm, and a `dsh` CLI that can boot `--profile web` (harness source: `pnpm dsh`, or an installed CLI).
17
+ ## Three real examples
18
+
19
+ All three screenshots are from a live DSH session — not mockups.
20
+
21
+ ### "Generate a calculator"
22
+
23
+ ![A calculator rendered inside a DSH conversation](./public/computer.png)
24
+
25
+ Digits, operators, parentheses, backspace, clear — every key works. That 666 was typed on the keypad, not written into the text by the model.
26
+
27
+ ### "Generate a form"
28
+
29
+ ![A project proposal form rendered inside a DSH conversation](./public/form.png)
30
+
31
+ One sentence produces a full project proposal form: required-field validation, radio group, dropdown, headcount stepper, date picker, toggle, checkboxes, long text.
32
+
33
+ Hit **Submit** and your answers go back into the conversation, so the AI can rank the priority, draft a schedule, or write the proposal for you.
34
+
35
+ ### "Show the last 7 days of traffic as a line chart"
36
+
37
+ ![A traffic line chart rendered inside a DSH conversation](./public/chat.png)
38
+
39
+ Two series, legend, axes, gridlines — a rendered chart, not ASCII art.
40
+
41
+ ---
42
+
43
+ ## Before and after
44
+
45
+ | Situation | Plain chat | With dsh-genui |
46
+ |---|---|---|
47
+ | You need a tool | The AI hands you code to run yourself | The tool appears in the reply, usable right away |
48
+ | Collecting input | "Please provide the following 8 items", typed one by one | One form: pick, fill, submit |
49
+ | Reading data | Text tables, trends left to imagination | Lines, bars, pies — the trend is obvious |
50
+ | Making a choice | You reply "option B" | Click a button, the choice carries into the next turn |
51
+ | Setup cost | — | One `dsh plugin add`, no source changes |
52
+
53
+ ---
54
+
55
+ ## What you can ask for
56
+
57
+ Just talk normally. You never write JSON or learn a syntax. Each category below includes a prompt you can copy as-is.
58
+
59
+ ### Data: charts
60
+
61
+ Bar, line, pie, ring, radar, gauge, funnel, scatter, waterfall, and other common chart types.
62
+
63
+ > "Chart revenue for the last three quarters as bars, and mark year-over-year growth"
64
+ >
65
+ > "Show the order split by channel as a pie chart"
66
+ >
67
+ > "Build a conversion funnel: 100k impressions, 8k clicks, 600 orders, 520 payments"
68
+
69
+ Good for weekly reports, retros, review decks, and anytime you'd rather not open a spreadsheet.
70
+
71
+ ### Input: forms
72
+
73
+ Text fields, textareas, dropdowns, radios, checkboxes, toggles, number steppers, date pickers, search boxes, transfer lists. Submitted values return to the conversation automatically.
74
+
75
+ > "Make a time-off request form with leave type, start and end date, days, and reason"
76
+ >
77
+ > "Build a survey asking which features people use most and how satisfied they are"
78
+ >
79
+ > "Give me a customer intake form, phone number required"
80
+
81
+ Much nicer than being interrogated over eight turns — fill it in once and you're done.
82
+
83
+ ### Tools: little apps
84
+
85
+ The fun category. One sentence, and the AI builds you something that actually works.
86
+
87
+ > "Generate a calculator"
88
+ >
89
+ > "Make a BMI calculator — enter height and weight, get the result"
90
+ >
91
+ > "Build a currency converter between USD and CNY"
92
+ >
93
+ > "Give me a to-do list for today with checkboxes"
94
+ >
95
+ > "Make a raffle picker for the team, I'll paste the names next"
96
+
97
+ ### Structure: tables, lists, layout
98
+
99
+ Tables (with paging and search), tree views, timelines, breadcrumbs, tabs, collapsible panels, cards, carousels, tooltips.
100
+
101
+ > "Put these options in a comparison table: price, timeline, risk"
102
+ >
103
+ > "Lay out the project milestones on a timeline"
104
+ >
105
+ > "Split the frontend, backend, and QA schedules into tabs"
106
+
107
+ ### Flow: multi-turn interaction
108
+
109
+ Interactions travel back to the model, so you can build "you click, I continue" flows.
110
+
111
+ > "Give me three options as cards — expand whichever one I click"
112
+ >
113
+ > "Walk me through a setup wizard, then generate the config file"
114
+ >
115
+ > "Quiz me with five multiple-choice questions and grade my answers"
116
+
117
+ ### One more thing
118
+
119
+ When you're not sure what to ask for, just say "answer me with an interface" and let the AI decide whether a chart, a table, or a form fits best.
120
+
121
+ ---
18
122
 
19
123
  ## Install
20
124
 
125
+ ### Prerequisites
126
+
127
+ - Node.js installed
128
+ - `pnpm` installed (DSH uses it to manage plugins). If you don't have it, run `corepack enable` or `npm i -g pnpm`, then **open a new terminal** and check that `pnpm -v` prints a version
129
+ - DSH running: `npx @deepseek-ai/dsh web`, default at `http://127.0.0.1:3080`
130
+
131
+ ### Option 1: let the AI install it (easiest if you avoid the terminal)
132
+
133
+ The DSH assistant can run shell commands. Open a conversation and tell it:
134
+
135
+ > Install the dsh-genui plugin from npm into the web profile: run `dsh plugin --profile web add dsh-genui`
136
+
137
+ It will run the command in front of you, possibly asking you to approve it. Then follow the restart steps below.
138
+
139
+ ### Option 2: run it yourself
140
+
141
+ In a new terminal:
142
+
21
143
  ```sh
22
144
  dsh plugin --profile web add dsh-genui
23
- dsh --profile web --dump-config # expect "# == dsh-genui"
24
- dsh --profile web
25
145
  ```
26
146
 
27
- Local development (link a checkout instead of the registry package):
147
+ This pulls from the public npm registry — no npm account, no cloning the repo.
148
+
149
+ ### Restart afterwards (don't skip this)
150
+
151
+ DSH locks in its plugin set at startup, so **nothing changes in the UI until you restart**.
152
+
153
+ 1. Go back to the terminal running DSH and press `Ctrl+C`
154
+ 2. Start it again: `dsh web`
155
+ 3. Refresh the browser
156
+ 4. **Start a new conversation** — the plugin's prompt is injected when a session begins, so older sessions won't pick it up
157
+
158
+ ### Check that it worked
159
+
160
+ In the new conversation, say:
161
+
162
+ > Generate a calculator
163
+
164
+ If a working calculator appears in the reply, you're set. If you only see a code block, the plugin isn't active — see the FAQ below.
165
+
166
+ To verify before restarting:
28
167
 
29
168
  ```sh
30
- pnpm install && pnpm build && pnpm test
31
- dsh plugin --profile web add /path/to/dsh-genui
169
+ dsh --profile web --dump-config
32
170
  ```
33
171
 
34
- Remove:
172
+ You should see a `dsh-genui` layer in the output.
173
+
174
+ ### Uninstall
35
175
 
36
176
  ```sh
37
177
  dsh plugin --profile web remove dsh-genui
38
178
  ```
39
179
 
40
- ## Behavior
180
+ This also requires a restart to take effect.
41
181
 
42
- | Half | Behavior |
43
- |---|---|
44
- | **Host** (`lib/index.js`) | `genPrompt('Vue', materialsMeta)` → `systemPrompt.section({ name: 'genui:cards' })` |
45
- | **Client** (`lib/client.js`) | Shadows `assistant-step`; splits text on `` ```schemaJson `` ``; renders `<dsh-genui-card>` (Vue `GenuiRenderer`) |
182
+ ---
46
183
 
47
- Session log unchanged: schema stays inside assistant message text (model-visible ⟺ logged).
184
+ ## FAQ
48
185
 
49
- Vue is **inlined** in the client bundle (not a harness platform module). Custom-element props such as `customActions` are set from React via element properties (React 18 would stringify objects as attributes).
186
+ **Still showing a code block after installing?**
50
187
 
51
- ## Known limitations
188
+ Nine times out of ten you skipped the restart or you're still in an old session. Run through all four steps: stop, restart, refresh, new conversation.
52
189
 
53
- - Shadows the **entire** assistant row; track upstream `AssistantNodeView` changes.
54
- - Client bundle is large (~11MB uncompressed) because TinyVue + materials are inlined.
55
- - GenUI prompt is long — keep the bundle opt-in.
56
- - Peer APIs (`ui-primitives`, slots) come from the running web profile, not this package.
57
- - Custom element uses **light DOM** (`shadowRoot: false`) so TinyVue teleports and theme CSS apply.
190
+ **`pnpm not found on PATH`?**
58
191
 
59
- ## Develop
192
+ DSH needs pnpm to manage plugins. Run `corepack enable` (or `npm i -g pnpm`), then **open a new terminal** — PATH won't update in the old one.
60
193
 
61
- ```sh
62
- pnpm test # splitAssistantText
63
- pnpm build # regenerate lib/
64
- ```
194
+ **The AI doesn't use interfaces on its own?**
195
+
196
+ That's expected; it decides case by case. When you want one, just say "give me a form / chart / interface."
197
+
198
+ **Does this change how DSH normally works?**
199
+
200
+ No. Questions that don't need an interface get regular text answers, exactly as before.
201
+
202
+ **Does it uninstall cleanly?**
203
+
204
+ Yes. Run `dsh plugin remove`, restart, and DSH is back to its original state with no leftover config.
205
+
206
+ ---
207
+
208
+ ## How it works
209
+
210
+ In short: the model no longer writes only text — it also writes a *description of an interface*, and the browser renders that description into real components.
211
+
212
+ A bit more detail: the plugin adds a prompt section teaching the model to emit structured JSON (inside a `schemaJson` code block) when an interface would help. The DSH web client picks up that JSON and hands it to a renderer. It's streaming, so the interface appears as the model writes it — no waiting for the full reply.
213
+
214
+ The components come from [OpenTiny GenUI SDK](https://opentiny.design/genui-sdk) and the OpenTiny Vue library — OpenTiny's generative-UI stack, a spec plus rendering engine for letting LLMs produce interfaces. dsh-genui wires that into the DSH conversation flow.
215
+
216
+ On safety: the model can only use whitelisted components. It cannot inject HTML or scripts, so nothing strange ends up in your conversation.
217
+
218
+ ---
219
+
220
+ ## Links
221
+
222
+ - npm package: <https://www.npmjs.com/package/dsh-genui>
223
+ - OpenTiny GenUI SDK: <https://github.com/opentiny/genui-sdk>
224
+ - DeepSeek Harness: <https://github.com/deepseek-ai/deepseek-harness>
225
+
226
+ License: MIT
227
+
228
+ ---
229
+
230
+ DSH handles agents, sessions, and tools. dsh-genui adds the last piece: replies you can click, not just read.
231
+
232
+ One command, one restart, then say "generate a calculator" — thirty seconds to see the difference.
package/README.zh-CN.md CHANGED
@@ -1,66 +1,232 @@
1
1
  # dsh-genui
2
2
 
3
- [English](README.md)
3
+ [English](https://github.com/lhuans/dsh-genui/blob/main/README.md) · **简体中文**
4
4
 
5
- 可安装的 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) **插件包**:GenUI 系统提示词 + 对助手消息中 `` ```schemaJson `` `` 代码块的 Vue 卡片渲染。
5
+ > [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) 的回答,从「一段文字」变成「一个能点的界面」。
6
6
 
7
- **不修改** Harness 源码。通过 Cordis 插槽遮蔽(`conversation.chat.node` / `assistant-step`,`priority: -1`)接入,形态与其他仓库外插件一致(参见 Harness [发布教程](../deepseek-harness/docs/user/develop/basic/publish.md))。
7
+ 你问 AI「帮我算一下」,它回你一串公式;你说「我要填个申请」,它给你列了八条 Markdown;你说「看看最近七天的访问量」,它把数字排成一张纯文本表格。
8
8
 
9
- Web profile 的对话 UI 基于 React。本插件保留该插槽的 React 实现,并将每张卡片托管为 **light DOM Web Component**(`<dsh-genui-card>`),内部使用 `@opentiny/genui-sdk-vue` 与 OpenTiny Vue 物料。
9
+ 内容都对,但你还得自己动手:复制、粘贴、心算、再打一段字告诉它「我选第二个」。
10
10
 
11
- ## 依赖说明
11
+ **dsh-genui** 是一个 DeepSeek Harness(下称 DSH)插件。装上之后,同样的问题,AI 的回答里会直接长出一个真的界面——计算器的按键能按,表单的下拉能选,图表的坐标轴是画出来的。你在界面上点完、填完,结果会自动回到对话里,AI 接着往下聊。
12
12
 
13
- GenUI 相关包(`@opentiny/genui-sdk-*`、`@opentiny/tiny-schema-renderer`)在 `devDependencies` 中固定版本,构建时从 npm 安装。产物(`lib/index.js`、`lib/client.js`)会**内联** GenUI 与 TinyVue,因此 `dsh plugin add` 后 profile 无需再安装这些包。
13
+ 装它只要一行命令,不用改 DSH 的任何源码。
14
14
 
15
- ## 前置条件
15
+ ---
16
16
 
17
- Node.js + pnpm,以及能启动 `--profile web` 的 `dsh` CLI(Harness 源码中可用 `pnpm dsh`,或已全局安装的 CLI)。
17
+ ## 先看三个真实例子
18
18
 
19
- ## 安装
19
+ 下面三张都是 DSH 里的实际截图,不是效果图。
20
+
21
+ ### 说「生成一个计算器」
22
+
23
+ ![DSH 对话里渲染出的计算器](./public/computer.png)
24
+
25
+ 数字键、四则运算、括号、退格、清空,全都能按。算出来的 666 是真按出来的,不是 AI 写在文字里的。
26
+
27
+ ### 说「生成一个表单」
28
+
29
+ ![DSH 对话里渲染出的项目立项申请表](./public/form.png)
30
+
31
+ 一句话生成一整张立项申请表:必填校验、单选按钮组、下拉框、人数步进器、日期选择、开关、多选框、长文本,一次到位。
32
+
33
+ 填完点「提交申请」,你填的内容会带回对话里,AI 可以接着帮你判断优先级、生成排期,或者直接写成一份立项说明。
34
+
35
+ ### 说「用折线图展示最近 7 天访问量」
36
+
37
+ ![DSH 对话里渲染出的访问量折线图](./public/chat.png)
38
+
39
+ 双折线、图例、坐标轴、网格线,都是渲染出来的图,不是字符画。
40
+
41
+ ---
42
+
43
+ ## 装之前 vs 装之后
44
+
45
+ | 场景 | 普通对话 | 装了 dsh-genui |
46
+ |---|---|---|
47
+ | 要一个工具 | AI 给你一段代码,你自己去跑 | 工具直接出现在回答里,当场就能用 |
48
+ | 收集信息 | AI 列出「请提供以下 8 项」,你一条条打字 | 一张表单,选完填完点提交 |
49
+ | 看数据 | 文本表格,趋势靠脑补 | 折线、柱状、饼图,一眼看出走势 |
50
+ | 做选择 | 你回一句「我选 B」 | 点一下按钮,选择自动进入下一轮 |
51
+ | 接入成本 | — | 一行 `dsh plugin add`,不动 DSH 源码 |
52
+
53
+ ---
54
+
55
+ ## 你可以让它做什么
56
+
57
+ 只要在对话里正常说人话就行,不需要写任何 JSON、也不用背语法。下面每一类都附了一句可以直接复制的话。
58
+
59
+ ### 看数据:图表
60
+
61
+ 支持柱状图、折线图、饼图、环形图、雷达图、仪表盘、漏斗图、散点图、瀑布图等常见图形。
62
+
63
+ > 「把这三个季度的营收画成柱状图,顺便标出同比」
64
+ >
65
+ > 「用饼图看看各渠道的订单占比」
66
+ >
67
+ > 「做个转化漏斗:曝光 10 万、点击 8 千、下单 600、支付 520」
68
+
69
+ 适合周报、复盘、汇报材料,以及「我懒得开 Excel」的时候。
70
+
71
+ ### 收信息:表单
72
+
73
+ 输入框、多行文本、下拉、单选、多选、开关、数字步进、日期选择、搜索框、穿梭框,都可以生成。提交后内容自动回到对话。
74
+
75
+ > 「生成一张请假申请表,要有请假类型、起止日期、天数和事由」
76
+ >
77
+ > 「做个问卷,问用户最常用哪几个功能、满意度打几分」
78
+ >
79
+ > 「帮我做一个客户信息录入表,手机号必填」
80
+
81
+ 比 AI 追问你八轮舒服得多——一次填完就行。
82
+
83
+ ### 做工具:小应用
84
+
85
+ 这是最好玩的一类。用一句话,让 AI 当场给你造个能用的小东西。
86
+
87
+ > 「生成一个计算器」
88
+ >
89
+ > 「做一个 BMI 计算器,输入身高体重直接出结果」
90
+ >
91
+ > 「做个汇率换算的小工具,人民币和美元互转」
92
+ >
93
+ > 「弄一个今天的待办清单,可以勾选完成」
94
+ >
95
+ > 「做一个团队抽奖器,名单我等下给你」
96
+
97
+ ### 理内容:表格、清单、结构
98
+
99
+ 表格(带分页和搜索)、树形目录、时间线、面包屑、标签页、折叠面板、卡片、走马灯、气泡提示。
100
+
101
+ > 「把这几个方案做成对比表,横向对比价格、周期和风险」
102
+ >
103
+ > 「按时间线梳理一下这个项目的关键节点」
104
+ >
105
+ > 「用标签页分开展示前端、后端、测试三块的排期」
106
+
107
+ ### 走流程:多轮交互
108
+
109
+ 界面上的操作会回到对话里,所以可以做「你点一下、我接着干」的流程。
110
+
111
+ > 「给我三个方案,做成卡片,我点哪个你就展开细化哪个」
112
+ >
113
+ > 「做个配置向导,一步步问我需求,最后生成配置文件」
114
+ >
115
+ > 「出五道选择题考考我,我选完你告诉我对错」
116
+
117
+ ### 顺手一提
118
+
119
+ 想不到要什么的时候,直接说「用界面的方式回答我」,AI 会自己判断该用图、用表还是用表单。
120
+
121
+ ---
122
+
123
+ ## 怎么装
124
+
125
+ ### 准备工作
126
+
127
+ - 装好 Node.js
128
+ - 装好 `pnpm`(DSH 管理插件时要用它)。没有的话执行 `corepack enable` 或 `npm i -g pnpm`,然后**新开一个终端**,确认 `pnpm -v` 有输出
129
+ - DSH 能跑起来:`npx @deepseek-ai/dsh web`,默认地址 `http://127.0.0.1:3080`
130
+
131
+ ### 方式一:让 AI 帮你装(推荐给不常用命令行的人)
132
+
133
+ DSH 里的助手本身就能执行终端命令。打开对话,直接跟它说:
134
+
135
+ > 帮我把 npm 上的 dsh-genui 插件装到 web profile,执行 `dsh plugin --profile web add dsh-genui`
136
+
137
+ 它会把命令跑给你看,中间可能要你点一下确认。跑完之后,按下面「重启」那步操作即可。
138
+
139
+ ### 方式二:自己敲命令
140
+
141
+ 新开一个终端:
20
142
 
21
143
  ```sh
22
144
  dsh plugin --profile web add dsh-genui
23
- dsh --profile web --dump-config # 应出现 "# == dsh-genui"
24
- dsh --profile web
25
145
  ```
26
146
 
27
- 本地开发(用本地目录代替 registry 包):
147
+ 这条命令从 npm 公开仓库拉取安装,不需要 npm 账号,也不需要 clone 仓库。
148
+
149
+ ### 装完必须重启(这一步别跳)
150
+
151
+ DSH 在启动时就锁定了当前的插件集合,所以**装完插件不重启,界面上什么都不会变**。
152
+
153
+ 1. 回到跑着 DSH 的那个终端,按 `Ctrl+C` 停掉
154
+ 2. 重新启动:`dsh web`
155
+ 3. 浏览器刷新一下页面
156
+ 4. **开一个新会话**(插件的提示词是在会话开始时注入的,旧会话不生效)
157
+
158
+ ### 验证装好了没
159
+
160
+ 在新会话里说一句:
161
+
162
+ > 生成一个计算器
163
+
164
+ 如果回答区域直接出现一个能按的计算器,就成了。如果只看到一段代码块,说明插件没生效,往下看「常见问题」。
165
+
166
+ 想在重启前先确认一下,可以执行:
28
167
 
29
168
  ```sh
30
- pnpm install && pnpm build && pnpm test
31
- dsh plugin --profile web add /path/to/dsh-genui
169
+ dsh --profile web --dump-config
32
170
  ```
33
171
 
34
- 卸载:
172
+ 输出里应该能看到 `dsh-genui` 这一层。
173
+
174
+ ### 不想要了
35
175
 
36
176
  ```sh
37
177
  dsh plugin --profile web remove dsh-genui
38
178
  ```
39
179
 
40
- ## 行为说明
180
+ 同样需要重启 DSH 才会生效。
41
181
 
42
- | 部分 | 行为 |
43
- |---|---|
44
- | **Host**(`lib/index.js`) | `genPrompt('Vue', materialsMeta)` → `systemPrompt.section({ name: 'genui:cards' })` |
45
- | **Client**(`lib/client.js`) | 遮蔽 `assistant-step`;按 `` ```schemaJson `` `` 切分文本;渲染 `<dsh-genui-card>`(Vue `GenuiRenderer`) |
182
+ ---
46
183
 
47
- 会话日志不变:schema 仍保留在助手消息文本内(模型可见 ⟺ 已记录)。
184
+ ## 常见问题
48
185
 
49
- Vue **内联**在 client bundle 中(非 Harness 平台模块)。`customActions` 等自定义元素属性由 React 通过 element properties 设置(React 18 若走 attribute 会把对象序列化为字符串)。
186
+ **装完还是显示成代码块?**
50
187
 
51
- ## 已知限制
188
+ 九成是没重启,或者还在用旧会话。按上面「装完必须重启」的四步走一遍:停服务 → 重启 → 刷新浏览器 → 开新会话。
52
189
 
53
- - 遮蔽**整条**助手消息行;需关注上游 `AssistantNodeView` 变更。
54
- - Client bundle 体积较大(未压缩约 11MB),因内联了 TinyVue 与物料。
55
- - GenUI 提示词较长——建议保持该 bundle 为可选安装。
56
- - Peer API(`ui-primitives`、插槽等)来自运行中的 web profile,非本包提供。
57
- - 自定义元素使用 **light DOM**(`shadowRoot: false`),以便 TinyVue teleport 与主题 CSS 生效。
190
+ **提示 `pnpm not found on PATH`?**
58
191
 
59
- ## 开发
192
+ DSH 管理插件依赖 pnpm。执行 `corepack enable`(或 `npm i -g pnpm`)之后,**新开一个终端**再试,因为 PATH 在旧终端里不会更新。
60
193
 
61
- ```sh
62
- pnpm test # splitAssistantText
63
- pnpm build # 重新生成 lib/
64
- ```
194
+ **AI 不主动用界面回答?**
195
+
196
+ 正常现象,它会看情况判断。想要的时候明确说一句「用界面/表单/图表的方式给我」就行。
197
+
198
+ **会不会影响原来的用法?**
199
+
200
+ 不会。不需要界面的问题,AI 照常用文字回答,和以前一模一样。
201
+
202
+ **卸载干净吗?**
203
+
204
+ `dsh plugin remove` 之后重启,DSH 完全恢复原样,不留残留配置。
205
+
206
+ ---
207
+
208
+ ## 它是怎么做到的
209
+
210
+ 一句话:AI 不再只写文字,它还会写一段「界面描述」,浏览器把这段描述渲染成真正的组件。
211
+
212
+ 具体一点:插件给模型加了一段提示词,教它在需要的时候输出一段结构化的 JSON(写在 `schemaJson` 代码块里);DSH 网页端拿到这段 JSON 后,交给渲染器变成实际组件。整个过程是流式的,AI 写到哪、界面就渲染到哪,不用等它把话说完。
213
+
214
+ 组件本身来自 [OpenTiny GenUI SDK](https://opentiny.design/genui-sdk) 和 OpenTiny Vue 组件库——这是 OpenTiny 团队做的生成式 UI 方案,一整套「让大模型输出界面」的规范和渲染引擎。dsh-genui 做的事情,是把它接到了 DSH 的对话流里。
215
+
216
+ 顺带说一句安全:模型能用的组件是白名单里的那些,它塞不进 HTML 或脚本,所以不用担心对话里跑出奇怪的东西。
217
+
218
+ ---
219
+
220
+ ## 相关链接
221
+
222
+ - npm 包:<https://www.npmjs.com/package/dsh-genui>
223
+ - OpenTiny GenUI SDK:<https://github.com/opentiny/genui-sdk>
224
+ - DeepSeek Harness:<https://github.com/deepseek-ai/deepseek-harness>
225
+
226
+ License: MIT
227
+
228
+ ---
229
+
230
+ DSH 管好了 Agent、会话和工具,dsh-genui 补上最后一段:让模型的回答不只是能读,还能点。
65
231
 
66
- 更多场景与效果说明见 [docs/promotion.md](docs/promotion.md)。
232
+ 一行命令,重启一次,然后跟它说「生成一个计算器」——三十秒就能看到区别。
package/package.json CHANGED
@@ -1,14 +1,59 @@
1
1
  {
2
2
  "name": "dsh-genui",
3
- "description": "Installable DeepSeek Harness bundle: GenUI system prompt + Vue card rendering (Web Component) for assistant ```schemaJson blocks",
4
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
+ "description": "GenUI for DeepSeek Harness: interactive charts, forms, calculators, dashboards, and mini apps rendered inline in assistant replies, with actions that flow back to the model.",
5
+ "license": "MIT",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/lhuans/dsh-genui.git"
9
+ },
10
+ "homepage": "https://github.com/lhuans/dsh-genui#readme",
11
+ "bugs": {
12
+ "url": "https://github.com/lhuans/dsh-genui/issues"
13
+ },
14
+ "keywords": [
15
+ "dsh-plugin",
16
+ "dsh",
17
+ "deepseek-harness",
18
+ "deepseek",
19
+ "harness",
20
+ "genui",
21
+ "generative-ui",
22
+ "chat",
23
+ "assistant",
24
+ "vue",
25
+ "opentiny",
26
+ "forms",
27
+ "charts",
28
+ "dashboard",
29
+ "schemajson",
30
+ "plugin"
31
+ ],
5
32
  "type": "module",
6
33
  "main": "lib/index.js",
7
34
  "exports": {
8
35
  ".": "./lib/index.js",
9
36
  "./client": "./lib/client.js",
37
+ "./cordis.patch.yml": "./cordis.patch.yml",
10
38
  "./package.json": "./package.json"
11
39
  },
40
+ "files": [
41
+ "public",
42
+ "lib",
43
+ "cordis.patch.yml",
44
+ "README.md",
45
+ "README.zh-CN.md",
46
+ "LICENSE",
47
+ "screenshots.json"
48
+ ],
49
+ "engines": {
50
+ "node": ">=20"
51
+ },
52
+ "scripts": {
53
+ "build": "tsdown",
54
+ "test": "vitest run",
55
+ "prepublishOnly": "pnpm build && pnpm test"
56
+ },
12
57
  "dsh": {
13
58
  "bundle": {
14
59
  "patch": "./cordis.patch.yml"
@@ -23,18 +68,11 @@
23
68
  "platform": "web"
24
69
  }
25
70
  },
26
- "scripts": {
27
- "build": "tsdown",
28
- "test": "vitest run",
29
- "prepublishOnly": "pnpm build && pnpm test"
30
- },
31
- "license": "MIT",
32
- "dependencies": {},
33
71
  "peerDependencies": {
34
72
  "@deepseek-ai/cordis": "^4.0.1",
35
- "@deepseek-ai/dsh-client-ui-primitives": "*",
36
- "@deepseek-ai/dsh-client-ui-slots": "*",
37
- "@deepseek-ai/dsh-system-prompt": "*",
73
+ "@deepseek-ai/dsh-client-ui-primitives": ">=0.0.1-rc.1 <0.1.0 || >=0.1.0-rc.1 <0.2.0-0",
74
+ "@deepseek-ai/dsh-client-ui-slots": ">=0.0.1-rc.1 <0.1.0 || >=0.1.0-rc.1 <0.2.0-0",
75
+ "@deepseek-ai/dsh-system-prompt": ">=0.0.1-rc.1 <0.1.0 || >=0.1.0-rc.1 <0.2.0-0",
38
76
  "@deepseek-ai/schemastery": "^3.18.0",
39
77
  "react": "^18.2.0",
40
78
  "react-dom": "^18.2.0"
@@ -57,13 +95,5 @@
57
95
  "tsdown": "0.22.14",
58
96
  "typescript": "^5.9.3",
59
97
  "vitest": "4.1.10"
60
- },
61
- "files": [
62
- "lib/index.js",
63
- "lib/client.js",
64
- "lib/client.js.map",
65
- "cordis.patch.yml",
66
- "README.md",
67
- "README.zh-CN.md"
68
- ]
98
+ }
69
99
  }
Binary file
Binary file
Binary file
@@ -0,0 +1,5 @@
1
+ [
2
+ "public/computer.png",
3
+ "public/form.png",
4
+ "public/chat.png"
5
+ ]