build-mcp-app

build-mcp-app is a skill for Claude Code, Codex, Cursor from webhook-co/webhook. It costs 56 tokens per session (640 once invoked), scanned A, original, Apache-2.0.

A toolkit for building interactive widgets that an MCP host displays in a sandboxed browser frame. Widgets can include forms, pickers, confirmation dialogs, charts, and live status views.

In plain words
What is it for?
Use it to add visual interaction to MCP tools, such as endpoint selection, delete confirmations, delivery monitoring, charts, or status displays.
Why use it?
It helps when a text conversation is awkward for choosing options, confirming an irreversible action, or watching changing information. It also requires human visual testing for user-facing interface changes.

Skill for Claude CodeCodexCursor

Install

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.

agentmods
npx agentmods add skills/webhook-co/webhook/build-mcp-app
Any agent
npx skills add webhook-co/webhook --skill build-mcp-app
Clone the repo
git clone --depth 1 https://github.com/webhook-co/webhook

Made for: Claude Code, Codex, Cursor.

Wrote 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.

agentmods badge for build-mcp-app

README.md
[![agentmods](https://agentmods.dev/badge/skills/webhook-co/webhook/build-mcp-app.svg)](https://agentmods.dev/skills/webhook-co/webhook/build-mcp-app)
Your own site
<a href="https://agentmods.dev/skills/webhook-co/webhook/build-mcp-app"><img src="https://agentmods.dev/badge/skills/webhook-co/webhook/build-mcp-app.svg" alt="Measured on agentmods" height="20"></a>
Per session 56 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 640 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

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.

ModelPer sessionOnce invoked
Fable 5 $0.00056 $0.00640
Opus 5 $0.00028 $0.00320
Sonnet 5 $0.00011 $0.00128
Haiku 4.5 $0.00006 $0.00064

Measured 3d ago against content hash a8a5ccc59f2a, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

build-mcp-app 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 3d 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.

.cursor/skills/build-mcp-app/SKILL.md · 53 lines

How it starts

The opening of the file, as written. The whole thing — 53 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Build MCP app

An MCP app is an interactive widget — a form, picker, confirmation dialog, chart, or live status view — that an MCP host renders in a sandboxed iframe. Use it only when a widget genuinely beats a text exchange (e.g. confirming a destructive replay, picking an endpoint, watching delivery status live). Most tools should stay text-first; reach for a UI when interaction or at-a-glance state is the point.

Human-UI-testing hard stop (read first)

Anything an MCP app renders is user-facing UI. The repo's non-negotiable applies in full: when a change needs human visual/UX verification you can't do yourself — layout, rendering, interaction behavior, or any user-facing copy — STOP and explicitly flag it for human testing. Do not mark the widget done, approve it, or merge it until a human has eyeballed it. Say plainly what to check (states, edge cases, copy).

When a widget is worth it

  • Confirmation dialog for irreversible or cross-tenant-sensitive actions (replay, delete) — make the consequence explicit before the user commits.
  • Picker / form when free-text would be error-prone (choosing an endpoint, a time window, an event).
  • Chart / live status when trends or real-time delivery state are easier to read visually than as text.

If a plain text response answers the question, don't build a widget.

Build guidance

  • Treat the iframe as untrusted and sandboxed: no ambient credentials inside the widget; pass only the minimum data needed, and keep all privileged work behind the MCP server (validate → delegate → respond), never in the widget.
  • Never render raw webhook payloads or PII/PHI in a widget; reference events by id and show redacted summaries.
  • Reuse shared/ types for anything the widget exchanges with the server — don't invent UI-only shapes.
  • Follow the design-ux conventions (accessibility, design tokens) and the writing-voice rule for all labels and copy: sentence case, lowercase webhook.co / wbhk.my, precise and quietly opinionated.

Read the full file on GitHub · 53 lines

Changes

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.

  1. 3d ago First seen · 53 lines · 56 tokens per session scan A a8a5ccc59f2a

Subscribe to this mod's changes

build-mcp-app is a skill published in the GitHub repository webhook-co/webhook (0 stars, last pushed 2d ago), licensed Apache-2.0. It adds 56 tokens to every session and 640 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-31.

Related

Other skills, from other repositories

add-provider

Add a new storage or service provider to the core package. Use when implementing a new backend for StorageService (e.g., a new database) or a new service provider (e.g., a new LLM backend).

cyanheads/mcp-ts-core · 47 tokens

add-export

Add a new subpath export to the @cyanheads/mcp-ts-core package. Use when creating a new public API surface that consumers import from a dedicated subpath (e.g., @cyanheads/mcp-ts-core/newutil).

cyanheads/mcp-ts-core · 50 tokens

flaim-fantasy

Use when a user wants analysis of a Flaim-connected ESPN, Yahoo, or Sleeper fantasy league, or help with Flaim setup, capabilities, or permissions. This includes rosters, standings, matchups, available players, transactions, historical seasons, and lineup, waiver, or trade advice. Do not use for generic sports news…

jdguggs10/flaim · 100 tokens

mcp-migration

Diagnose and carry out the migration of an MCP server to the 2026-07-28 specification — the revision that made the transport stateless, formalized OAuth 2.1, and deprecated the logging, sampling, and roots capabilities. Use this skill whenever someone mentions migrating, upgrading, or checking an MCP server against…

AlpayC/mcp-migration-check · 162 tokens

activity-brief

Give a time-bucketed league activity briefing on recent fantasy moves, including who moved who, when, and why. Use when the user explicitly wants a transaction roundup or invokes /activity-brief.

jdguggs10/flaim · 44 tokens

analyze-matchup

Analyze the current fantasy matchup with scores, remaining players or games, and a fact-based forecast. Use when the user explicitly wants a matchup-state breakdown or invokes /analyze-matchup.

jdguggs10/flaim · 42 tokens