Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/pomerium/mcp-app-typescript-templatenpx agentmods add skills/pomerium/mcp-app-typescript-template/add-widgetWrote 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/pomerium/mcp-app-typescript-template/add-widget)<a href="https://agentmods.dev/skills/pomerium/mcp-app-typescript-template/add-widget"><img src="https://agentmods.dev/badge/skills/pomerium/mcp-app-typescript-template/add-widget.svg" alt="Measured on agentmods" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Agent Snooping · line 14 Skill enumerates or reads other installed skills. Access to other skills' SKILL.md files or the skills directory reveals prompt instructions, capabilities, and secrets that should be invisible to peer skills.Fix: Remove all code or instructions that list or read other skills' files or directories. Skills should operate independently; cross-skill access is a privilege escalation.
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.00056 | $0.01348 |
| Opus 5 | $0.00028 | $0.00674 |
| Sonnet 5 | $0.00011 | $0.00270 |
| Haiku 4.5 | $0.00006 | $0.00135 |
Grade A, and why
add-widget 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 7d 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 — 160 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Add a Widget to This Template
This template has its own widget build system that differs from the generic ext-apps examples. Before reading the steps below, fetch the upstream create-mcp-app skill for core SDK patterns, then apply those patterns using the template-specific conventions described here:
https://raw.githubusercontent.com/modelcontextprotocol/ext-apps/main/plugins/mcp-apps/skills/create-mcp-app/SKILL.md
Use WebFetch to retrieve that skill now. The steps below describe what is different in this template — follow both together.
How This Template Differs from the Generic SDK Examples
| Generic ext-apps approach | This template |
|---|---|
vite-plugin-singlefile → single HTML file |
Custom vite-plugin-widgets → auto-discovery, content hashing, parallel builds |
One vite.config.ts per project |
widgets/vite.config.ts handles all widgets automatically |
tsx server.ts to run |
npm run dev starts server + widget dev server together |
Manual resource registration with fs.readFile |
readWidgetHtml() in server/src/server.ts handles dev/prod/CDN automatically |
| No Storybook | Storybook configured — add a .stories.tsx for your component |
Never edit files in assets/ directly — they are generated artifacts.
Step 1: Add the Zod Schema and Types
Edit server/src/types.ts. Follow the existing EchoToolInput / EchoToolOutput pattern:
// Input schema
export const MyToolInputSchema = z.object({
param: z.string().describe('Description of the param'),
});
export type MyToolInput = z.infer<typeof MyToolInputSchema>;
// Structured output (passed to the widget via structuredContent)
export interface MyToolOutput {
result: string;
timestamp: string;
[key: string]: unknown;
}
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.
- 7d ago First seen · 160 lines · 56 tokens per session scan A 644c7b0dcb39
add-widget is a skill published in the GitHub repository pomerium/mcp-app-typescript-template (20 stars, last pushed 2d ago), licensed Apache-2.0. It adds 56 tokens to every session and 1,348 once invoked, about $0.0003 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-08-30.
Other skills, from other repositories
storybook
Storybook is the fidelity oracle, not the runtime. The converter bundles the package's compiled dist/ into dsbundle.js - the same bundle the claude.ai/design agent builds with - and generates each preview by compiling the story source module itself (hooks, fixtures, local helpers - the whole closure comes along), with…
design-sync
Push a React design system to claude.ai/design. This runs a converter that bundles the real component code (from Storybook or a bare package) and uploads it. Use when the user runs /design-sync or says "sync my design system to Claude Design".
web-artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
nitrostack-ui-widgets
Best practices for linking tools to interactive frontend widgets using @Widget and @nitrostack/widgets SDK (including state sync, tool calling, display modes, media queries, and chat actions).
21st-ui
Find, install, and generate UI with 21st.dev. Use when the user asks for a UI component (pricing table, hero, navbar, dashboard, form, etc.), wants design inspiration, needs a brand logo as an SVG component, or wants to generate new UI from a prompt.
webmcp-add-tool
Scaffolds a new WebMCP tool component using useMcpTool with Zod schema, handler, annotations, and wires it into the WebMCPProvider tree. Use when the user wants to expose functionality as an MCP tool, make something callable by AI, add a new tool, or create an AI-accessible action.