MCP Apps

Установка

npx skillfoxx add plugins/mcp-apps

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@mcp-apps

/plugin marketplace add modelcontextprotocol/ext-apps
/plugin install mcp-apps@modelcontextprotocol-ext-apps

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

MCP Apps это официальное расширение протокола Model Context Protocol, которое позволяет MCP-серверу отдавать вместе с результатом инструмента HTML-интерфейс: график, форму, дашборд. Репозиторий содержит спецификацию, SDK и четыре скилла для агентов: создание нового MCP App с нуля, добавление интерфейса к существующему инструменту MCP-сервера, перенос приложения с OpenAI Apps SDK и превращение обычного веб-приложения в гибридное. Скиллы дают агенту пошаговый алгоритм и ссылки на эталонные шаблоны на React, Vue, Svelte, Preact, Solid и обычном JavaScript.

Для кого. Для разработчиков MCP-серверов, которым нужно добавить инструменту интерактивный интерфейс вместо простого текстового ответа.

Пример запроса к агенту

Добавь моему MCP-серверу интерактивный интерфейс, который показывает результат в виде дашборда

Ограничения

Скиллы дают инструкции и ссылки на шаблоны, но сборка интерфейса требует своей системы сборки (vite-plugin-singlefile для упаковки HTML). Поддержка MCP Apps на стороне клиента зависит от конкретного приложения: Claude, ChatGPT, VS Code, Goose, Postman и другие перечислены в README.

Как отключить. Удалите плагин mcp-apps через /plugin в Claude Code или, при ручной установке, удалите папку скилла из каталога агента.

Проверка безопасности

• Скиллы только дают инструкции по сборке интерфейса, сами по себе не выполняют внешних действий

Коротко о README

README официального репозитория modelcontextprotocol/ext-apps описывает MCP Apps как расширение протокола для интерактивных интерфейсов поверх инструментов MCP-сервера. В README перечислены поддерживающие клиенты: Claude, ChatGPT, VS Code, Goose, Postman, MCPJam, mcp-use и Alpic. Быстрее всего начать через один из четырех скиллов, которые устанавливаются как плагин Claude Code или вручную в любой агент с поддержкой Agent Skills. В репозитории также лежат примеры серверов на разных фреймворках и полный текст спецификации.

SKILL.md

---
name: create-mcp-app
description: This skill should be used when the user asks to "create an MCP App", "add a UI to an MCP tool", "build an interactive MCP View", "scaffold an MCP App", or needs guidance on MCP Apps SDK patterns, UI-resource registration, MCP App lifecycle, or host integration. Provides comprehensive guidance for building MCP Apps with interactive UIs.
---

# Create MCP App

Build interactive UIs that run inside MCP-enabled hosts like Claude Desktop. An MCP App combines an MCP tool with an HTML resource to display rich, interactive content.

## Core Concept: Tool + Resource

Every MCP App requires two parts linked together:

1. Tool - Called by the LLM/host, returns data
2. Resource - Serves the bundled HTML UI that displays the data

The tool's _meta.ui.resourceUri references the resource's URI.

Host calls tool -> Host renders resource UI -> Server returns result -> UI receives result.

## Quick Start Decision Tree

### Framework Selection

| Framework | SDK Support | Best For |
|-----------|-------------|----------|
| React | useApp hook provided | Teams familiar with React |
| Vanilla JS | Manual lifecycle | Simple apps, no build complexity |
| Vue/Svelte/Preact/Solid | Manual lifecycle | Framework preference |

Похожие