build-mcp-app

build-mcp-app is a skill for Claude Code from nota-america/forgecat-agent-profiles. It costs 111 tokens per session (4,028 once invoked), scanned A, original, Apache-2.0.

A guide for adding interactive widgets to an MCP server, so an app can show forms, pickers, dashboards, previews, or confirmation dialogs inside chat.

In plain words
What is it for?
Building MCP apps with structured forms, selectable tables, visual outputs, confirmations, and progress displays.
Why use it?
It helps decide when a visual control is more useful than returning plain text or JSON.

Skill for Claude Code

Written for Claude Code: installed under .claude/.

Good fit Building MCP apps with structured forms, selectable tables, visual outputs, confirmations, and progress displays.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/nota-america/forgecat-agent-profiles/build-mcp-app
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.

Any agent
npx skills add nota-america/forgecat-agent-profiles --skill build-mcp-app
Clone the repo
git clone --depth 1 https://github.com/nota-america/forgecat-agent-profiles

Made for: Claude Code.

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/nota-america/forgecat-agent-profiles/build-mcp-app/github.svg)](https://agentmods.dev/skills/nota-america/forgecat-agent-profiles/build-mcp-app)
Your own site
<a href="https://agentmods.dev/skills/nota-america/forgecat-agent-profiles/build-mcp-app"><img src="https://agentmods.dev/badge/skills/nota-america/forgecat-agent-profiles/build-mcp-app/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.

agentmods 80×15 button for build-mcp-app

Your own site · 80×15
<a href="https://agentmods.dev/skills/nota-america/forgecat-agent-profiles/build-mcp-app"><img src="https://agentmods.dev/badge/skills/nota-america/forgecat-agent-profiles/build-mcp-app.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 111 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 4,028 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
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.1 $0.00111 $0.04028
Opus 5 $0.00056 $0.02014
Sonnet 5 $0.00022 $0.00806
Haiku 4.5 $0.00011 $0.00403

Measured 7d ago against content hash a1628cfee9fe, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, 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 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.

Origin

Copies of this mod

1 near-identical copy found in the catalogue:

profiles/anthropics/claude-plugins-official/anthropics_claude-plugins-official_mcp-server-dev/for-claude/.claude/skills/build-mcp-app/SKILL.md · 359 lines

How it starts

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

Build an MCP App (Interactive UI Widgets)

An MCP app is a standard MCP server that also serves UI resources — interactive components rendered inline in the chat surface. Build once, runs in Claude and ChatGPT and any other host that implements the apps surface.

The UI layer is additive. Under the hood it's still tools, resources, and the same wire protocol. If you haven't built a plain MCP server before, the build-mcp-server skill covers the base layer. This skill adds widgets on top.


When a widget beats plain text

Don't add UI for its own sake — most tools are fine returning text or JSON. Add a widget when one of these is true:

Signal Widget type
Tool needs structured input Claude can't reliably infer Form
User must pick from a list Claude can't rank (files, contacts, records) Picker / table
Destructive or billable action needs explicit confirmation Confirm dialog
Output is spatial or visual (charts, maps, diffs, previews) Display widget
Long-running job the user wants to watch Progress / live status

If none apply, skip the widget. Text is faster to build and faster for the user.


Widgets vs Elicitation — route correctly

Before building a widget, check if elicitation covers it. Elicitation is spec-native, zero UI code, works in any compliant host.

Need Elicitation Widget
Confirm yes/no overkill
Pick from short enum overkill
Fill a flat form (name, email, date) overkill
Pick from a large/searchable list ❌ (no scroll/search)
Visual preview before choosing
Chart / map / diff view
Live-updating progress

If elicitation covers it, use it. See ../build-mcp-server/references/elicitation.md.


Architecture: two deployment shapes

Remote MCP app (most common)

Hosted streamable-HTTP server. Widget templates are served as resources; tool results reference them. The host fetches the resource, renders it in an iframe sandbox, and brokers messages between the widget and Claude.

Read the full file on GitHub · 359 lines

Files

What ships with it

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

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. 7d ago First seen · 359 lines · 111 tokens per session scan A a1628cfee9fe

Subscribe to this mod's changes

build-mcp-app is a skill published in the GitHub repository nota-america/forgecat-agent-profiles (66 stars, last pushed yesterday), licensed Apache-2.0. It adds 111 tokens to every session and 4,028 once invoked, about $0.0006 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.

Related

Other skills, from other repositories

visual-ralph

Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ralph with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.

Yeachan-Heo/oh-my-codex · 50 tokens

create-site

Creates a new Power Pages code site (SPA) using React, Angular, Vue, or Astro. Guides through the full process from initial concept to deployed site: requirements discovery, scaffolding, component planning, design, implementation, validation, and deployment. Use when the user wants to create, build, or scaffold a new…

microsoft/power-platform-skills · 73 tokens

prototype-web

A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.

nexu-io/html-anything · 24 tokens

cwv-optimizer

Diagnose and fix Core Web Vitals issues on AEM Edge Delivery Services pages. Goes deeper than generic CWV advice by understanding EDS-specific performance patterns including the 100KB LCP budget, E-L-D loading phases, block rendering behavior, and third-party script impact. Produces specific fixes for LCP, CLS, and…

adobe/skills · 112 tokens

vite

Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building libraries/SSR apps with Vite.

antfu/skills · 49 tokens

threejs-raymarched-space-effects

Build raymarched space phenomena in Three.js. Use for black-hole lensing, accretion disks, wormhole throat transits, curved-ray and null-geodesic integration, lensed celestial spheres, procedural star fields and galactic skies, relativistic-looking distortion, bounded volumetric structures, and GPU effects that need…

scottstts/Threejs-Awesome-Graphics-Agent-Skills · 77 tokens