demo(mcp): render agent-authored dashboards with json-render - #356
Draft
dsklyar wants to merge 19 commits into
Draft
demo(mcp): render agent-authored dashboards with json-render#356dsklyar wants to merge 19 commits into
dsklyar wants to merge 19 commits into
Conversation
Launch the MCP Inspector against a built example server, with the sandbox document repaired and dev views enabled so a view rebuild is picked up by re-reading the resource rather than restarting the server.
Generate the component and the ui:// resource module, and add the package-level view wiring when a package has none yet, so adding a view is two files to fill in rather than seven to remember.
The generator wrote a view that could not be reached without hand-writing a tool, and left the install that view build needs as an instruction. Skipping it surfaced as a resolver error naming a synthesized file, so the view build now checks its dependencies first and says what to run. The generated tool stays unregistered: adding it to the package's tool list is where its name becomes public API, which is a person's call.
Deleting a view leaves its directory behind, because git cannot track an empty one. Discovery then refused to run at all, which broke re-scaffolding the view it belonged to. Files present but no *View.tsx still fails: that is a renamed component, and skipping it is how a view silently stops existing.
Adds `ui_render`, an MCP App tool that paints a dashboard from a spec the agent composes after calling domain tools. The catalog (Heading, MetricCard, ProgressBar, Grid) is described in the tool's input schema, so the host's model authors the layout rather than us shipping a fixed view per tool. Calling again replaces the held spec, which gives a progressive reveal without patch machinery. Ships `ui_guide` alongside it, and a matching rule in the umbrella server's initialize instructions. Without them a model answers "show me a dashboard" by writing its own HTML or matplotlib artifact — minutes of work, off-brand, and not interactive — instead of calling `ui_render`, which renders the same thing from the design system in about a second. The guide is authored as markdown and inlined at build time by a new `.md` text loader, mirroring how prebuilt views are inlined as `.html`. Card surfaces in the shared theme are new too. Status colors resolve to `--text-*-bold`, which is right for type on white but paints as mud when used as a bar fill, and the host-adaptive `content` family turns white on a dark host — unreadable against a light dashboard panel. Cards now sit on fixed light surfaces with a separate `fill` family for bars and swatches. The package lives under `dev/` and is private: this is an MVP for evaluating json-render in MCP, not a published surface.
The vitest text-asset plugin hand-mirrored tsdown's `loader` list, so adding `.md` to one left the other parsing a guide as JavaScript. Both now share a single exported extension list. Counts the two UI tools in the umbrella expectations, which also puts them under the annotation checks every other tool already gets.
@transcend-io/airgap.js-types
@transcend-io/cli
@transcend-io/design-tokens
@transcend-io/internationalization
@transcend-io/privacy-types
@transcend-io/sdk
@transcend-io/type-utils
@transcend-io/utils
@transcend-io/mcp
@transcend-io/mcp-server-admin
@transcend-io/mcp-server-assessment
@transcend-io/mcp-server-base
@transcend-io/mcp-server-consent
@transcend-io/mcp-server-discovery
@transcend-io/mcp-server-docs
@transcend-io/mcp-server-dsr
@transcend-io/mcp-server-inventory
@transcend-io/mcp-server-preferences
@transcend-io/mcp-server-workflows
commit: |
dsklyar
changed the title
dsklyar
marked this pull request as draft
August 4, 2026 16:59
It was a scratch tool for iterating on card styling without restarting an MCP host. Nothing imports it, and its sample spec was cast past the catalog types while its wrapper markup duplicated JsonRenderView's, so both would have drifted into rendering something the tool would reject.
dsklyar
force-pushed
the
danielsklyar/zel-8113-new-view-scaffolder
branch
from
August 4, 2026 20:24
dc1825d to
00b56b5
Compare
Track removing the Inspector packaging workaround against the cleanup ticket under the MCP Apps epic, so it is findable once upstream ships the file.
dsklyar
force-pushed
the
danielsklyar/zel-8113-new-view-scaffolder
branch
3 times, most recently
from
August 7, 2026 22:50
4aac7cf to
d07c4a6
Compare
Base automatically changed from
danielsklyar/zel-8113-new-view-scaffolder
to
main
August 8, 2026 06:05
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Evaluates json-render as a generative UI layer for MCP: the agent authors a UI spec, and an MCP App view renders it with Transcend's design system.
Stacked on #351.
What this adds
ui_renderpaints a dashboard from a spec the agent composes after calling domain tools. The catalog —Heading,MetricCard,ProgressBar,Grid— is described in the tool's input schema, so the host's model authors the layout instead of us shipping a fixed view per tool. Calling again replaces the held spec, which gives a progressive reveal without patch machinery.ui_guideserves a markdown guide on building those dashboards, and the umbrella server'sinitializeinstructions route dashboard requests through it. This is the load-bearing part: without it, a model answers "show me a dashboard" by writing its own HTML or matplotlib artifact rather than callingui_render. See the demos below for the difference.Card surfaces in the shared theme. Status colors resolve to
--text-*-bold, which is correct for type on white but paints as mud when used as a bar fill, and the host-adaptivecontentfamily turns white on a dark host — unreadable against a light dashboard panel. Cards now sit on fixed light surfaces, with a separatefillfamily for bars and swatches.The package lives under
dev/and is private. This is an MVP for evaluating the approach, not a published surface.Demos
1. Natural prompt, routed by the MCP guide
Under 1 minute.
Screen.Recording.2026-08-04.at.09.56.33.mov
2. Claude native tools alongside MCP tools
Under 3 minutes.
Screen.Recording.2026-08-04.at.09.58.15.mov
Known limitation
Claude's bundled
datavizskill can still capture the plan before MCP routing applies, and it can't be disabled when an org provisions it. Skills are selected during planning, ahead of individual tool descriptions, so an MCP server'sinstructionsfield cannot outrank one. Closing that gap means shipping a Claude skill of our own — the approach Datadog takes by bundling skills with its MCP server — which is out of scope here.Notes for review
packages/mcp/mcpnow depends on a privatedev/package. Fine while this is an evaluation; it would have to move underpackages/before the umbrella is published with it..mdtext loader so the guide is authored as real markdown and inlined at build time, mirroring how prebuilt views are inlined as.html. The vitest plugin hand-mirrored that loader list, so both now share one exported constant.Test plan
ui_renderrenders in Claude Desktop and is legible in dark modeui_guideis called beforeui_renderon the demo 1 promptMade with Cursor