@vpxa/aikit 0.1.155 → 0.1.157
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/package.json +1 -1
- package/packages/blocks-core/dist/index.d.ts +14 -1
- package/packages/blocks-core/dist/index.js +26 -24
- package/packages/present/dist/index.html +5 -5
- package/packages/server/dist/index.js +1 -1
- package/packages/server/dist/{server-Bs6Rib4s.js → server-DZKflziG.js} +127 -105
- package/scaffold/dist/definitions/bodies.mjs +10 -0
- package/scaffold/dist/definitions/protocols.mjs +57 -40
- package/scaffold/dist/definitions/skills/present.mjs +79 -80
|
@@ -7,6 +7,8 @@ const e=()=>"**`AGENTS.md` is already in your context** — do NOT re-read it. J
|
|
|
7
7
|
3. Read \`aikit\` skill, check \`AGENTS.md\` (decision protocol and FORGE protocol are inlined below)
|
|
8
8
|
4. Read \`multi-agents-development\` skill — **REQUIRED before any delegation**
|
|
9
9
|
|
|
10
|
+
> **HARD RULE (Orchestrator):** When gathering context yourself (not via subagent), follow AI Kit Tool Discipline — use \`search\`/\`file_summary\`/\`compact\`/\`digest\`, NOT \`read_file\`/\`grep_search\`. Use \`check({})\`/\`test_run({})\`, NOT \`run_in_terminal\` for tsc/lint/test.
|
|
11
|
+
|
|
10
12
|
## Agent Arsenal
|
|
11
13
|
|
|
12
14
|
${e}
|
|
@@ -378,6 +380,8 @@ The Planner is typically activated by the Orchestrator as part of a flow step (e
|
|
|
378
380
|
| \`repo-access\` | When the plan involves accessing private, enterprise, or self-hosted repositories |
|
|
379
381
|
| \`browser-use\` | When the plan involves browser-based auth recovery, web scraping, or interacting with web applications that require login |`,Implementer:`${e()}
|
|
380
382
|
|
|
383
|
+
> **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
|
|
384
|
+
|
|
381
385
|
## Implementation Protocol
|
|
382
386
|
|
|
383
387
|
1. **Understand scope** — Read the phase objective, identify target files
|
|
@@ -431,6 +435,8 @@ Every implementation response MUST end with a structured status block:
|
|
|
431
435
|
- Description of blocker
|
|
432
436
|
\`\`\``,Frontend:`${e()}
|
|
433
437
|
|
|
438
|
+
> **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
|
|
439
|
+
|
|
434
440
|
## Frontend Protocol
|
|
435
441
|
|
|
436
442
|
0. **Check for DESIGN.md** — Look for \`DESIGN.md\` in the workspace root or \`docs/\` directory. If found, read it first — it defines the project's design system, tokens, colors, typography, spacing, and component conventions. Follow it as the authoritative design reference.
|
|
@@ -478,6 +484,8 @@ Every implementation response MUST end with a structured status block:
|
|
|
478
484
|
If the pre-flight dev server cannot be started (e.g. sandbox), fall back to
|
|
479
485
|
\`compact\` inspection of the component source + describe expected visual behavior.`,Debugger:`${e()}
|
|
480
486
|
|
|
487
|
+
> **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
|
|
488
|
+
|
|
481
489
|
## Debugging Protocol
|
|
482
490
|
|
|
483
491
|
### Phase 1: Build the Right Feedback Loop
|
|
@@ -553,6 +561,8 @@ When debugging tool invocation issues, use the replay audit trail with traceId:
|
|
|
553
561
|
- Server middleware context (\`ctx.requestId\`)
|
|
554
562
|
4. Filter by traceId: search replay.jsonl for the specific UUID to trace the full invocation lifecycle`,Refactor:`${e()}
|
|
555
563
|
|
|
564
|
+
> **HARD RULE:** NEVER use \`read_file\` to understand code. Use \`file_summary\`/\`compact\`/\`digest\`. \`read_file\` is ONLY for exact edit lines. NEVER use \`run_in_terminal\` for tsc/lint/test — use \`check({})\`/\`test_run({})\`.
|
|
565
|
+
|
|
556
566
|
## Refactoring Protocol
|
|
557
567
|
|
|
558
568
|
1. **AI Kit Recall** — Search for established patterns and conventions
|
|
@@ -27,13 +27,13 @@ ${e===`<PROFILE>`?`**Profile:** Check your role → implementer | documenter | r
|
|
|
27
27
|
You may be invoked in two modes:
|
|
28
28
|
1. **Direct** — you have full AI Kit tool access. Follow the **Information Lookup Order** below.
|
|
29
29
|
2. **Sub-agent** (via Orchestrator) — you may have limited MCP tool access.
|
|
30
|
-
|
|
30
|
+
The Orchestrator provides context under "## Prior AI Kit Context" or "### Current Code Context" in your prompt.
|
|
31
31
|
If present, skip AI Kit Recall and use the provided context instead.
|
|
32
32
|
**Visual Output:** When running as a sub-agent, do NOT use the \`present\` tool (output won't reach the user).
|
|
33
33
|
Instead, include structured data (tables, findings, metrics) as formatted text in your final response.
|
|
34
34
|
The Orchestrator will re-present relevant content to the user.
|
|
35
35
|
|
|
36
|
-
**Detection:** If your prompt contains "## Prior AI Kit Context"
|
|
36
|
+
**Detection:** If your prompt contains "## Prior AI Kit Context" OR "### Current Code Context" OR was dispatched via \`runSubagent\`, you are in sub-agent mode. When in sub-agent mode, use provided context — do NOT re-read files already given in your prompt.
|
|
37
37
|
|
|
38
38
|
---
|
|
39
39
|
|
|
@@ -54,6 +54,61 @@ You may be invoked in two modes:
|
|
|
54
54
|
|
|
55
55
|
---
|
|
56
56
|
|
|
57
|
+
## AI Kit Tool Discipline
|
|
58
|
+
|
|
59
|
+
Use AI Kit retrieval and compression tools first. Prefer reusable compressed context over raw reads, and only drop to native tools when precision for an edit or tool fallback requires it.
|
|
60
|
+
|
|
61
|
+
| NEVER use this | USE THIS instead | Why |
|
|
62
|
+
|---|---|---|
|
|
63
|
+
| \`read_file\` to understand a file | \`file_summary({ path })\` | Structure, exports, imports — 10x fewer tokens |
|
|
64
|
+
| \`read_file\` to find specific code | \`compact({ path, query })\` | Server-side read + semantic extract — 5-20x reduction |
|
|
65
|
+
| Multiple \`read_file\` calls | \`digest({ sources })\` | Compresses multiple files into token-budgeted summary |
|
|
66
|
+
| \`grep_search\` / \`semantic_search\` | \`search({ query })\` | Hybrid search across all indexed + curated content |
|
|
67
|
+
| \`grep_search\` for a symbol name | \`symbol({ name })\` | Definition + references with scope and call context |
|
|
68
|
+
| \`run_in_terminal\` for tsc/lint | \`check({})\` | Typecheck + lint combined, summary output |
|
|
69
|
+
| \`run_in_terminal\` for test | \`test_run({})\` | Run tests with structured output |
|
|
70
|
+
| Editing without reading | \`file_summary\` then targeted \`read_file\` | Prevents wrong-position edits |
|
|
71
|
+
|
|
72
|
+
**\`read_file\` is ONLY acceptable when you need exact line content FOR EDITING (before \`replace_string_in_file\`).**
|
|
73
|
+
|
|
74
|
+
For edits, first understand structure with \`file_summary\` or \`compact\`, then use targeted \`read_file\` only for the exact region.
|
|
75
|
+
Never patch from search snippets or assumptions alone.
|
|
76
|
+
|
|
77
|
+
## compact() Failure Recovery
|
|
78
|
+
|
|
79
|
+
If \`compact()\` returns <200 bytes or empty content, the file is NOT indexed. Follow this fallback:
|
|
80
|
+
|
|
81
|
+
1. **Do NOT retry** compact on the same file — it will fail again
|
|
82
|
+
2. **Use \`read_file\`** with a LARGE range (e.g., \`startLine: 1, endLine: 9999\`) — NEVER chunk into small ranges
|
|
83
|
+
3. **Use \`stash()\`** to cache findings from unindexed files — context pressure causes re-reads
|
|
84
|
+
4. **Check \`status()\`** to see which paths are indexed before calling compact
|
|
85
|
+
|
|
86
|
+
**Anti-patterns to avoid:**
|
|
87
|
+
- Retrying compact 3x on same unindexed file (wastes 3 tool calls)
|
|
88
|
+
- Falling back to read_file in small chunks (10-50 lines) — each chunk costs ~3K prompt tokens in overhead
|
|
89
|
+
- Re-reading the same file later because you forgot the content — use stash() to cache
|
|
90
|
+
|
|
91
|
+
*Why:* these tools reduce token cost, shrink duplicate reads, and lower the odds of wrong-file or wrong-position edits while preserving reusable context.
|
|
92
|
+
|
|
93
|
+
---
|
|
94
|
+
|
|
95
|
+
## Context Caching (MANDATORY for multi-step tasks)
|
|
96
|
+
|
|
97
|
+
After your first \`file_summary\` or \`compact\` call on a file, cache the result:
|
|
98
|
+
\`\`\`
|
|
99
|
+
stash({ action: 'set', key: 'ctx:<filename>', value: '<summary result>' })
|
|
100
|
+
\`\`\`
|
|
101
|
+
|
|
102
|
+
Before reading the same file again, check the cache:
|
|
103
|
+
\`\`\`
|
|
104
|
+
stash({ action: 'get', key: 'ctx:<filename>' })
|
|
105
|
+
\`\`\`
|
|
106
|
+
|
|
107
|
+
If cached → use it. If not → call \`file_summary\`/\`compact\` and cache.
|
|
108
|
+
**NEVER \`read_file\` the same file twice** without checking stash first.
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
57
112
|
|
|
58
113
|
## Domain Skills
|
|
59
114
|
|
|
@@ -262,44 +317,6 @@ For outdated AI Kit entries → \`knowledge({ action: "update", path, content, r
|
|
|
262
317
|
|
|
263
318
|
---
|
|
264
319
|
|
|
265
|
-
## AI Kit Tool Discipline
|
|
266
|
-
|
|
267
|
-
Use AI Kit retrieval and compression tools first. Prefer reusable compressed context over raw reads, and only drop to native tools when precision for an edit or tool fallback requires it.
|
|
268
|
-
|
|
269
|
-
| NEVER use this | USE THIS instead | Why |
|
|
270
|
-
|---|---|---|
|
|
271
|
-
| \`read_file\` to understand a file | \`file_summary({ path })\` | Structure, exports, imports — 10x fewer tokens |
|
|
272
|
-
| \`read_file\` to find specific code | \`compact({ path, query })\` | Server-side read + semantic extract — 5-20x reduction |
|
|
273
|
-
| Multiple \`read_file\` calls | \`digest({ sources })\` | Compresses multiple files into token-budgeted summary |
|
|
274
|
-
| \`grep_search\` / \`semantic_search\` | \`search({ query })\` | Hybrid search across all indexed + curated content |
|
|
275
|
-
| \`grep_search\` for a symbol name | \`symbol({ name })\` | Definition + references with scope and call context |
|
|
276
|
-
| \`run_in_terminal\` for tsc/lint | \`check({})\` | Typecheck + lint combined, summary output |
|
|
277
|
-
| \`run_in_terminal\` for test | \`test_run({})\` | Run tests with structured output |
|
|
278
|
-
| Editing without reading | \`file_summary\` then targeted \`read_file\` | Prevents wrong-position edits |
|
|
279
|
-
|
|
280
|
-
**\`read_file\` is ONLY acceptable when you need exact line content FOR EDITING (before \`replace_string_in_file\`).**
|
|
281
|
-
|
|
282
|
-
For edits, first understand structure with \`file_summary\` or \`compact\`, then use targeted \`read_file\` only for the exact region.
|
|
283
|
-
Never patch from search snippets or assumptions alone.
|
|
284
|
-
|
|
285
|
-
## compact() Failure Recovery
|
|
286
|
-
|
|
287
|
-
If \`compact()\` returns <200 bytes or empty content, the file is NOT indexed. Follow this fallback:
|
|
288
|
-
|
|
289
|
-
1. **Do NOT retry** compact on the same file — it will fail again
|
|
290
|
-
2. **Use \`read_file\`** with a LARGE range (e.g., \`startLine: 1, endLine: 9999\`) — NEVER chunk into small ranges
|
|
291
|
-
3. **Use \`stash()\`** to cache findings from unindexed files — context pressure causes re-reads
|
|
292
|
-
4. **Check \`status()\`** to see which paths are indexed before calling compact
|
|
293
|
-
|
|
294
|
-
**Anti-patterns to avoid:**
|
|
295
|
-
- Retrying compact 3x on same unindexed file (wastes 3 tool calls)
|
|
296
|
-
- Falling back to read_file in small chunks (10-50 lines) — each chunk costs ~3K prompt tokens in overhead
|
|
297
|
-
- Re-reading the same file later because you forgot the content — use stash() to cache
|
|
298
|
-
|
|
299
|
-
*Why:* these tools reduce token cost, shrink duplicate reads, and lower the odds of wrong-file or wrong-position edits while preserving reusable context.
|
|
300
|
-
|
|
301
|
-
---
|
|
302
|
-
|
|
303
320
|
## Guidelines
|
|
304
321
|
|
|
305
322
|
Behavioral guidelines to reduce common LLM coding mistakes. Apply when writing, reviewing, or refactoring code.
|
|
@@ -15,11 +15,11 @@ argument-hint: "Content to present — data, analysis results, status report, co
|
|
|
15
15
|
|
|
16
16
|
## Quick Reference
|
|
17
17
|
|
|
18
|
-
**
|
|
19
|
-
- \`
|
|
20
|
-
- \`
|
|
18
|
+
**Transport rule:**
|
|
19
|
+
- No \`actions\` array — renders inline as an MCP App surface in the host client.
|
|
20
|
+
- \`actions\` array present — switches to browser transport and opens the system browser.
|
|
21
21
|
|
|
22
|
-
**Content blocks** (pass as \`
|
|
22
|
+
**Content blocks** (pass as \`blocks\` array of \`{ type, title?, value }\`):
|
|
23
23
|
| Type | Value shape | Use for |
|
|
24
24
|
|------|-------------|---------|
|
|
25
25
|
| \`markdown\` | string | Prose, headings, code — **never tables** |
|
|
@@ -33,58 +33,57 @@ argument-hint: "Content to present — data, analysis results, status report, co
|
|
|
33
33
|
| \`checklist\` | \`[{label,checked}]\` | Todo/check lists |
|
|
34
34
|
| \`code\` | string | Code blocks |
|
|
35
35
|
|
|
36
|
-
**Actions** (interactive buttons/selects
|
|
36
|
+
**Actions** (interactive buttons/selects; adding them switches transport to browser):
|
|
37
37
|
\`\`\`json
|
|
38
38
|
{ "actions": [{ "type": "button", "id": "approve", "label": "Approve", "variant": "primary" }] }
|
|
39
39
|
\`\`\`
|
|
40
40
|
|
|
41
41
|
**Anti-patterns:**
|
|
42
42
|
- ❌ Tables inside \`markdown\` blocks → renders as raw pipe text
|
|
43
|
-
- ❌ \`
|
|
43
|
+
- ❌ Assuming a \`format\` field exists → transport is inferred from \`actions\`
|
|
44
44
|
- ❌ Unicode escapes in \`title\` param (\`\\u2014\`) → literal text (use actual — character)
|
|
45
45
|
- ❌ Chart.js format (\`{labels,datasets}\`) → use \`{chartType,data,xKey,yKeys}\`
|
|
46
46
|
|
|
47
|
-
The \`present\` tool renders structured content as a professional dark-themed dashboard.
|
|
47
|
+
The \`present\` tool renders structured content as a professional dark-themed dashboard. Transport is determined automatically:
|
|
48
48
|
|
|
49
|
-
-
|
|
50
|
-
-
|
|
49
|
+
- **Inline MCP App transport** — No \`actions\`. Best for display-only content rendered inline in the host client.
|
|
50
|
+
- **Browser transport** — \`actions\` present. Best when you need user interaction or full-page rendering outside the chat surface.
|
|
51
51
|
|
|
52
|
-
##
|
|
52
|
+
## Transport Selection Rules (MUST FOLLOW)
|
|
53
53
|
|
|
54
|
-
| Situation |
|
|
55
|
-
|
|
56
|
-
| Display-only content (tables, charts, reports, status boards) |
|
|
57
|
-
| Need user input back (confirmations, selections, form data) |
|
|
58
|
-
| Rich visual dashboards without interaction |
|
|
59
|
-
| User explicitly asks for browser |
|
|
60
|
-
| **Running in CLI mode**
|
|
54
|
+
| Situation | Include \`actions\`? | Transport | Why |
|
|
55
|
+
|-----------|----------------------|-----------|-----|
|
|
56
|
+
| Display-only content (tables, charts, reports, status boards) | **No** | **Inline MCP App** | No interaction needed — render inline in the host client |
|
|
57
|
+
| Need user input back (confirmations, selections, form data) | **Yes** | **Browser** | Actions trigger browser transport and return structured results |
|
|
58
|
+
| Rich visual dashboards without interaction | **No** | **Inline MCP App** | Keep the result in-chat when no response is needed |
|
|
59
|
+
| User explicitly asks for browser | **Yes** | **Browser** | Add at least one action to force browser transport |
|
|
60
|
+
| **Running in CLI mode** and need a full visual surface | **Yes** | **Browser** | Inline MCP App rendering is IDE-hosted; add a minimal action so the browser opens |
|
|
61
61
|
|
|
62
|
-
**Rule:
|
|
62
|
+
**Rule: Omit \`actions\` for inline rendering. Add \`actions\` when you need browser transport or interaction back from the user.**
|
|
63
63
|
|
|
64
|
-
> **⚠️ CLI
|
|
64
|
+
> **⚠️ CLI Note:** CLI environments do not host inline MCP App surfaces. If you need a full visual dashboard from CLI, include a minimal \`actions\` array such as an \`Acknowledge\` button so the tool uses browser transport.
|
|
65
65
|
|
|
66
66
|
---
|
|
67
67
|
|
|
68
|
-
## Browser Workflow (IMPORTANT — read carefully)
|
|
68
|
+
## Browser Transport Workflow (IMPORTANT — read carefully)
|
|
69
69
|
|
|
70
|
-
When
|
|
70
|
+
When \`actions\` is present, the tool uses browser transport and opens the system browser. The selected action is returned to the model as structured data.
|
|
71
71
|
|
|
72
72
|
### Steps:
|
|
73
|
-
1. Call \`present\` with \`
|
|
74
|
-
2.
|
|
75
|
-
3.
|
|
73
|
+
1. Call \`present\` with \`actions\` and your \`blocks\`
|
|
74
|
+
2. Let the tool open the browser transport automatically
|
|
75
|
+
3. Wait for the user's action result before continuing
|
|
76
76
|
|
|
77
77
|
\`\`\`
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
result = present({
|
|
79
|
+
schemaVersion: 1,
|
|
80
|
+
title: "Review Dashboard",
|
|
81
|
+
blocks: [...],
|
|
82
|
+
actions: [{ id: "ack", type: "button", label: "Acknowledge" }]
|
|
83
|
+
})
|
|
83
84
|
\`\`\`
|
|
84
85
|
|
|
85
|
-
> **
|
|
86
|
-
|
|
87
|
-
**Note:** The HTTP server auto-closes after 5 minutes. Open the page promptly after receiving the URL.
|
|
86
|
+
> **Important:** Do not document or call a separate \`browser({ action: 'open' })\` step for a \`present\` surface. Browser transport is selected by \`actions\`, not by a \`format\` parameter.
|
|
88
87
|
|
|
89
88
|
---
|
|
90
89
|
|
|
@@ -116,13 +115,13 @@ Actions are interactive buttons/selects. In \`browser\` mode, they render as cli
|
|
|
116
115
|
|
|
117
116
|
## Composition Pattern
|
|
118
117
|
|
|
119
|
-
Compose a full dashboard by combining multiple blocks in the \`
|
|
118
|
+
Compose a full dashboard by combining multiple blocks in the \`blocks\` array:
|
|
120
119
|
|
|
121
120
|
\`\`\`json
|
|
122
121
|
{
|
|
123
|
-
"
|
|
122
|
+
"schemaVersion": 1,
|
|
124
123
|
"title": "Sprint Review",
|
|
125
|
-
"
|
|
124
|
+
"blocks": [
|
|
126
125
|
{ "type": "metrics", "title": "Key Metrics", "value": [...] },
|
|
127
126
|
{ "type": "chart", "title": "Velocity", "value": { "chartType": "area", ... } },
|
|
128
127
|
{ "type": "timeline", "title": "Milestones", "value": { "items": [...] } },
|
|
@@ -151,15 +150,15 @@ The dashboard uses a professional dark theme:
|
|
|
151
150
|
|
|
152
151
|
## Architecture Diagrams
|
|
153
152
|
|
|
154
|
-
> **Behavioral rule:** When asked to present, visualize, or display system architecture, infrastructure, or service topology — **always load the \`c4-architecture\` skill** and use its HTML/SVG
|
|
153
|
+
> **Behavioral rule:** When asked to present, visualize, or display system architecture, infrastructure, or service topology — **always load the \`c4-architecture\` skill** and use its HTML/SVG approach (Method 2 below) for rich visual output via \`present\`. The Mermaid method (Method 1) is acceptable only for quick inline previews or when the user explicitly asks for Mermaid. Default to HTML/SVG for all architecture presentations.
|
|
155
154
|
|
|
156
|
-
The \`present\` tool can render C4-style architecture diagrams in
|
|
155
|
+
The \`present\` tool can render C4-style architecture diagrams in either transport. Omit \`actions\` for inline rendering, or add \`actions\` when you need browser transport. The visual design system is centralized in the \`c4-architecture\` skill's reference file — load that skill for the full type registry, color palette, and template.
|
|
157
156
|
|
|
158
157
|
**Design system source:** \`c4-architecture/references/html-design-system.md\` (single source of truth for all architecture diagram styling)
|
|
159
158
|
|
|
160
159
|
### When to Use (Auto-Trigger)
|
|
161
160
|
|
|
162
|
-
Load the \`c4-architecture\` skill and use HTML/SVG
|
|
161
|
+
Load the \`c4-architecture\` skill and use the HTML/SVG approach when the user:
|
|
163
162
|
- Asks to "show architecture", "present the system design", "visualize infrastructure"
|
|
164
163
|
- Wants to display service topology, deployment layout, or component relationships
|
|
165
164
|
- Requests architecture review output, system overview dashboards, or technical presentations
|
|
@@ -167,19 +166,19 @@ Load the \`c4-architecture\` skill and use HTML/SVG format when the user:
|
|
|
167
166
|
|
|
168
167
|
### Rendering Methods
|
|
169
168
|
|
|
170
|
-
| Method | Block Type |
|
|
171
|
-
|
|
172
|
-
| Mermaid C4 | \`mermaid\` |
|
|
173
|
-
| HTML/SVG | \`markdown\` |
|
|
169
|
+
| Method | Block Type | Transport | When to Use |
|
|
170
|
+
|--------|-----------|-----------|-------------|
|
|
171
|
+
| Mermaid C4 | \`mermaid\` | Inline by default, browser if \`actions\` are present | Quick diagrams, developer-focused, version-controlled |
|
|
172
|
+
| HTML/SVG | \`markdown\` | Inline by default, browser if \`actions\` are present | Rich visual presentations, stakeholder reviews, dark-themed dashboards |
|
|
174
173
|
|
|
175
174
|
### Method 1: Mermaid C4 Diagrams
|
|
176
175
|
|
|
177
176
|
Use a \`mermaid\` content block with standard C4 Mermaid syntax:
|
|
178
177
|
|
|
179
178
|
present({
|
|
180
|
-
|
|
179
|
+
schemaVersion: 1,
|
|
181
180
|
title: "System Architecture",
|
|
182
|
-
|
|
181
|
+
blocks: [
|
|
183
182
|
{
|
|
184
183
|
type: "mermaid",
|
|
185
184
|
title: "C4 Container Diagram",
|
|
@@ -194,32 +193,32 @@ present({
|
|
|
194
193
|
|
|
195
194
|
## Rendering Troubleshooting
|
|
196
195
|
|
|
197
|
-
### Why
|
|
196
|
+
### Why inline MCP App rendering sometimes shows raw text
|
|
198
197
|
|
|
199
|
-
|
|
198
|
+
Without \`actions\`, the surface renders inline through the MCP App host in the client. The chat text fallback is intentionally minimal. When the inline host fails to load, the user may see only the title or raw JSON instead of the rendered dashboard.
|
|
200
199
|
|
|
201
200
|
**Common causes of UIResource rendering failure:**
|
|
202
|
-
1. **MCP Apps not enabled** — The
|
|
201
|
+
1. **MCP Apps not enabled** — The host client must support MCP Apps (e.g., \`chat.mcp.apps.enabled\` in VS Code)
|
|
203
202
|
2. **Companion app build missing** — The \`packages/present\` companion app must be built (\`npm run build\`)
|
|
204
203
|
3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
|
|
205
204
|
4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
|
|
206
205
|
|
|
207
|
-
### When to
|
|
206
|
+
### When to use browser transport instead of inline rendering
|
|
208
207
|
|
|
209
|
-
|
|
210
|
-
- Content has **10+ blocks** or tables with **20+ rows** (large payloads are
|
|
211
|
-
- The output must be **guaranteed visible
|
|
212
|
-
- You need **charts + tables + markdown** in the same view
|
|
213
|
-
- The user reports that
|
|
208
|
+
Add \`actions\` to force browser transport when:
|
|
209
|
+
- Content has **10+ blocks** or tables with **20+ rows** (large payloads are often easier to review in a full page)
|
|
210
|
+
- The output must be **guaranteed visible outside the IDE chat panel**
|
|
211
|
+
- You need **charts + tables + markdown** in the same view and inline rendering is failing
|
|
212
|
+
- The user reports that the inline surface "didn't show anything" or only showed fallback text
|
|
214
213
|
|
|
215
|
-
> **Reliability rule:** If content is complex (5+ blocks of mixed types),
|
|
214
|
+
> **Reliability rule:** If content is complex (5+ blocks of mixed types) or the inline surface is failing, add a minimal \`actions\` array to force browser transport. Otherwise keep \`actions\` absent for inline rendering.
|
|
216
215
|
|
|
217
216
|
### Content formatting tips to avoid rendering issues
|
|
218
217
|
|
|
219
218
|
1. **Use \`table\` block type** instead of markdown tables inside \`markdown\` blocks — \`table\` blocks render natively; markdown pipe-tables may show as raw text in fallback
|
|
220
219
|
2. **Use \`cards\` and \`metrics\`** for summary data instead of embedding it in markdown text
|
|
221
220
|
3. **Keep \`markdown\` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
|
|
222
|
-
4. **Split large content** into multiple smaller \`present\` calls rather than one massive
|
|
221
|
+
4. **Split large content** into multiple smaller \`present\` calls rather than one massive \`blocks\` array
|
|
223
222
|
5. **For charts:** Always use ChartValue format (\`chartType\`, \`data\`, \`xKey\`, \`yKeys\`) — NOT Chart.js format (\`labels\`, \`datasets\`)
|
|
224
223
|
|
|
225
224
|
---
|
|
@@ -244,13 +243,13 @@ Use \`format: "browser"\` instead of \`html\` when:
|
|
|
244
243
|
|
|
245
244
|
For rich visual output, embed the full HTML/SVG diagram in a \`markdown\` block. Compose with \`metrics\` and \`cards\` blocks for a complete dashboard.
|
|
246
245
|
|
|
247
|
-
**
|
|
246
|
+
**This approach works inline by default. Add \`actions\` only when you need browser transport.**
|
|
248
247
|
|
|
249
248
|
\`\`\`js
|
|
250
249
|
present({
|
|
251
|
-
|
|
250
|
+
schemaVersion: 1,
|
|
252
251
|
title: "System Architecture",
|
|
253
|
-
|
|
252
|
+
blocks: [
|
|
254
253
|
{
|
|
255
254
|
type: "metrics",
|
|
256
255
|
title: "Overview",
|
|
@@ -299,7 +298,7 @@ The full type registry with sub-types and icon slots is in \`c4-architecture/ref
|
|
|
299
298
|
|
|
300
299
|
## Best Practices
|
|
301
300
|
|
|
302
|
-
1. **Use
|
|
301
|
+
1. **Use inline rendering by default** for display-only charts, tables, and dashboards. Add \`actions\` when you need browser transport, or when CLI requires a full visual surface.
|
|
303
302
|
2. **Combine block types** — metrics + charts + tables in one page
|
|
304
303
|
3. **Add titles** to every block for clear section headings
|
|
305
304
|
4. **Use actions** when you need user decisions — the tool returns the selection
|
|
@@ -315,49 +314,49 @@ The full type registry with sub-types and icon slots is in \`c4-architecture/ref
|
|
|
315
314
|
|
|
316
315
|
## Rendering Troubleshooting
|
|
317
316
|
|
|
318
|
-
### Why
|
|
317
|
+
### Why inline MCP App rendering sometimes shows raw text
|
|
319
318
|
|
|
320
|
-
|
|
319
|
+
Without \`actions\`, the surface renders inline through the MCP App host in the client. The chat text fallback is intentionally minimal. When the inline host fails to load, the user may see only the title or raw JSON instead of the rendered dashboard.
|
|
321
320
|
|
|
322
321
|
**Common causes of UIResource rendering failure:**
|
|
323
|
-
1. **MCP Apps not enabled** — The
|
|
322
|
+
1. **MCP Apps not enabled** — The host client must support MCP Apps (e.g., \`chat.mcp.apps.enabled\` in VS Code)
|
|
324
323
|
2. **Companion app build missing** — The \`packages/present\` companion app must be built (\`npm run build\`)
|
|
325
324
|
3. **Content too large** — Very large content arrays (20+ blocks or tables with 50+ rows) may cause the companion iframe to fail silently
|
|
326
325
|
4. **Iframe loading error** — Network issues, CSP restrictions, or extension conflicts can prevent the iframe from loading
|
|
327
326
|
|
|
328
|
-
### When to
|
|
327
|
+
### When to use browser transport instead of inline rendering
|
|
329
328
|
|
|
330
|
-
|
|
331
|
-
- Content has **10+ blocks** or tables with **20+ rows** (large payloads are
|
|
332
|
-
- The output must be **guaranteed visible
|
|
333
|
-
- You need **charts + tables + markdown** in the same view
|
|
334
|
-
- The user reports that
|
|
329
|
+
Add \`actions\` to force browser transport when:
|
|
330
|
+
- Content has **10+ blocks** or tables with **20+ rows** (large payloads are often easier to review in a full page)
|
|
331
|
+
- The output must be **guaranteed visible outside the IDE chat panel**
|
|
332
|
+
- You need **charts + tables + markdown** in the same view and inline rendering is failing
|
|
333
|
+
- The user reports that the inline surface "didn't show anything" or only showed fallback text
|
|
335
334
|
|
|
336
|
-
> **Reliability rule:** If content is complex (5+ blocks of mixed types),
|
|
335
|
+
> **Reliability rule:** If content is complex (5+ blocks of mixed types) or the inline surface is failing, add a minimal \`actions\` array to force browser transport. Otherwise keep \`actions\` absent for inline rendering.
|
|
337
336
|
|
|
338
337
|
### Content formatting tips to avoid rendering issues
|
|
339
338
|
|
|
340
339
|
1. **Use \`table\` block type** instead of markdown tables inside \`markdown\` blocks — \`table\` blocks render natively; markdown pipe-tables may show as raw text in fallback
|
|
341
340
|
2. **Use \`cards\` and \`metrics\`** for summary data instead of embedding it in markdown text
|
|
342
341
|
3. **Keep \`markdown\` blocks for narrative text only** — don't embed HTML, tables, or complex formatting
|
|
343
|
-
4. **Split large content** into multiple smaller \`present\` calls rather than one massive
|
|
342
|
+
4. **Split large content** into multiple smaller \`present\` calls rather than one massive \`blocks\` array
|
|
344
343
|
5. **For charts:** Always use ChartValue format (\`chartType\`, \`data\`, \`xKey\`, \`yKeys\`) — NOT Chart.js format (\`labels\`, \`datasets\`)
|
|
345
344
|
|
|
346
345
|
---
|
|
347
346
|
|
|
348
|
-
## MCP Apps Templates
|
|
347
|
+
## MCP Apps Templates
|
|
349
348
|
|
|
350
|
-
When
|
|
349
|
+
When the host client supports MCP Apps, the \`present\` tool can render **interactive widgets directly in the chat panel** using the \`template\` parameter. These are distinct from block-based surfaces rendered inline or in the browser.
|
|
351
350
|
|
|
352
|
-
**Key difference:** Templates use \`template\` + object \`
|
|
351
|
+
**Key difference:** Templates use \`template\` + object \`data\` (not a \`blocks\` array). No \`format\` parameter exists. Templates render inline in the host client unless a separate \`actions\` array is added at the top level.
|
|
353
352
|
|
|
354
353
|
### When to use MCP Apps vs Browser Dashboard
|
|
355
354
|
|
|
356
355
|
| Use Case | Mode | Why |
|
|
357
356
|
|----------|------|-----|
|
|
358
357
|
| Quick user input (pick items, reorder, fill form) | **MCP App template** | Inline in chat, no context switch |
|
|
359
|
-
| Rich multi-section dashboard with charts | **
|
|
360
|
-
| Simple confirmation or selection | **Actions**
|
|
358
|
+
| Rich multi-section dashboard with charts | **Browser transport** | Add \`actions\` for a full page layout |
|
|
359
|
+
| Simple confirmation or selection | **Actions-enabled surface** | Adding \`actions\` switches transport to browser |
|
|
361
360
|
|
|
362
361
|
### Template: \`list-sort\`
|
|
363
362
|
|
|
@@ -367,7 +366,7 @@ Drag-and-drop reorderable list. Use for priority ordering, task sequencing, or r
|
|
|
367
366
|
{
|
|
368
367
|
"template": "list-sort",
|
|
369
368
|
"title": "Priority Order",
|
|
370
|
-
"
|
|
369
|
+
"data": {
|
|
371
370
|
"items": [
|
|
372
371
|
{ "id": "task-1", "label": "Fix authentication bug" },
|
|
373
372
|
{ "id": "task-2", "label": "Add search feature" },
|
|
@@ -388,7 +387,7 @@ Filterable, sortable table with optional summary stat cards. Use for structured
|
|
|
388
387
|
{
|
|
389
388
|
"template": "data-table",
|
|
390
389
|
"title": "File Changes",
|
|
391
|
-
"
|
|
390
|
+
"data": {
|
|
392
391
|
"columns": [
|
|
393
392
|
{ "key": "file", "label": "File" },
|
|
394
393
|
{ "key": "change", "label": "Change" },
|
|
@@ -417,7 +416,7 @@ Multi-select with categories and tag-based search. Use for component selection,
|
|
|
417
416
|
{
|
|
418
417
|
"template": "picker",
|
|
419
418
|
"title": "Select Modules",
|
|
420
|
-
"
|
|
419
|
+
"data": {
|
|
421
420
|
"categories": [
|
|
422
421
|
{ "id": "core", "label": "Core" },
|
|
423
422
|
{ "id": "plugins", "label": "Plugins" }
|
|
@@ -442,7 +441,7 @@ Hierarchical zoomable visualization. Use for codebase structure, performance pro
|
|
|
442
441
|
{
|
|
443
442
|
"template": "flame-graph",
|
|
444
443
|
"title": "Module Hierarchy",
|
|
445
|
-
"
|
|
444
|
+
"data": {
|
|
446
445
|
"profile": {
|
|
447
446
|
"name": "root",
|
|
448
447
|
"total": 100,
|
|
@@ -473,7 +472,7 @@ Input fields with text inputs, selects, and checkboxes. Use for configuration, p
|
|
|
473
472
|
{
|
|
474
473
|
"template": "form",
|
|
475
474
|
"title": "Project Configuration",
|
|
476
|
-
"
|
|
475
|
+
"data": {
|
|
477
476
|
"fields": [
|
|
478
477
|
{ "name": "projectName", "label": "Project Name", "type": "text", "value": "my-app" },
|
|
479
478
|
{ "name": "framework", "label": "Framework", "type": "select", "options": ["React", "Vue", "Svelte"], "value": "React" },
|