Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add yonatangross/orchestkit --skill mcp-visual-outputgit clone --depth 1 https://github.com/yonatangross/orchestkitWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yonatangross/orchestkit/mcp-visual-output)<a href="https://agentmods.dev/skills/yonatangross/orchestkit/mcp-visual-output"><img src="https://agentmods.dev/badge/skills/yonatangross/orchestkit/mcp-visual-output.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00088 | $0.02628 |
| Opus 5 | $0.00044 | $0.01314 |
| Sonnet 5 | $0.00018 | $0.00526 |
| Haiku 4.5 | $0.00009 | $0.00263 |
Grade A, and why
mcp-visual-output scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 266 lines — stays where its author put it; the contents beside it link to each section on GitHub.
MCP Visual Output
Upgrade plain MCP tool responses to interactive dashboards rendered inside AI conversations. Built on @json-render/mcp, which bridges the json-render spec system with MCP's tool/resource model -- the AI generates a typed JSON spec, and a sandboxed iframe renders it as an interactive UI.
Building an MCP server from scratch? Use
ork:mcp-patternsfor server setup, transport, and security. This skill focuses on the visual output layer after your server is running.Need the full component catalog? See
ork:json-render-catalogfor all available components, props, and composition patterns.
Decision Tree -- Which File to Read
What are you doing?
|
+-- Setting up visual output for the first time
| +-- New MCP server -----------> rules/mcp-app-setup.md
| +-- Existing MCP server ------> rules/mcp-app-setup.md (registerJsonRenderTool section)
|
+-- Configuring security / sandbox
| +-- CSP declarations ----------> rules/sandbox-csp.md
| +-- Iframe permissions --------> rules/sandbox-csp.md
|
+-- Rendering strategy
| +-- Progressive streaming -----> rules/streaming-output.md
| +-- Dashboard layouts ----------> rules/dashboard-patterns.md
|
+-- API reference
| +-- Server-side API -----------> references/mcp-integration.md
| +-- Component recipes ----------> references/component-recipes.md
Quick Reference
| Category | Rule | Impact | Key Pattern |
|---|---|---|---|
| Setup | mcp-app-setup.md |
HIGH | createMcpApp() and registerJsonRenderTool() |
| Security | sandbox-csp.md |
HIGH | CSP declarations, iframe sandboxing |
| Rendering | streaming-output.md |
MEDIUM | Progressive rendering via JSON Patch |
| Patterns | dashboard-patterns.md |
MEDIUM | Stat grids, status badges, data tables |
Total: 4 rules across 3 categories
How It Works
- Define a catalog -- typed component schemas using
defineCatalog()+ Zod - Register with MCP --
createMcpApp()for new servers orregisterJsonRenderTool()for existing ones - AI generates specs -- the model produces a JSON spec conforming to the catalog
- Iframe renders it -- a bundled React app inside a sandboxed iframe renders the spec with
useJsonRenderApp()+<Renderer />
What ships with it
10 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/component-recipes.md 7.2 KB
- references/mcp-integration.md 4.9 KB
- references/upstream-mcp.md 4.6 KB
- rules/_sections.md 964 B
- rules/_template.md 338 B
- rules/dashboard-patterns.md 4.8 KB
- rules/mcp-app-setup.md 4.2 KB
- rules/sandbox-csp.md 3.5 KB
- rules/streaming-output.md 3.6 KB
- test-cases.json 3.7 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 4d ago First seen · 266 lines · 88 tokens per session scan A 434ec43c5269
mcp-visual-output is a skill published in the GitHub repository yonatangross/orchestkit (231 stars, last pushed today), licensed MIT. It adds 88 tokens to every session and 2,628 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
styling
PyWry provides CSS variables that adapt to dark/light themes. Use these instead of hardcoded colors!
component-patterns
World-class component visual patterns — cards, tables, forms, navigation, dashboards, data visualization, empty states, and feedback components with branded asymmetric corners.
ux-interaction-patterns
UX laws as code — micro-interactions, animation choreography, skeleton UIs, optimistic UI, and performance UX patterns for world-class user experience.
visual-design-system
World-class visual design system standards — OKLCH color science, fluid typography, elevation hierarchy, branded asymmetric corners, and dark mode implementation.
factsheet-design
Print design system for systemprompt.io PDF factsheets and one-pagers. Light branded containers (never dark glassmorphism), print token table, sp-card asymmetric corners in points, full-width SVG diagram rules, WeasyPrint constraints, and the two-page budget discipline. Load before creating or editing any factsheet…
ux-ui-guide
Entry point for ux-ui-excellence — routes to the right sub-skill for your task.