Skip to content
Get packs

Build MCP App Widgets

Teaches the agent to add interactive inline UI widgets to an MCP server.

Source Download skill
Repository
anthropics/claude-plugins-official
Stars
45,770
Licence
Apache-2.0
Files
7 files

What it does

This skill guides an AI agent through building an MCP app: a normal MCP server that also serves small interactive UI components (forms, pickers, dashboards, confirmation dialogs) that appear inside the chat. It explains when a widget is worth building versus plain text or the built-in elicitation feature, how tools and UI resources connect, and how the widget code talks to the host. The skill itself is instructions and reference docs; it does not add any runtime behaviour on its own.

Great for

  • Developers already building or planning an MCP server who want richer in-chat interfaces
  • Teams deciding whether a tool needs a widget or can use simple elicitation or text output
  • Developers preparing an MCP app for directory submission

Skip it if

  • People who have never built an MCP server; the skill says to start with the build-mcp-server skill first
  • Simple tools that return text or JSON, where a widget adds complexity without benefit
  • Local-disk or desktop-control widgets without understanding the MCPB packaging and security implications

Try asking

  • “Build an MCP app that shows a contact picker widget when the user asks to find a contact”
  • “Add a confirmation dialog widget before my server performs a billable or destructive action”
  • “Turn my existing MCP server's dashboard tool into an interactive chart widget”
  • “Check my MCP app against the directory submission checklist before publishing”
Step-by-step guide: how to use Build MCP App WidgetsInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the Apache-2.0 licence and an attribution note.

    build-mcp-app.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip build-mcp-app.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip build-mcp-app.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start with the widget-decision table and use elicitation where it covers the need before writing any UI code
  • Test in claude.ai through a custom connector, since that exercises the real iframe sandbox
  • Declare external domains explicitly in CSP settings, because the default is block-all

What's inside

  • references/abuse-protection.md
  • references/apps-sdk-messages.md
  • references/directory-checklist.md
  • references/iframe-sandbox.md
  • references/payload-budgeting.md
  • references/widget-templates.md
  • SKILL.md

Redistributed unmodified from anthropics/claude-plugins-official under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.