mcp-apps-builder — скилл для Claude Code: MCP и установка
Скилл помогает собирать, менять, отлаживать и проверять TypeScript MCP-серверы и MCP Apps. Пригодится для инструментов, View, OAuth и Skills over MCP.
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-codeЧто делает mcp-apps-builder
Скилл ведёт работу с TypeScript MCP-серверами и MCP Apps на базе mcp-use: от создания проекта до миграции, ревью и проверки. Он предлагает сначала изучить package.json, точку входа сервера, экспортируемые ссылки на инструменты, mcp-env.d.ts, каталоги views/ и skills/, а также установленную версию пакета.
Внутри описан рабочий процесс для инструментов, ресурсов, промптов, middleware, React View, контекста модели, возможностей хоста, OAuth, прав доступа, OpenAPI, проксирования и уведомлений. Для нового проекта используется create-mcp-use-app@latest, а сведения берутся из установленных типов и деклараций. Это повод проверить версию mcp-use до выбора API: старые импорты и формы регистрации скилл не предлагает сохранять автоматически.
Проверка должна охватывать реальный жизненный цикл изменённого поведения. View связывается с инструментом через outputSchema и structuredContent, инструменты импортируются из mcp-use, React API — из mcp-use/react, а OAuth-адаптеры — из mcp-use/oauth/*. Скилл также требует не хранить идентичность запроса и постоянное состояние в глобальных переменных.
Какие задачи решает
- создать TypeScript MCP-сервер по шаблону
- добавить инструменты, ресурсы и промпты
- связать View с MCP-инструментом
- перенести проект на установленную версию
mcp-use - проверить OAuth и интерактивное поведение
Примеры запросов агенту
- Создай новый TypeScript MCP-сервер через `create-mcp-use-app@latest`, сверяясь с установленной версией `mcp-use`.
- Проверь View в `views/<name>/view.tsx`: найди связанный инструмент, `outputSchema` и `structuredContent`, затем исправь ошибки.
- Проведи ревью MCP-сервера: проверь импорты, экспорт ссылок на инструменты, request-scoped состояние и OAuth-настройки.
Как установить mcp-apps-builder
1Через Skills CLI (Vercel)
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code2Вручную: положить файлы
~/.claude/skills/mcp-apps-builder/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mcp-apps-builder/
1Через Skills CLI (Vercel)
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a codex2Вручную: положить файлы
.agents/skills/mcp-apps-builder/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a cursor2Вручную: положить файлы
.cursor/skills/mcp-apps-builder/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install mcp-use/mcp-use mcp-apps-builder2Вручную: положить файлы
.github/skills/mcp-apps-builder/SKILL.md1Через Skills CLI (Vercel)
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a gemini-cli2Командой платформы
gemini skills install https://github.com/mcp-use/mcp-use --path skills/mcp-apps-builderВручную: положить файлы
.devin/skills/mcp-apps-builder/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о mcp-apps-builder
Как установить `mcp-apps-builder` в Claude Code?
Выполните npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code, повторите npx skills add mcp-use/mcp-use --skill mcp-apps-builder -a claude-code, затем проверьте файл ~/.claude/skills/mcp-apps-builder/SKILL.md.
Что делает `mcp-apps-builder`?
Скилл помогает создавать, изменять, отлаживать, переносить и проверять TypeScript MCP-серверы и MCP Apps на базе mcp-use. Он охватывает инструменты, View, OAuth, middleware и Skills over MCP.
Что нужно проверить перед выбором API `mcp-use`?
Сначала проверьте установленную версию пакета, его экспортируемые типы и декларации. Скилл опирается на текущие API проекта и не сохраняет импорты, которых уже нет в установленной версии.
Исходный текст
SKILL.md · Apache-2.0
---
name: mcp-apps-builder
description: Build, modify, debug, migrate, review, or verify TypeScript MCP servers and MCP Apps with mcp-use. Use for tools, resources, prompts, middleware, Views, authentication, Skills over MCP, scaffolding, and advanced features.
---
# Build with mcp-use
Treat the installed `mcp-use` package, its exported types, generated declarations, and the project's existing code as the source of truth. Inspect the installed version before choosing APIs or changing code.
## Workflow
1. Inspect `package.json`, the server entry, exported tool refs, `mcp-env.d.ts`, `views/`, `skills/`, and the installed `mcp-use` version.
2. Scaffold a new stable project with `create-mcp-use-app@latest` and the appropriate template. Match the package version or dist-tag when working on beta, canary, or an existing versioned project.
3. Read only the references needed for the task:
- [Server](references/server.md) for tools, resources, prompts, MCP middleware, request context, and result envelopes.
- [Views](references/views.md) for interactive MCP Apps, React hooks, model context, host capabilities, assets, and CSP.
- [Authentication](references/auth.md) for OAuth providers, verified identity, scopes, permissions, and authorization.
- [Skills over MCP](references/skills-over-mcp.md) when a server should ship reusable workflows alongside its tools.
- [Advanced features](references/advanced-features.md) for OpenAPI, proxying, notifications, subscriptions, and elicitation.
- [Migration](references/migration.md) only when retired or compatibility-only imports, helpers, registration shapes, UI patterns, or session assumptions are present.
- [Verification](references/verification.md) before reporting implementation work complete.
4. Implement against installed types. Prefer the framework's current conventions over copied examples or historical changelogs.
5. Validate the smallest real lifecycle that proves the changed behavior, then expand checks in proportion to risk.
## Core invariants
- Import server APIs from `mcp-use`, React APIs from `mcp-use/react`, and OAuth provider adapters from their `mcp-use/oauth/*` subpaths.
- Define tool arguments with `inputSchema`. Add `outputSchema` for structured results and every View-bound tool.
- Return raw MCP result envelopes. A successful schema-backed tool must include matching `structuredContent`; an expected failure may return `isError: true` with model-readable `content`.
- Put each View at `views/<name>/view.tsx` and bind it with `view: { name: "<name>" }`.
- Export every statically declared tool ref consumed by a View. Default-export the server entry used by `mcp-use dev`, `build`, and `start`.
- Keep identity and mutable workflow state request-scoped or in an external store. Treat client-reported metadata as unverified.
- Consider Skills over MCP when a server exposes a repeatable, multi-step workflow that would otherwise inflate tool descriptions.
## Guardrails
- Do not invent exports, configuration fields, or callback shapes. Confirm uncertain details in installed declarations or source.
- Do not preserve APIs that are absent from the installed version merely because they appear in an existing project.
- Do not return a plain domain object from a tool callback.
- Do not bind a View without a matching `outputSchema` and `structuredContent` result.
- Do not use module globals for cross-request identity, elicitation continuity, or durable business state.
- Do not claim success from a source build alone when types, package exports, authentication, or interactive behavior changed.
- Do not deploy or mutate external systems unless the user explicitly requests it.
© mcp-use · Apache-2.0 · mcp-use/mcp-use