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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" 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.01685 |
| Opus 5.5 | $0.00022 | $0.00674 |
| Sonnet 5.5 | $0.00011 | $0.00337 |
| Haiku 4.5 | $0.00006 | $0.00169 |
Grade A, and why
add-widget scanned grade A with 1 finding 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 1mo 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.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
- **Server side**: add a test in `server/tests/` for the tool itself. This is the `create-mcp-tool` skill's "Step 3: Write Tests" — follow it (`server/tests/server.test.ts`'s pattern of exercising `createHandler().fetch( How it starts
The opening of the file, as written. The whole thing — 168 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.
- 1mo ago Changed · +8 lines 980a97bfdcfc
- 1mo 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 (21 stars, last pushed yesterday), licensed Apache-2.0. It adds 56 tokens to every session and 1,685 once invoked, about $0.0002 per session on Opus 5.5. A static security scan graded it A with 1 finding (makes network calls). 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".
payload
Use when working with Payload projects (payload.config.ts, collections, fields, hooks, access control, Payload API). Use when debugging validation errors, security issues, relationship queries, transactions, or hook behavior.
purchasing
Create approved purchase orders with the create-purchase-order tool.
chatgpt-app-builder
Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features.
refunds
Check refund eligibility and use the refund-order tool safely.