explainx.ai
workshops ↗
Backend

add-app-to-server

Enrich an existing MCP server's tools with interactive UIs using the MCP Apps SDK (@modelcontextprotocol/ext-apps).

modelcontextprotocol/ext-appsUpdated Apr 8, 2026

Works with

Claude CodeCursorClineWindsurfCodexGooseGitHub CopilotZed

0

total installs

0

this week

2.0K

GitHub stars

0

upvotes

Install Skill

Run in your terminal

$npx skills add https://github.com/modelcontextprotocol/ext-apps --skill add-app-to-server

0

installs

0

this week

2.0K

stars

View on GitHub
addappserver
0 commentsJoin discussion →

Installation Guide

How to use add-app-to-server on Cursor

AI-first code editor with Composer

1

Prerequisites

Before installing skills in Cursor, ensure your development environment meets these requirements:

  • ›Cursor installed and configured on your machine
  • ›Node.js 16+ with npm — verify with node --version
  • ›Active project directory where you want to add add-app-to-server
2

Run the install command

Execute the skills CLI command in your project's root directory to begin installation:

$npx skills add https://github.com/modelcontextprotocol/ext-apps --skill add-app-to-server

Fetches add-app-to-server from modelcontextprotocol/ext-apps and configures it for Cursor.

3

Select Cursor when prompted

The CLI shows a list of agents. Use arrow keys and space to select Cursor:

◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4

Verify installation

Confirm successful installation by checking the skill directory location:

.cursor/skills/add-app-to-server

Restart Cursor to activate add-app-to-server. Access via /add-app-to-server in your agent's command palette.

⚠

Security Notice

We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.

Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.

›View source on GitHub›Skills CLI docs›About Cursor›What are agent skills?

Documentation

Add UI to MCP Server

Enrich an existing MCP server's tools with interactive UIs using the MCP Apps SDK (@modelcontextprotocol/ext-apps).

How It Works

Existing tools get paired with HTML resources that render inline in the host's conversation. The tool continues to work for text-only clients — UI is an enhancement, not a replacement. Each tool that benefits from UI gets linked to a resource via _meta.ui.resourceUri, and the host renders that resource in a sandboxed iframe when the tool is called.

Getting Reference Code

Clone the SDK repository for working examples and API documentation:

git clone --branch "v$(npm view @modelcontextprotocol/ext-apps version)" --depth 1 https://github.com/modelcontextprotocol/ext-apps.git /tmp/mcp-ext-apps

API Reference (Source Files)

Read JSDoc documentation directly from /tmp/mcp-ext-apps/src/:

File Contents
src/app.ts App class, handlers (ontoolinput, ontoolresult, onhostcontextchanged, onteardown), lifecycle
src/server/index.ts registerAppTool, registerAppResource, getUiCapability, tool visibility options
src/spec.types.ts All type definitions: McpUiHostContext, CSS variable keys, display modes
src/styles.ts applyDocumentTheme, applyHostStyleVariables, applyHostFonts
src/react/useApp.tsx useApp hook for React apps
src/react/useHostStyles.ts useHostStyles, useHostStyleVariables, useHostFonts hooks

Key Examples (Mixed Tool Patterns)

These examples demonstrate servers with both App-enhanced and plain tools — the exact pattern you're adding:

Example Pattern
examples/map-server/ show-map (App tool) + geocode (plain tool)
examples/pdf-server/ display_pdf (App tool) + list_pdfs (plain tool) + read_pdf_bytes (app-only tool)
examples/system-monitor-server/ get-system-info (App tool) + poll-system-stats (app-only polling tool)

Framework Templates

Learn and adapt from /tmp/mcp-ext-apps/examples/basic-server-{framework}/:

Template Key Files
basic-server-vanillajs/ server.ts, src/mcp-app.ts, mcp-app.html
basic-server-react/ server.ts, src/mcp-app.tsx (uses useApp hook)
basic-server-vue/ server.ts, src/App.vue
basic-server-svelte/ server.ts, src/App.svelte
basic-server-preact/ server.ts, src/mcp-app.tsx
basic-server-solid/ server.ts, src/mcp-app.tsx

Step 1: Analyze Existing Tools

Before writing any code, analyze the server's existing tools and determine which ones benefit from UI.

  1. Read the server source and list all registered tools
  2. For each tool, assess whether it would benefit from UI (returns data that could be visualized, involves user interaction, etc.) vs. is fine as text-only (simple lookups, utility functions)
  3. Identify tools that could become app-only helpers (data the UI needs to poll/fetch but the model doesn't need to call directly)
  4. Present the analysis to the user and confirm which tools to enhance

Decision Framework

Tool output type UI benefit Example
Structured data / lists / tables High — interactive table, search, filtering List of items, search results
Metrics / numbers over time High — charts, gauges, dashboards System stats, analytics
Media / rich content High — viewer, player, renderer Maps, PDFs, images, video
Simple text / confirmations Low — text is fine "File created", "Setting updated"
Data for other tools Consider app-only Polling endpoints, chunk loaders

Step 2: Add Dependencies

npm install @modelcontextprotocol/ext-apps
npm install -D vite vite-plugin-singlefile

Plus framework-specific dependencies if needed (e.g., react, react-dom, @vitejs/plugin-react for React).

Use npm install to add dependencies rather than manually writing version numbers. This lets npm resolve the latest compatible versions. Never specify version numbers from memory.

Step 3: Set Up the Build Pipeline

Vite Configuration

Create vite.config.ts with vite-plugin-singlefile to bundle the UI into a single HTML file:

import { defineConfig } from "vite";
import { viteSingleFile } from "vite-plugin-singlefile";

export default defineConfig({
  plugins: [viteSingleFile()],
  build: {
    outDir: "dist",
    rollupOptions: {
      input: "mcp-app.html", // one per UI, or one shared entry
    },
  },
});

HTML Entry Point

Create mcp-app.html (or one per distinct UI if tools need different views):

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MCP App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./src/mcp-app.ts"></script>
  </body>
</html>

Build Scripts

Add build scripts to package.json. The UI must be built before the server code bundles it:

{
  "scripts": {
    "build:ui": "vite build",
    "build:server": "tsc",
    "build": "npm run build:ui && npm run build:server",
    "serve": "tsx server.ts"
  }
}

Step 4: Convert Tools to App Tools

Transform plain MCP tools into App tools with UI.

Before (plain MCP tool):

server.tool("my-tool", { param: z.string() }, async (args) => {
  const data = await fetchData(args.param);
  return { content: [{ type: "text", text: JSON.stringify(data) }] };
});

After (App tool with UI):

import { registerAppTool, registerAppResource, RESOURCE_MIME_TYPE } from "@modelcontextprotocol/ext-apps/server";

const resourceUri = "ui://my-tool/mcp-app.html";

registerAppTool(server, "my-tool", {
  description: "Shows data with an interactive UI",
  inputSchema: { param: z.string() },
  _meta: { ui: { resourceUri } },
}, async (args) => {
  const data = await fetchData(args.param);
  return {
    content: [{ type: "text", text: JSON.stringify(data) }],   // text fallback for non-UI hosts
    structuredContent: { data },                                 // structured data for the UI
  };
});

Key guidance:

  • Always keep the content array with a text fallback for text-only clients
  • Add structuredContent for data the UI needs to render
  • Link the tool to its resource via _meta.ui.resourceUri
  • Leave tools that don't benefit from UI unchanged — they stay as plain tools

Step 5: Register Resources

Register the HTML resource so the host can fetch it:

import fs from "node:fs/promises";
import path from "node:path";

const resourceUri = "ui://my-tool/mcp-app.html";

registerAppResource(server, {
  uri: resourceUri,
  name: "My Tool UI",
  mimeType: RESOURCE_MIME_TYPE,
}, async () => {
  const html = await fs.readFile(

List & Monetize Your Skill

Submit your Claude Code skill and start earning

Get started →

Use Cases

Task Automation & Efficiency

Automate repetitive workflows and reduce manual effort

Example

Generate reports, summarize documents, draft communications

✓

Save 3-5 hours per week on routine tasks

Knowledge Enhancement

Learn new skills, understand complex topics, get expert guidance

Example

Explain concepts, provide examples, suggest learning resources

✓

Accelerate learning and skill development by 2x

Quality Improvement

Enhance output quality through reviews, suggestions, and refinements

Example

Review drafts, suggest improvements, catch errors

✓

Improve work quality by 30-40% with less effort

Implementation Guide

Prerequisites

  • ›Claude Desktop or compatible AI client with skill support
  • ›Clear understanding of task or problem to solve
  • ›Willingness to iterate and refine outputs

Time Estimate

15-45 minutes depending on use case complexity

Steps

  1. 1Install skill using provided installation command
  2. 2Test with simple use case relevant to your work
  3. 3Evaluate output quality and relevance
  4. 4Iterate on prompts to improve results
  5. 5Integrate into regular workflow if valuable

Common Pitfalls

  • ⚠Expecting perfect results without iteration
  • ⚠Not providing enough context in prompts
  • ⚠Using skill for tasks outside its intended scope
  • ⚠Accepting outputs without review and validation

Best Practices

✓ Do

  • +Start with clear, specific prompts
  • +Provide relevant context and constraints
  • +Review and refine all outputs before using
  • +Iterate to improve output quality
  • +Document successful prompt patterns

✗ Don't

  • −Don't use without understanding skill limitations
  • −Don't skip validation of outputs
  • −Don't share sensitive information in prompts
  • −Don't expect skill to replace human judgment

💡 Pro Tips

  • ★Be specific about desired format and style
  • ★Ask for multiple options to choose from
  • ★Request explanations to understand reasoning
  • ★Combine AI efficiency with human expertise

When to Use This

✓ Use when

Use when skill capabilities match your task, clear ROI on time saved, and you can validate outputs. Best for repetitive tasks, learning, and quality improvement.

✗ Avoid when

Avoid when task requires deep expertise you can't validate, involves sensitive decisions, or when learning process is more valuable than speed of completion.

Learning Path

  1. 1Familiarize yourself with skill capabilities and limitations
  2. 2Start with low-risk, non-critical tasks
  3. 3Progress to more complex and valuable use cases
  4. 4Build expertise through regular use and experimentation

Related Skills

uni-app

15

uni-helper/skills

Productivitytag: app

expo-app-design

14

skillcreatorai/ai-agent-skills

Frontendtag: app

mobile-app-ui-design

9

ceorkm/mobile-app-ui-design

Frontendtag: app

app-store-preflight-skills

8

truongduy2611/app-store-preflight-skills

Productivitytag: app

telegram-mini-app

8

davila7/claude-code-templates

Productivitytag: app

typescript-best-practices

96

jwynia/agent-skills

Backendsame category

Reviews

4.4★★★★★41 reviews
  • L
    Layla Gupta★★★★★Dec 20, 2024

    add-app-to-server has been reliable in day-to-day use. Documentation quality is above average for community skills.

  • A
    Amelia Perez★★★★★Dec 20, 2024

    Keeps context tight: add-app-to-server is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • C
    Chaitanya Patil★★★★★Dec 16, 2024

    I recommend add-app-to-server for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • A
    Aditi Diallo★★★★★Dec 16, 2024

    Registry listing for add-app-to-server matched our evaluation — installs cleanly and behaves as described in the markdown.

  • A
    Aditi Lopez★★★★★Dec 4, 2024

    Useful defaults in add-app-to-server — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.

  • A
    Amina Perez★★★★★Nov 23, 2024

    We added add-app-to-server from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

  • I
    Isabella Brown★★★★★Nov 11, 2024

    add-app-to-server is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • P
    Piyush G★★★★★Nov 7, 2024

    Solid pick for teams standardizing on skills: add-app-to-server is focused, and the summary matches what you get after install.

  • A
    Amina Khanna★★★★★Nov 7, 2024

    add-app-to-server reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • S
    Shikha Mishra★★★★★Oct 26, 2024

    add-app-to-server is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

showing 1-10 of 41

1 / 5

Discussion

Comments — not star reviews
  • No comments yet — start the thread.